webpack（三）生产环境基本配置

所用插件：
mini-css-extract-plugin
optimize-css-assets-webpack-plugin
html-webpack-plugin

配置代码及说明注释如下：

const { resolve } = require('path');
// 将css提取到单独的文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 处理html资源
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 定义环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';
// 复用d代码
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    // css兼容性处理:需要在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss', // 表示下面的插件是对postcss使用的
      plugins: () => [
        // eslint-disable-next-line global-require
        require('postcss-preset-env')(),
      ],
    },
  },
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssLoader],
      },
      { // 执行书序：自下往上，less编译成css --> css兼容性处理 --> css单独放入一个文件
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader'],
      },
      /*
        一个文件只能被一个loader处理，
        当一个文件被多个loader处理，那么一定要指定loader的
        执行顺序，如下面js文件：限制性eslint再执行babel
      */
      { // js语法检查：在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/, // 将依赖及其他插件中的js排除，只检查自己写的
        enforce: 'pre', // 加此属性，优先执行此loader
        loader: 'eslint-loader',
        options: {
          fix: true,
        },
      },
      { // js兼容性处理
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env', // js简单处理：const、let、箭头函数等
            {
              useBuiltIns: 'usage',
              corejs: { version: 3 }, // core-js按需加载
              targets: { // 兼容浏览器及版本，这里举两个例子（谷歌60及以上，火狐50及以上）
                chrome: '60',
                firefox: '50',
              },
            },
          ],
        },
      },
      { // 处理图片资源
        test: /\.(jpg|png|gif)/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024, // 小于8kb按base64处理
          name: '[hash:10].[ext]', // 更改文件扩展名（取哈希值前十位，暴露源文件扩展名）
          outputPath: 'imgs', // 指定文件夹
          esModule: false, // 处理html的loader是commonJS语法，所以此处关闭es6语法
        },
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: /\.(css|less|js|html|png|jpg|gif)/,
        loader: 'file-loader',
        options: {
          outputPath: 'media',
        },
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/built.css',
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true,
      },
    }),
  ],
  mode: 'production',
};

上文所提到的

{
  "name": "xxxxx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.13.10",
    "@types/postcss-preset-env": "^6.7.1",
    "babel-loader": "^8.0.6",
    "core-js": "^3.6.4",
    "css-loader": "^5.1.1",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.22.1",
    "file-loader": "^5.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  配置browserslist
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.001%",
      "not dead",
      "not op_mini all"
    ]
  },
  js语法检查
  "eslintConfig": {
    "extends": "airbnb-base"
  }
}