webpack的核心概念及性能优化

五个核心概念

Entry

入口，指示webpack要使用哪个文件作为构建项目的起点，默认为./src/index.js

Output

出口，指示webpack在哪里输出它打包好的代码以及如何命名，默认为./dist

Loader

模块转换器， 能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中

Plugins

扩展插件， 赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决 loader 无法实现的其他事

Mode

指示webpack使用相应模式的配置。

Loader和Plugins的区别

可以看到，两者在运行时机上的区别：

• loader运行在打包文件之前
• plugins在整个编译周期都起作用

在Webpack 运行的生命周期中会广播出许多事件，Plugin可以监听这些事件，在合适的时机通过Webpack提供的 API改变输出结果

对于loader，实质是一个转换器，将A文件进行编译形成B文件，操作的是文件，比如将A.scss或A.less转变为B.css，单纯的文件转换过程

常用的Loader

1. style-loader：把CSS代码注入到JS中，通过DOM操作去加载CSS
2. css-loader：加载CSS，支持模块化，压缩，文件导入等特性
3. babel-loader：将ES6转化为ES5
4. eslint-loader：通过ESLint检查JS代码
5. image-loader：加载并压缩图片文件

常用的Plugins

extract-text-webpack-plugin：，将CSS从 bunlde.js 文件里提取成一个独立的CSS文件

html-webpack-plugin：以一个html文件为模板，生成一个html文件，并将打包生成的js文件注入当中

clean-webpack-plugin：清理构建目录

webpack的性能优化

常见的提升构建速度的手段有如下：

优化 loader 配置

在使用loader时，可以通过配置include、exclude、test属性来匹配文件，接触include、exclude规定哪些匹配应用loader
如采用 ES6 的项目为例，在配置 babel-loader时，可以这样：

module.exports = {
  module: {
    rules: [
      {
        // 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/，提升正则表达式性能
        test: /\.js$/,
        // babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启
        use: ['babel-loader?cacheDirectory'],
        // 只对项目根目录下的 src 目录中的文件采用 babel-loader
        include: path.resolve(__dirname, 'src'),
      },
    ]
  },
};

resolve.extensions（文件后缀名）

当我们引入文件的时候，若没有文件后缀名，则会根据数组内的值依次查找；若随便把所有后缀都写在里面，这又会调用多次文件的查找，这样就会减慢打包速度
通过resolve.extensions是解析到文件时自动添加拓展名，默认情况如下：

module.exports = {
    ...
    extensions:[".js",".json"]
}

resolve.modules（第三方包）

resolve.modules 用于配置 webpack 去哪些目录下寻找第三方模块。默认值为[‘node_modules’]，所以默认会从node_modules中查找文件 当安装的第三方模块都放在项目根目录下的 ./node_modules目录下时，所以可以指明存放第三方模块的绝对路径，以减少寻找，配置如下：

module.exports = {
  resolve: {
    // 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
    // 其中 __dirname 表示当前工作目录，也就是项目根目录
    modules: [path.resolve(__dirname, 'node_modules')]
  },
};

resolve.alias（绝对路径）

使用绝对路径来代替相对路径，通过配置alias以减少查找过程。

module.exports = {
    ...
    resolve:{
        alias:{
            "@":path.resolve(__dirname,'./src')
        }
    }
}

使用 DLLPlugin 插件（动态链接库）

为的就是可以共享，将不经常改变的代码，抽成一个共享的库。这个库在之后的编译过程中，会被引入到其他项目的代码中

使用cache-loader（缓存）

module.exports = {
    module: {
        rules: [
            {
                test: /\.ext$/,
                use: ['cache-loader', ...loaders],
                include: path.resolve('src'),
            },
        ],
    },
};

terser 启动多线程

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
      }),
    ],
  },
};