手动配置webpack（二）之生成环境配置

生产环境配置

1、提取 css 成单独文件

• 下载安装相关插件

  npm install --save-dev mini-css-extract-plugin

• 修改配置文件

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = {
    module: {
      rules: [
        {
          test: /\.(css|less)$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
        }
      ]
    },
    plugins: [
    	new MiniCssExtractPlugin({
        filename: 'css/index.css'
      })    
    ]
  }
  

MiniCssExtractPlugin.loader 的作用是取代 style-loader ，提取 js 中的 css 成单独文件

2、css 兼容性处理

• 下载安装相关 loader

  npm install --save-dev postcss-loader autoprefixer

• 修改配置文件

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(css|less)$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
        }
      ]
    },
    plugins: [
    	new MiniCssExtractPlugin({
        filename: 'css/index.css'
      }),
      require('autoprefixer')
    ]
  }
  

3、压缩 css

• 下载安装 相关 plugin

  npm install --save-dev optimize-css-assets-webpack-plugin

• 修改配置文件

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

4、js 语法检查

• 下载安装相关 loader

  npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

• 修改配置文件

  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'eslint-loader',
          options: {
            fix: true
          }
        }
  }
  

• 配置 package.json 文件

  "eslintConfig": {
      "extends": "airbnb-base",
      "env": {
      "browser": true
      }
  }
  

配置好之后，一片红。。。。。直接给注释了

5、js 兼容性处理

• 下载安装 loader

  npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js

• 修改配置

  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            // 预设：指示 babel 做怎么样的兼容性处理
            presets: [
              [
                '@babel/preset-env',
                {
                  // 按需加载
                  useBuiltIns: 'usage',
                  // 指定 core-js 版本
                  corejs: {
                    version: 3
                  },
                  // 指定兼容性做到哪个版本浏览器
                  targets: {
                    chrome: '60',
                    firefox: '60',
                    ie: '9',
                    safari: '10',
                    edge: '17'
                  }
                }
              ]
            ]
          }
        }
  }
  

6、js 压缩处理

js 压缩处理最简单的办法就是将 mode 改为 production因为生产环境下默认压缩 js

另外还可以安装插件 uglifyjs-webpack-plugin

const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  plugins: [
  	new UglifyWebpackPlugin({
      cache: true,
      parallel: true,
      sourceMap: true
    })
  ]
}

7、html 压缩处理

使用之前安装的插件 html-webpack-plugin

修改配置

const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  plugins: [
  	new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ]
}

完整代码链接