2.WebPack中module与plugins的基本使用方法

1、module：webpack只理解JavaScript和JSON文件，其他文件类型都需要通过module的各种loader转换为有效模块，进行文件预处理

1.1、url-loader将图片解析为base64文件

首先安装： npm install url-loader -D
在module的rules中进行配置，rules是module对象下的一个数组，所有的loader的使用都是数组中的一个元素，在rules数组中配置使用规则：

module: {
   rules: [
    {
      // test表示匹配的文件规则
      // \.表示对.进行转译，$表示以png|jpg|gif结尾，i表示忽略大小写，解释为匹配以.png|.jpg|.gif结尾的所有文件，且忽略大小写
      test: /\.(png|jpg|gif)$/i,
      use: [
        {
          // 表示使用loader：url-loader
          loader: 'url-loader',
          options: {
            // 表示图片大小在8192b（8kb）以下就会转化为base64编码，减少请求次数，超出8kb的图片不进行处理
            limit: 8192,
            // 输出的文件名
            name: '[name].[ext]',
            // 配置图片引用路径
            publicPath: "../images/",
            // 配置图片输出路径
            outputPath: "images/"
          },
        },
      ],
    },
  ],
}

当然它还有其他options参数，可以自行研究

1.2、babel-loader将es6及以上的语法解析成浏览器识别的普通es5语法，同时将react（jsx文件）语法通过plugins解析成js语法

安装： npm install babel-loader @babel/core @babel/preset-env -D
以下配置表示将项目中除了node_modules和bower_components文件夹中的其他所有js文件进行转译

// 针对js和mjs文件，mjs是早期的js版本
test: /\.m?js$/,
// 将node_modules和bower_components排除在外，bower_components是早期的包管理器
exclude: /(node_modules|bower_components)/,
use: {
  loader: 'babel-loader',
  options: {
    presets: ['@babel/preset-env']
  }
}

当然它还有其他options参数，可以自行研究

1.3、sass-loader将sass、scss解析成css语法

安装： npm install sass-loader sass -D
将 sass、scss 进行编译，以下将 sass-loader 、css-loader 与 style-loader 进行链式调用，可以将样式以 style 标签的形式插入 DOM 中，或者使用 mini-css-extract-plugin 代替 style-loader 将样式输出到独立的文件中。

// \.表示对.进行转译，$表示以sass结尾，i表示忽略大小写，解释为匹配以.sass和.scss结尾的所有文件，且忽略大小写
test: /\.s[ac]ss$/i,
// 实际执行顺序是从右往左的
// style-loader：将 CSS 插入到页面的 style 标签中
// css-loader：识别 CSS，将 CSS 转化成 CommonJS 模块
// sass-loader：识别 Sass，将 Sass 编译成 CSS
use: ["style-loader","css-loader","sass-loader",]

2、plugins通过各种插件plugin扩展webpack，使它更加灵活方便

2.1、MiniCssExtractPlugin分离js和css文件

sass-loader编译好css文件之后通常会放在js文件中，不符合规范，所以可以使用插件MiniCssExtractPlugin解决，将js和css文件解析成不同文件，分离js和css文件，避免js文件过大
本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。
安装： npm install mini-css-extract-plugin -D
通常 mini-css-extract-plugin 与 css-loader 一起使用

module: {
  rules: [
    {
      test: /\.s[ac]ss$/i,
      use: [
        // 在开发过程中回退到 style-loader
        process.env.NODE_ENV !== "production"
          ? "style-loader"
          : MiniCssExtractPlugin.loader,
        "css-loader",
        "sass-loader",
      ],
    },
  ],
},
plugins: [
  new MiniCssExtractPlugin({
    // 表示按原本的css文件名输出到dist/css目录下面，并直接被index.html引用，
    // filename也可以直接写css/index.css，这样所有的css都会合并到index.css里面
    filename: "css/[name].css",
    chunkFilename: "[id].css",
  }),
]

2.2、DefinePlugin创建全局变量

在编译时创建配置的全局常量，这在需要区分开发模式与生产模式进行不同的操作时，非常有用。例如，如果想在开发构建中进行日志记录，而不在生产构建中进行，就可以定义一个全局常量去判断是否记录日志，不同环境通过不同的配置文件获取不同的值

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1',
  'typeof window': JSON.stringify('object'),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
});

使用的时候不需要进行任何引用等操作，直接使用即可，比如

if (!PRODUCTION) {
  console.log('Debug info');
}
if (PRODUCTION) {
  console.log('Production log');
}

未经 webpack 压缩过的代码：

if (!true) {
  console.log('Debug info');
}
if (true) {
  console.log('Production log');
}

经过压缩后：

console.log('Production log');

2.3、CleanWebpackPlugin每次build前先清除dist目录

安装： npm install clean-webpack-plugin -D

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
  // 调用插件
  new CleanWebpackPlugin()
]