汨逸
汨逸

Webpack配置

Webpack配置

1. mode：模式

  1. development：开发模式

    启用 NamedChunksPlugin 和 NamedModulesPlugin。

    NamedChunksPlugin：把chunk id变为一个字符串标识符。

    NamedModulesPlugin：当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境。

  2. production：生产模式

    启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。

    FlagDependencyUsagePlugin：

    FlagIncludedChunksPlugin：

    ModuleConcatenationPlugin

    NoEmitOnErrorsPlugin

    OccurrenceOrderPlugin

    SideEffectsFlagPlugin

    UglifyJsPlugin

  3. none：不开启任何插件

2. entry：入口

entry配置的多种形式：字符串、数组、对象、函数。

2.1 字符串

module.exports = {
        entry: './src/index.js'
}

2.2 数组

作用：将多个资源预先合并，在打包时将数组中最后一个元素作为实际入口路径。

module.exports = {
        entry: ['babel-polyfill', './src/index.js']
}

2.3 对象

多入口文件配置

module.exports = {
        entry: {
                page1: './src/page1.js',
                page2: './src/page2.js'
        }
}

2.4 函数

module.exports = {
        entry: () => './src/index.js'
}

module.exports = {
        entry: () => ({
                // 添加一些动态逻辑获取工程的入口
                if (boolean) {
                        return './src/index.js'
                } else {
                        return './src/main.jss'
                }
                // 或者
                // 返回一个Promise对象进行异步操作
                return new Promise(resolve => resolve('./src/index.js'));
        })
}

注意：

  1. Webpack默认，bundle.js文件大于250KB（压缩前）会认为文件过大，会发生警告。
  2. 通过多入口将vendor（包含库，框架等第三方不常用模块打包产生的bundle）打包，提升效率
  3. 配置多页应用，减少资源体积。

3. output：资源出口

module.exports = {
        mode: 'development',
        entry: './src/index.js',
        output: {
                filename: 'bundle.js',
                path: path.join(__dirname, 'assets'),
                publicPath: '/dist/'
        }
}

output的配置项：

3.1 filename

控制输出资源的文件名

bundle.js: 设置为固定的文件名
[name].js: entry设置为对象的key值（上述2.3的page1.js和page2.js）
[hash].js: 当前打包的所有资源的hash
[chunkhash].js: 当前chunk内容的hash
[id]: 当前chunk的ID
[query]: filename配置项中的query

注意：

  1. 开发环境不必要设置chunkhash，强烈推荐生产环境配置chunkhash，目的是控制客户端缓存。

3.2 path

指定资源输出的位置，必须为绝对路径（默认为dist目录）。

{
        path: path.join(__dirname, 'dist')  // build构建后资源存储的位置
}

注意：

  1. Webpack-dev-server 也有publicPath参数，请设置该参数和webpack的path路径相同。

3.3 publicPath：

由JS或CSS内部请求的间接资源（异步加载的CSS，CSS请求图片、字体等）的请求位置。

当前html请求路径为：https://weixin.dongyin.net/coach/index.html
打包之后异步资源为chunk-a3b82d.js文件

1. 相对路径：以构建之后的html为基准，获取页面资源的相对路径（请求地址如果为https://www.test.com）
{
        publicPath: ''  // 请求地址为：https://weixin.dongyin.net/coach/chunk-a3b82d.js
        publicPath: './js'  // 请求地址：https://www.test.com/coach/js/chunk-a3b82d.js
    publicPath: '../assets' // 请求地址：https://www.test.com/assets/chunk-a3b82d.js
}

2. Host相关
{
        publicPath: '/' // 请求地址为：https://weixin.dongyin.net/chunk-a3b82d.js
        publicPath: '/js'   // 请求地址：https://www.test.com/coach/js/chunk-a3b82d.js
    publicPath: '/dist' // 请求地址：https://www.test.com/coach/dist/chunk-a3b82d.js
}

3. CDN相关
{
        publicPath: 'https://cdn.com'   // 请求地址为：https://cdn.com/chunk-a3b82d.js
        publicPath: '//cdn.com/app' // 请求地址为：//cdn.com/app/chunk-a3b82d.js
}

4. Module

两个配置：

4.1 noParse

对指定的内容不解析：noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/

4.2 rules

一个web工程通常包含HTML、JS、CSS、模版、图片、字体、SVG等多种类型的静态资源，资源之间又存在着某种联系。

对于Webpack来说，这些静态资源都是模块，我们可以加载一个JS文件一样去加载他们，但是JS又确实不认识他们，于是有了Loader辅助webpack，认识各种各样的资源文件。

原理：

  1. 每个loader本身就是一个函数
  2. webpack4之前，函数输入和输出都是字符串
  3. webpack4之后，函数输入和输出支持抽象语法树（AST），目的减少重复代码解析
  4. webpack先对代码解析=>由每一个loader对解析结果进行一一处理=>处理完成，交给webpack继续处理

4.3 常用loader

{
        // 正则表达式，匹配成功的模块使用该规则
        test: /\.css$/,
        // string|array: 使用的loader
        use: 'raw-loader',
        // 排除指定目录下的模块
        exclude: /node_modules/,
        // 包含指定目录下的模块
        include: /src/,
        // 只有src/pages下的js文件加载css
        issuer: {
                test: '/\.js$/',
                include: /src/pages
        },
        // 强制该loader在所有loader之前执行，避免被其他loader更改过（比如：eslint-loader需要先执行）
        enforce: 'pre'
}

1. exclude和include同时存在且不冲突，取并集
2. exclude和include同时存在有冲突，exclude优先级高

1. raw-loader

raw-loader 解析文本文件（比如.txt后缀但不局限于.txt的文件）

{
        test: /\.txt$/,
        use: 'raw-loader'
}

2. 样式loader集合

sass-loader 解析sass/scss样式（sass-loader起连接作用，主要是node-sass解析sass/scss内容）

css-loader 解析css后缀的文件，解析结果返回字符串。

vue-style-loadere 基于 style-loader，被 vue-loader 依赖

style-loader 将 css-loader 的解析结果（字符串）以内联标签