YoungLe的博客

# Webapck配置

Webpack作为前端构建的一个工具🔧，就需要知道其一些基本或高级的配置和一些常用的性能优化的方法。

# 一、webpack的基本配置

# 拆分配置和merge

在项目开发中，一般会将配置拆分成3部分

  • webpack.common.js（公共部分）
  • webpack.dev.js（开发环境）
  • webpack.prod.js（线上环境）

在打包构建时，只需添加多个命令即可。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "devBuild": "webpack --config build-base-conf/webpack.dev.js",
    "dev": "webpack-dev-server --config build-base-conf/webpack.dev.js",
    "build": "webpack --config build-base-conf/webpack.prod.js"
 },

path.js

// 常用文件夹路径
const path = require('path')

const srcPath = path.join(__dirname, '..', 'src')
const distPath = path.join(__dirname, '..', 'dist')

module.exports = {
    srcPath,
    distPath
}

# webpack.common.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { srcPath } = require('./paths')

module.exports = {
    // 入口文件
    entry: path.join(srcPath, 'index'),
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: ['babel-loader'],
                include: srcPath,
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                // loader 的执行顺序是：从后往前
                loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
            },
            {
                test: /\.less$/,
                // 增加 'less-loader' ，注意顺序
                loader: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html'
        })
    ]
}

# webpack.dev.js

const path = require('path')
const webpack = require('webpack')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { distPath } = require('./paths')

module.exports = smart(webpackCommonConf, {
    mode: 'development',
    module: {
        rules: [
            // 直接引入图片 url
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            // window.ENV = 'development'
            ENV: JSON.stringify('development')
        })
    ],
    devServer: {
        port: 8080,
        progress: true,  // 显示打包的进度条
        contentBase: distPath,  // 根目录
        open: true,  // 自动打开浏览器
        compress: true,  // 启动 gzip 压缩

        // 设置代理
        proxy: {
            // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
            '/api': 'http://localhost:3000',

            // 将本地 /api2/xxx 代理到 localhost:3000/xxx
            '/api2': {
                target: 'http://localhost:3000',
                pathRewrite: {
                    '/api2': ''
                }
            }
        }
    }
})

# webpack.prod.js

const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { srcPath, distPath } = require('./paths')

module.exports = smart(webpackCommonConf, {
    mode: 'production',
    output: {
        filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
        path: distPath,
        // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
    },
    module: {
        rules: [
            // 图片 - 考虑 base64 编码的情况
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 小于 5kb 的图片用 base64 格式产出
                        // 否则，依然延用 file-loader 的形式，产出 url 格式
                        limit: 5 * 1024,

                        // 打包到 img 目录下
                        outputPath: '/img1/',

                        // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                        // publicPath: 'http://cdn.abc.com'
                    }
                }
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
        new webpack.DefinePlugin({
            // window.ENV = 'production'
            ENV: JSON.stringify('production')
        })
    ]
})

# 启动本地服务

启动本地服务实在开发环境的配置文件中添加webpack-dev-server(opens new window) 。在上面的dev配置文件中有添加devServer

# 处理ES6

处理ES6使用的是babel-loader。添加在公共的配置中。

{
    test: /\.js$/,
    loader: ['babel-loader'],
    include: srcPath,
    exclude: /node_modules/
},

使用babel-loader需要添加一个.babelrc文件。会在后面讲到具体配置。

{
    "presets": ["@babel/preset-env"],
    "plugins": []
}

# 处理样式文件

处理样式文件需要使用到style-loader，css-loader，postcss-loader。一般添加在公共的配置文件中。如果有需要进行优化的，可以分开进行配置，后面会讲到。

{
    test: /\.css$/,
    // loader 的执行顺序是：从后往前
    loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
},
{
    test: /\.less$/,
    // 增加 'less-loader' ，注意顺序
    loader: ['style-loader', 'css-loader', 'less-loader']
  }

postcss-loader(opens new window) : 浏览器兼容性，使浏览器不支持的样式语法改为支持的

使用postcss-loader需要添加一个文件配置postcss.config.js

module.exports = {
    plugins: [require('autoprefixer')]
}

# 处理图片文件

在开发环境中使用file-loader

// 直接引入图片 url
{
    test: /\.(png|jpg|jpeg|gif)$/,
    use: 'file-loader'
}

在线上环境配置文件中使用url-loader，考虑图片大小，考虑使用base64编码

{
  test: /\.(png|jpg|jpeg|gif)$/,
    use: {
      loader: 'url-loader',
        options: {
          // 小于 5kb 的图片用 base64 格式产出
          // 否则，依然延用 file-loader 的形式，产出 url 格式
          limit: 5 * 1024,

          // 打包到 img1 目录下
          outputPath: '/img1/',
        }
    }
},

# 模块化

# 二、webpack的高级配置

# 配置多入口

在某些情况下是需要配置多入口的，如有两个入口文件为index.js，other.js。分别与之对应的是index.html，other.html文件。

  1. 修改entry入口。在公共配置中。
entry: {
    index: path.join(srcPath, 'index.js'),
    other: path.join(srcPath, 'other.js')
},
  1. 修改多入口的html文件
plugins: [
  // new HtmlWebpackPlugin({
  //     template: path.join(srcPath, 'index.html'),
  //     filename: 'index.html'
  // })

  // 多入口 - 生成 index.html
  new HtmlWebpackPlugin({
    template: path.join(srcPath, 'index.html'),
    filename: 'index.html',
    // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
    chunks: ['index']  // 只引用 index.js
  }),
  // 多入口 - 生成 other.html
  new HtmlWebpackPlugin({
    template: path.join(srcPath, 'other.html'),
    filename: 'other.html',
    chunks: ['other']  // 只引用 other.js
  })
]
  1. 修改线上配置的输出的文件名称
mode: 'production',
output: {
    // filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
    filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
    path: distPath,
}

# 抽离压缩CSS文件

在上面👆讲到的样式文件的处理是配置在公共文件中的。这在开发环境下使用style-loader是没有问题的。但是如果是在线上环境中，这个loader会将样式直接插入到js文件中，那么需要直接js代码才能将样式解析出来，这个是有问题的。所以需要对此进行优化。

  1. 删除公共配置中的样式处理的loader，在各自的配置文件中去配置。
  2. 开发配置文件中是和之前的公共配置文件保持一致。
  3. 线上环境需要对样式文件进行抽离和压缩
// 引入三个插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

// 抽离 css
{
    test: /\.css$/,
    loader: [
        MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
        'css-loader',
        'postcss-loader'
    ]
},
// 抽离 less --> css
{
    test: /\.less$/,
    loader: [
        MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
        'css-loader',
        'less-loader',
        'postcss-loader'
    ]
}

plugins: [
  new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
  new webpack.DefinePlugin({
    // window.ENV = 'production'
    ENV: JSON.stringify('production')
  }),

  // 抽离 css 文件
  new MiniCssExtractPlugin({
    filename: 'css/main.[contentHash:8].css' // 打包后存放的路径以及文件名称
  })
],

optimization: {
    // 压缩 css
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
}

# 抽离公共代码和第三方代码

抽离代码是对于线上环境而言的，开发环境不需要这些操作。抽离公共代码到一个单独的chunk，可以减少打包后JS代码的体积，优化请求的速度。对于第三方代码，由于第三方插件的版本不会被经常改动，所以可以将第三方代码抽离到一个单独的chunk，代码不变，可以命中缓存，优化前端性能。

在线上环境配置文件中添加以下代码

  1. 分割代码块
optimization: {
    // 压缩 css
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],

    // 分割代码块
    splitChunks: {
        chunks: 'all',
        // initial 入口 chunk，对于异步导入的文件不处理
        // async 异步 chunk，只对异步导入的文件处理
        // all 全部 chunk

        // 缓存分组
        cacheGroups: {
            // 第三方模块
            vendor: {
                name: 'vendor', // chunk 名称
                priority: 1, // 权限更高，优先抽离，重要！！！
                test: /node_modules/,
                minSize: 0,  // 大小限制(根据项目自己定制)
                minChunks: 1  // 最少复用过几次
            },
            // 公共的模块（被多个文件import后使用）
            common: {
                name: 'common', // chunk 名称
                priority: 0, // 优先级
                minSize: 0,  // 公共模块的大小限制(根据项目自己定制)
                minChunks: 2  // 公共模块最少复用过几次
            }
        }
    }
}
  1. 修改html引用的chunks
plugins: [
  // new HtmlWebpackPlugin({
  //     template: path.join(srcPath, 'index.html'),
  //     filename: 'index.html'
  // })

  // 多入口 - 生成 index.html
  new HtmlWebpackPlugin({
    template: path.join(srcPath, 'index.html'),
    filename: 'index.html',
    // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
    chunks: ['index', 'vendor', 'common']  // 要考虑代码分割
  }),
  // 多入口 - 生成 other.html
  new HtmlWebpackPlugin({
    template: path.join(srcPath, 'other.html'),
    filename: 'other.html',
    chunks: ['other', 'common']  // 考虑代码分割
  })
]

# 懒加载

对于一个比较大的JS文件进行懒加载，只需要使用import()语法即可。懒加载不需要对``webpack进行多余的配置，webpack`是原生支持的。

// dynamic-data.js
export default {
    message: 'this is dynamic data'
}


// index.js
// 引入动态数据 --- 懒加载
setTimeout(() => {
  import('./dynamic-data').then(res => {
    console.log(res.default.message) // 注意这个default
  })
}, 1500);

打包构建的话，会自动生成一个bundle文件。如：2.5d716347.js

如上代码，运行1.5秒后才会去请求这个js文件

# 处理JSX和Vue

处理JSX使用babel中的@babel/preset-react(opens new window)

处理Vue需要配置webpack，添加vue-loaders

# 三、module，chunk，bundle的区别

  • module：各个源码文件，webpack中一切皆模块
  • chunk：多模块合并成的，如entry,import,splitchunk
  • bundle: 最终的输出文件

# 四、webpack的性能优化

开发和线上环境均可用的方法

# 优化babel-loader

{
    test: /\.js$/,
    loader: ['babel-loader?cacheDirectory'],
    include: srcPath,
    // exclude: /node_modules/
},

加上cacheDirectory，当代码没有修改，再次使用babel解析时，会使用缓存。

# IgnorePlugin忽略某些模块

例如项目中使用了momonet这个日期📅库。但是这个库的体积是很大的，有360多kb，压缩后也有60多kb。是因为这个库的语言包很多导致体积很大。所以可以忽略这个模块，使用时只引入需要的语言包，如中文和英文。

// 在线上配置文件的plugin中添加
// 忽略 moment 下的 /locale 目录
new webpack.IgnorePlugin(/\.\/locale/, /moment/),

// 引入需要的语言包
import 'moment/locale/zh-cn'

# noParse避免重复打包

例如，对完整的react.min.js文件就没有必要采用模块化，忽略对这类文件的递归解析处理

module.exports = {
  //...
  module: {
    noParse: /jquery|lodash/,
  }
};

# happyPack多进程打包

JS时单线程，使用happyPack开启多进程打包，主要是用于loader

例如使用happyPack开启多线程对babel-loader解析进行加速。

// js
{
  test: /\.js$/,
    // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
    use: ['happypack/loader?id=babel'],
    include: srcPath,
    // exclude: /node_modules/
},


plugins: [
  // happyPack 开启多进程打包
  new HappyPack({
    // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
    id: 'babel',
    // 如何处理 .js 文件，用法和 Loader 配置中一样
    loaders: ['babel-loader?cacheDirectory']
  }),
]

# ParallelUglifyPlugin多进程压缩

推荐在线上环境上使用；本地开发不推荐，不需要去压缩代码。

// 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
new ParallelUglifyPlugin({
  // 传递给 UglifyJS 的参数
  // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
  uglifyJS: {
    output: {
      beautify: false, // 最紧凑的输出
      comments: false, // 删除所有的注释
    },
    compress: {
      // 删除所有的 `console` 语句，可以兼容ie浏览器
      drop_console: true,
      // 内嵌定义了但是只用到一次的变量
      collapse_vars: true,
      // 提取出出现多次但是没有定义成变量去引用的静态值
      reduce_vars: true,
    }
  }
})

只能在开发环境上使用的优化方法

# 浏览器自动刷新

开发环境使用了devServer后，自动开启了自动刷新

# 热更新

使用HotModuleReplacementPlugin这个插件，但是不推荐使用，除了在webpack中配置，还需要在代码中进行判断。

# DllPlugin动态链接库

# 五、webpack优化产出代码

# 小图片base64编码

# bundle加hash

# 懒加载

# 提取公共代码

# IgnorePlugin

# 使用CDN

# mode使用production

  • 自动开启代码压缩
  • Vue和React会自动删除掉调试代码（如开发环境的警告⚠️）
  • 启动Tree-Shaking

# Scope Hosting

Last Updated: 9/8/2020, 4:26:52 PM