学习webpack4 - 样式处理

时间 2019-12-06

标签学习 webpack4 webpack 样式处理繁體版

原文原文链接

学习webpack4 - 基础配置
 学习webpack4 - HTML处理
 学习webpack4 - 样式处理
 学习webpack4 - ES6语法转化
 学习webpack4 - 第三方库的使用
 学习webpack4 - 抽离公共部分css

...持续中html

=======================================================node

样式处理

注意：开始以前如下内容以前，须要配置一些webpack的基础配置，传送门：学习webpack4.x - 基础配置webpack

当前目录为：css3

index.html文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>丸子</title>
</head>
<body>
  <div>我是一个html原文件，我想打包后自动把打包后的js插入到个人文件中， 而且把我自动放到打包后的那个目录中...</div>
</body>
</html>

package.json文件内容：

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack --mode development && webpack-dev-server",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.29.4",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14",
    "webpack-html-plugin": "^0.1.1"
  }
}

webpack.config.js文件内容：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // mode: 'development',

  //开一个本地服务
  devServer: {
    port: 3000, //端口号
    progress: true, //进度条
    contentBase: './dist', //指定目录运行服务
    open: true //自动打开浏览器
  },
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  //插件配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', //原始文件
      filename: 'index.html', //编译后的文件名称
      hash: true, //hash
    })
  ]
}

下面开始配置css：web

css配置

首先看看这种直接引入css的方法行不行：

step1: 打开src目录，新建index.css文件，并输入：npm

body {
  background: red;
}

step2: 打开src目录的index.html，直接把index.css文件引入，以下：json

<link rel="styleSheet" href="./index.css" />

尝试运行： npm run dev，成功，结果以下：segmentfault

查看编译好的dist目录发现，这种直接引用css的方法虽然没有报错，可是在dist/index.html中只是原封不动的把<link rel="styleSheet" href="./index.css" />输出了，css并无生效，因此这种直接引入的方法不可行，那么怎么样把css引入进来呢？方法以下：浏览器

把css做为模块引入文件：

step1：打开src/index.js文件，引入要编译的css文件：index.css

require('./index.css');

尝试运行：npm run dev, 结果以下：

报了个错说须要一个合适的loader来处理这个css文件，接下来进行相应的配置：

step2: 打开webpack.config.js文件，进行module配置:

// 模块配置
  module: {
    rules: [
      {test: /\.css$/, use: ['style-loader', 'css-loader']}
    ]
  },

安装style-loader, css-loader:

yarn add style-loader css-loader -D

尝试运行：npm run dev，body背景颜色变红，成功！结果以下：

补充
1. loader：webpack编译对于css，图片，或者其余的语法集好比jsx等这些是没有办法直接加载的，须要对应的loader把资源进行转化并加载，执行顺序：从右到左，从下到上。
2. css-loader: 解析css中的代码，像是@import这种语法，好比在index.css中引入另外一个other.css文件，须要@import './other.css'。
3. style-loader: 将css模块做为样式插入到DOM中。

抽离css文件

上边那种方式是把css直接插入到了html中，如图：

这样很乱，咱们能够抽离css，引入到html中，方法以下：

step1: 安装mini-css-extract-plugin插件：

yarn add mini-css-extract-plugin -D

step2: 打开webpack.config.js文件，进行配置：

let MiniCssExtractPlugin = require('mini-css-extract-plugin'); //抽离CSS

//插件配置
plugins: [
  new MiniCssExtractPlugin({
    filename: 'main.css' //抽离出的css文件名称
    //filename: 'css/main.css  //抽离出的css文件存放在css目录下
  })
]

 // 模块配置
 module: {
   rules: [{
     test: /\.(css|scss)$/,
     //将style-loader 改成 MiniCssExtractPlugin.loader，表示该类型的文件会被抽离成一个独立css文件，link引入到html中。
     use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
   }]
 },

尝试运行：npm run dev, 抽离成功，这里index.css, index.scss文件合并在一块儿被生成了一个main.css，引入到了dist/index.html文件中，如图：

less配置

step1：打开src目录，新建index.less文件，并输入：

body {
  div {
    width: 500px;
    height: 500px;
    background: yellow;
  }
}

step2: 打开src/index.js文件，引入index.less文件：

require('./index.less');

step3: 打开webpack.config.js文件，修改module部分：

// 模块配置
  module: {
    rules: [
      {test: /\.(css | less)$/, use: ['style-loader', 'css-loader', 'less-loader']},
    ]
  },

step4: 安装less, less-loader：

yarn add less less-loader -D

尝试运行：npm run dev，成功！结果以下：

scss配置

step1: 基础目录配置以后，打开webpack.config.js文件，配置module部分：

// 模块配置
  module: {
    rules: [
      {test: /\.(css|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader']}, 
    ]
  },

step2: 安装node-sass, sass-loader：

yarn add node-sass sass-loader -D

step3: 尝试运行：npm run dev，成功！

给css加前缀

咱们在写css的时候，遇到一些css3语法须要加浏览器前缀去兼容，每次写-webkit-之类的前缀很麻烦，有一种方法自动给css加上这种前缀，以下：

step1: 配置webpack.config.js文件

// 模块配置
  module: {
    rules: [{
      test: /\.(css|scss)$/,
      //增长postcss-loader
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
    }]
  },

step2: 增长配置文件postcss.config.js,并配置以下:

module.exports = {
  plugins: [require('autoprefixer')]
}

step3: 安装插件：

yarn add postcss-loader autoprefixer -D

尝试运行：npm run dev，成功，如图：

优化项配置

项目上线前打包的时候，想把编译好的css, js文件压缩了怎么处理呢？须要优化项插件optimize-css-assets-webpack-plugin，uglifyjs-webpack-plugin方法以下：

step1: 配置webpack.config.js文件

let OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css
let UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //压缩js

//优化项配置
optimization: {
  minimizer: [
    new OptimizeCssPlugin(),  //压缩css
    
    //压缩js
    new UglifyJsPlugin({
       cache: true, //缓存
       parallel: true, //并发打包
       sourceMap: true  //源码映射便于调试
    })
  ]
},

step2: 安装插件

yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

尝试打包： npm run build, 结果以下：