常用的插件配置

向源码暴露常量 - DefinePlugin

DefinePlugin

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),
});

console.log('Running App version ' + VERSION);
if (!BROWSER_SUPPORTS_HTML5) require('html5shiv');

它遵守一下规则：传递给 DefinePlugin 的每个键都是一个标识符或多个以 . 连接的标识符。

如果该值为字符串，它将被作为代码片段来使用。
如果该值不是字符串，则将被转换成字符串（包括函数方法）。
如果值是一个对象，则它所有的键将使用相同方法定义。
如果键添加 typeof 作为前缀，它会被定义为 typeof 调用。

在真实的项目开发中，我们一般使用 process.env，定义一个对象，当然根据不同的环境定义不同的环境变量（当然你可以直接的使用 EnvironmentPlugin

如果你只是希望在希望向外暴露 process.env.xx 属性的常量 EnvironmentPlugin 是个不错的选择

全局的忽略文件 IgnorePlugin

IgnorePlugin

有些npm包作者很久没有维护，比如MomentJS，里面有一点无用的代码，我们想要直接的忽略掉：

new webpack.IgnorePlugin({
  resourceRegExp: /^\.\/locale$/, // 资源文件
  contextRegExp: /moment$/, // 目录
});

任何在匹配到的目录下的匹配到的文件都不引入，直接的忽略。（很多脚手架CLI都直接的内置这个功能，为了兼容MomentJS）

webpack实现进度条 - ProgressPlugin

progress-plugin

progress-plugin能够在终端打印出当前的打印进度，其实本质就是webpack plugin的生命周期钩子，然后处理向外暴露当前的处理进度

const handler = (percentage, message, ...args) => {
  // e.g. Output each progress message directly to the console:
  console.info(percentage, message, ...args);
};

new webpack.ProgressPlugin(handler);

但是只是这样简单的配置无法实现进度条的效果，而且输出一大堆信息，webpack内置了一个功能，输出当前打包的进度

webpack / webpack server --progress

只是能启动打包的指令 + --progress

打包进度条插件 - WebpackBar

npm - webpackbar

const WebpackBar = require('webpackbar');
let plugins = [
  ...plugins,
  new WebpackBar()
]

配置完之后，每次打包都会显示当前的打包进度（即使是build）

社区常用 progress-bar-webpack-plugin 做替代方案，但是样式更简陋一点

统一平台大小写敏感 - case-sensitive-paths-webpack-plugin

case-sensitive-paths-webpack-plugin

在不同的平台开发下，import的大小写可能照成无法正常引入，为了统一

var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');

var webpackConfig = {
    plugins: [
        new CaseSensitivePathsPlugin()
        // other plugins ...
    ]
    // other webpack config ...
}

cross-env

npm - cross-env

cross-env跨平台实现统一设置Node环境变量，在linux、mac、window下启动Node设置环境变量的方式都不同，因此当配置webpack启动script的时候，我们可以通过

npm i cross-env -D

{
  "script": {
    "build": "cross-env NODE_ENV=production webpack --config xxx"
  }
}

资源预加载 - PrefetchPlugin

通常我们只能在源代码中使用 import() 动态导入方法并写对应的魔法注释才能预加载资源，但是prefetch-plugin能帮我把这个模块直接的进行预加载：

// context 项目根目录
// request 项目的源代码文件 目标地址，表示这个文件打包的内容能够预加载
new webpack.PrefetchPlugin([context], request);

主要在源代码识别到这个配置的内容，那么久进行预加载，但是这其实可以用 import 动态导入的语法进行配置，相当于webpack5 内置了这个功能

文件复制 - CopyWebpackPlugin

copy-webpack-plugin

在热门脚手架里，通常有public 文件目录，index.html代表html-webpack-plugin通常处理的模板html，其它的内容不经过 webpack处理，而是直接的复制到打包目录下：

new CopyWebpackPlugin({
  patterns: [
    {
      // 源资源目录
      context: PathConfig.appPublic,
      // glob 模式匹配
      from: '**/*',
      globOptions: {
        dot: true,
        // 如果被 gitignore 配置过忽略的文件不移动
        gitignore: true,
        // 不加上 ** 失效，整个目录会被移动过去
        ignore: ['**/index.html'],
      },
      // 输出路径
      to: PathConfig.appBuild,
    },
  ],
})

打包文件分析 - WebpackBundleAnalyzer

const { WebpackBundleAnalyzer } = require('webpack-bundle-analyzer')
let plugins = [
  new WebpackBundleAnalyzer()
]
// 在终端执行 npm run server的时候，会可视化 依赖图

运行指令 webpack / webpack server ....... --analyze

14-常用的插件配置