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

2021-08-23 18:46:13

1、modules通过各种loader进行模块解析，进行文件预处理

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

首先安装： npm install url-loader --save-dev
在module的rules中进行配置，rules是module对象下的一个数组，所有的loader的使用都是数组中的一个元素，在rules数组中配置使用规则，test表示匹配的文件规则，use表示使用组件url-loader，options表示图片大小在8192b（8kb）以下就会转化为base64编码，超出8kb的图片不进行处理：

module: {
   rules: [
    {
      test: /\.(png|jpg|gif)$/i,
      use: [
        {
          loader: ‘url-loader‘,
          options: {
            limit: 8192,
          },
        },
      ],
    },
  ],
}

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

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

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

test: /\.m?js$/,
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 webpack --save-dev
将 sass、scss 进行编译，以下将 sass-loader 、css-loader 与 style-loader 进行链式调用，可以将样式以 style 标签的形式插入 DOM 中，或者使用 mini-css-extract-plugin 将样式输出到独立的文件中。

test: /\.s[ac]ss$/i,
  use: [
  // 将 JS 字符串生成为 style 节点
  "style-loader",
  // 将 CSS 转化成 CommonJS 模块
  "css-loader",
  // 将 Sass 编译成 CSS
  "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 --save-dev mini-css-extract-plugin
通常 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({
    // 与 webpackOptions.output 中的选项相似
    // 所有的选项都是可选的
    filename: "[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‘);