webpack生产环境配置（3）

提取css成单独文件

https://github.com/webpack-contrib/mini-css-extract-plugin

默认情况下css会打包到js中，如果css代码过多会导致js文件过大；并且在页面加载时是先加载JS，再创建style标签引入css样式，导致页面会出现"闪屏"现象。如果有一种可以将css从js代码中提取出来，这样就可以减小文件的体积。

---

步骤：

1. 创建src目录，用于存放源码
2. 创建css/index.css和src/index.js文件，并在index.js文件中引入css。webpack在分析有依赖的资源才会加入打包文件中
3. 创建index.html。使用html-webpack-plugin插件自动引入打包生成的资源，查看效果
4. webpack配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  plugins:[
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/built.css'
    })
  ],
	module:{
    rules:[
      {
        test:/.css$/,
        use:[
          // 取代style-loader。作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  }
}

5. 安装开发依赖

npm i mini-css-extract-plugin@0.9.0 -D

6. 打包

webpack

总结：mini-css插件是通过link标签引入，而不是通过style标签引入，不会出现闪屏现象；

CSS压缩

https://www.npmjs.com/package/optimize-css-assets-webpack-plugin

步骤：

1. 安装开发时依赖

npm i optimize-css-assets-webpack-plugin@5.0.3 -D

2. webpack配置

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
	plugins:[
    new OptimizeCssAssetsWebpackPlugin()
  ]
}

3. 打包

webpack

JS语法检查

Airbnb，团队合作时进行代码的规范

https://github.com/airbnb/javascript

步骤：

1. 安装开发时依赖

npm i eslint-loader@3.0.3  eslint@6.8.0  eslint-config-airbnb-base@14.0.0  eslint-plugin-import@2.20.1 -D

2. webpack.config.js配置

module.exports = {
  module:{
    rules:[
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          fix: true
        }
      }
    ]
  }
}

3. package.json中设置检查规则

{
  "eslintConfig": {
    "extends": "airbnb-base"
  }
}

4. 在入口文件中编写js不符合规范的代码进行测试

var a = 10;

console.log('hello');

5. 打包测试

注意：

• 默认情况下Airbnb遇到console.log(xx)也会报出警告，如果想要忽略警告的话则需在输出的前一行添加// eslint-disable-next-line