重学webpack5——生产环境配置

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: "js/built.js",
    path: resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 创建 style 标签，将样式放入
          // 'style-loader',
          // 这个loader 取代style-loader。作用：提取js 中的css 成单独文件
          MiniCssExtractPlugin.loader,
          // 将css 文件整合到js 文件中
          "css-loader",
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
      // 对输出的css 文件进行重命名
      filename: "css/built.css",
    }),
  ],
  mode: "development",
};

（2） CSS兼容性处理

下两个包

npm i  postcss-loader postcss-preset-env

postcss-loader :根据node环境变量生成对应环境的兼容性代码;

设置环境变量: process.env.NODE_ENV = 'development';
如果不手动设置node环境变量，默认为"production"。

postcss-preset-env:帮助postcss-loader找到package.json中browserslist的配置


  "browserslist": {
    /*开发环境，这里对应的是node的环境变量（非webpack.config.js配置的mode）：
    process.env.NODE_ENV = development*/
    "development": [
      "last 1 chrome version", //chrome最新的一个版本
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%", // 兼容市面上（使用人数？待查）最靠前的99.8%的浏览器
      "not dead", // 兼容非死亡的浏览器
      "not op_mini all" // 兼容非open mini浏览器
    ]
  }

webpack配置

1）先要在package.json中配置字段browserslist :

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}

2）webpack配置：

const { resolve } = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 配置node的环境变量
process.env.NODE_ENV = 'development';

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'post-css',
                plugins: [
                  'postcss-preset-env'
                ]
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
}

（3）压缩CSS

下载插件

//新版本会报错，安装@3，这样其他配置也要改，可以用css-minimizer-webpack-plugin
npm install optimize-css-assets-webpack-plugin@3
npm i css-minimizer-webpack-plugin

webpack配置

const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
  plugins: [
    // 压缩css
    new OptimizeCssAssetsWebpackPlugin(),
  ],
};

建议使用css-minimizer-webpack-plugin

const { resolve } = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');

// 配置node的环境变量 - css兼容性处理时使用
// process.env.NODE_ENV = 'development';

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCSSExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'postcss',
                plugins: [
                  'postcss-preset-env'
                ]
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCSSExtractPlugin({
      filename: 'css/built.css'
    }),
    // 压缩css
    new CssMinimizerWebpackPlugin()
  ],
  mode: 'development'
}

二、Js文件

（1）JS语法检查eslint

下四个包

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

配置

1）先要在package.json中配置字段eslintConfig:

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  }
}

2）webpack配置：

const { resolve } = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          fix: true
        }
      }
    ],
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development',
};

（2）JS兼容性处理

1）什么是JS兼容性处理？
其实就是把ES6及以上（后边简写为ES6+）新增的语法、API处理成ES5及以下的版本，解决某些浏览器（ie）上的兼容性报错问题。

2）Babel简介：
Babel 是一个工具链，主要用于在当前和旧的浏览器或环境中，将ES6+代码转换为JavaScript向后兼容版本的代码。

3）polyfill是啥？
不知道大家之前有没有过这种疑问：只知道babel是处理ES6+兼容的，polyfill分别是干嘛的？
其实，ES6+语法和新增的API需要分开进行处理，polyfill是针对新增API的~（比如：箭头函数是新增语法，Promise是新增的API）

下五个包

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

配置（非按需加载）

webpack.config.js：

// 以下是单个loader配置
{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  presets: [
    [
      '@babel/preset-env'
    ]
  ]
}

在上面的例子最顶部加import '@babel/polyfill’

import '@babel/polyfill';

const add = (x, y) => {
  return x + y;
};
console.log(add(2, 5));

const promise = new Promise(resolve => {
  setTimeout(() => {
    console.log('定时器执行完了~');
    resolve();
  }, 1000);
});

console.log(promise);

配置（按需加载）

下载
基础核心包: babel-loader和@babel/core ;

处理语法和API: @babel/preset-env＋配置;。

配置基于:core-js 。

注意：不需要在js中import @babel/polyfill

// 以下是单个loader配置
{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    // 预设：指示babel做怎么样的兼容性处理
    presets: [
      [
        '@babel/preset-env',
        {
          /** https://babeljs.io/docs/en/babel-preset-env#usebuiltins
           * useBuiltIns：配置@babel/preset-env如何处理polyfills，取“usage”，“entry”，“false”之一，默认为“false”
           *  - 当使用usage或entry选项时，@babel/preset-env将添加对core-js模块的直接引用，类似import（或require）。这意味着core-js将相对于文件本身进行解析，并且按需引入。
           */
          useBuiltIns: 'usage', // 按需加载
          corejs: { version: 3 }, // 指定corejs的版本
          targets: { chrome: '60', firefox: '60', ie: '9', safari: '10', edge: '17' } // 指定兼容到浏览器哪个版本
        }
      ]
    ]
  }
}

（3）JS压缩

生产环境会自动压缩js代码，只需要将模式改成生产模式即可

// 生产环境下会自动压缩js代码
mode: 'production'

三、HTML文件

HTML文件不像CSS和JS，不需要做兼容性处理。

压缩HTML

使用的plugin：html-webpack-plugin + 配置

配置

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  plugins: [
    // html压缩只需配置html-webpack-plugin
    new HTMLWebpackPlugin({
      template: './src/index.html',
      minify: {
        removeComments: true, // 移除注释
        collapseWhitespace: true // 移除空格
        // 更多配置可以自行探索
      }
    })
  ],
  mode: 'production'
}

四、生产环境总结

从文件类型出发，一起来捋捋

先是样式（css/less/sass）：
- css文件：
  - postcss-loader处理css兼容性（还需下载postcss-preset-env，在package.json中配置browserslint字段）；
  - css-loader将css文件转换成commonjs模块加载到js中；
  - mini-css-extract-plugin将js中的css模块提取成单独的一个文件；
  - css-minimizer-webpack-plugin压缩css；
- less文件：
  - 在css文件的基础上多了less-loader（需在压缩前执行，还需下载less）；
- sass文件：
  - 在css文件的基础上多了sass-loader（需在压缩前执行，还需下载node-sass）；
再是js文件：
- eslint-loader做语法检查（还需下载eslint、eslint-config-airbnb-base、eslint-plugin-import eslint，在package.json中配置eslintConfig字段）
- babel-loader处理js兼容性：
  - babel-loader+@babel/core+@babel/preset-env：只能处理ES6+语法问题；
  - babel-loader+@babel/core+@babel/preset-env+ @babel/polyfill：以非按需加载的方式处理js全部兼容性问题；
  - babel-loader+@babel/core+@babel/preset-env+ 配置：以按需加载的方式处理js全部兼容性问题（推荐）；
- 将mode设置为production，自动压缩js代码；
然后是html文件：
- html-webpack-plugin创建一个空的html并自动引入所有webpack打包输出的资源；
  - 再对其进一步配置，做到压缩html代码。
还有图片资源：
- url-loader处理css中的图片资源（img标签除外）（还需下载file-loader）；
- 针对img标签：html-loader处理html文件的img图片，从而能被url-loader处理；
最后其他资源：file-loader

webpack配置

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');

process.env.NODE_ENV = 'production';

const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  // 'style-loader', // 直接将css放到style标签里
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        ident: 'post-css',
        plugins: [ 'postcss-preset-env' ] // 还需要在package.json中配置browserslist
      }
    }
  }
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssLoader]
      },
      {
        test: /\.less$/,
        use: [ ...commonCssLoader, 'less-loader' ]
      },
      /**
       * 注意：正常来讲，一个文件只能由一个loader处理。
       * 当一个文件要被多个loader处理，需要指定loader执行的先后顺序。
       * 这里：应先执行eslint-loader，再执行babel-loader
       */
      {
        // 需要在package.json中配置eslintConfig
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: 'pre', // 优先执行
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: { version: 3 },
                targets: {
                  chrome: '60',
                  firefox: '50',
                  ie: '9'
                }
              }
            ]
          ]
        }
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'images',
          esModule: false
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          esModule: false
        }
      },
      {
        exclude: /\.(js|html|css|less|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'assets'
        }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    new CssMinimizerWebpackPlugin(),
    new HTMLWebpackPlugin({
      template: './src/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    })
  ],
  mode: 'production'
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

WEBPACK

前端