Webpack入门及常用配置速查

发表 分类

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。主要针对js、css、html、图片、字体文件，进行压缩、优化、合并等操作，以实现前端项目的工程化。

1. Hello Webpack

1.1. 安装

1
2
3
4
5
6
7
8
9
10
11
# 1. 初始化项目
➜  npm init -y

# 2. 安装 webpack
# --save-dev 可以用 -D 代替
➜  npm i webpack webpack-cli --save-dev

# 3. 在 package.json 中添加编译命令
  "scripts": {
    "build": "webpack"
  },

1.2. 添加源码文件

初始状态下（未进行任何配置），webpack 会查找项目到 /src/index.js 文件作为打包入口，并且输出到 /dist 目录下，所以需要先添加源码文件，才能执行打包操作。

1
2
// /src/index.js
console.log(`hello webpack`);

1.3. 执行打包

1
2
3
4
5
6
7
8
9
➜  npm run build

> webpack-demo1@1.0.0 build /Users/sunqiang/www/learning/webpack/webpack-demo1
> webpack

[webpack-cli] Compilation finished
asset main.js 29 bytes [emitted] [minimized] (name: main)
./src/index.js 29 bytes [built] [code generated]
webpack 5.3.2 compiled successfully in 315 ms

2. 核心功能点

2.1. entry、output

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 单入口
module.exports = {
  // 指定 打包入口 文件
  entry: './path/to/entry/file.js'
  // 指定 打包输出 文件
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  }
};

// 多入口
module.exports = {
  entry: {
    home: './path/to/entry/home.js',
    front: './path/to/entry/front.js'
  },
  output: {
    filename: '[name].js', // 通过 [] 占位符确保文件名唯一；name 对应入口文件名
    path: path.join(__dirname, 'dist')
  }
};

2.2. loaders

常用举例：

  • bable-loader 转换 ES6、ES7 新语法
  • css-loader .css 文件的加载和解析
  • less-loader Less 转 CSS
  • ts-loader 将 TS 转换成 JS
  • file-loader 进行图片、字体等的打包
  • raw-loader 将文件以字符串多形式导入
  • thread-loader 多进程打包 CSS 和 JS

配置示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [
      {
        // 指定匹配规则
        test: /\.txt/,
        // 指定使用的 loader
        use: 'raw-loader'
      }
    ]
  }
};

2.3. plugins

用途：

  • 用于 bundle 文件的优化，资源管理和环境变量引入（loaders 解决不了的所有事情）
  • 作用于整个构建过程

常用举例：

  • CommonsChunkPlugin 将 chunks 相同的模块代码提取成公共 js
  • ClearWebpackPlugin 清理构建目录
  • ExtracTextWebpackPlugin 将 CSS 从 bundle 中提取成一个独立的 CSS 文件
  • CopyWebpackPlugin 将文件或文件夹拷贝到构建输出目录
  • HtmlWebpackPlugin 创建 HTML 文件去承载输出的 bundle
  • UglifyjsWebpackPlugin 压缩 JS
  • ZipWebpackPlugin 打包出的资源生成一个 zip 包

配置示例：

1
2
3
4
5
6
7
// webpack.config.js
module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' })
  ]
};

2.4. mode

需要 Webpack v4+ 版本。

用于指定当前构建环境（可使用 Webpack 内置函数）：

  • development
    • 设置 process.env.NODE_ENV 的值为 development
    • 开启 NamedChunksPlugin、NamedModulesPlugin。
  • production（默认）
    • 设置 process.env.NODE_ENV 的值为 production
    • 开启 FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitOnErrorsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin、TerserPlugin。
  • none
    • 不开启任何优化选项。

3. 常用配置

3.1. 用 babel 解析 ES6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 1. 安装依赖
npm i @babel/core @babel/preset-env babel-loader -D

// 2. 添加 .babelrc
{
  "presets": [
    "@babel/preset-env"
  ]
}

// 3. webpack.config.js
module: {
  rules: [
    {
      test: /.js$/, // 匹配所有 js 文件
      use: 'babel-loader'
    }
  ]
}

3.2. 解析 CSS

说明：

  • css-loader 加载 .css 文件，并且转换成 commonjs 对象。
  • style-loader 将样式通过标签插入到 head 中。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1. 安装依赖
npm i style-loader css-loader -D

// 2. webpack.config.js
module: {
  rules: [
    {
      test: /.css$/, // 匹配所有 css 文件
      use: [
        'style-loader',
        'css-loader'
      ]
    }
  ]
}

3.3. 解析 Less

说明：

  • less-loader 将 less 转为 css

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 1. 安装依赖
npm i less less-loader -D

// 2. webpack.config.js
module: {
  rules: [
    {
      test: /.less$/, // 匹配所有 less 文件
      use: [
        'style-loader',
        'css-loader',
        'less-loader'
      ]
    }
  ]
}

3.4. 解析图片和字体

说明：

  • file-loader 用于处理文件。
  • url-loader 在 file-loader 的基础上，增加小资源的自动 Base64 处理。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 1. 安装依赖
npm i file-loader url-loader -D

// 2. webpack.config.js
module: {
  rules: [
    {
      test: /.(png|svg|jpg|gif)$/, // 匹配所有 图片 文件
      // use: 'file-loader'
      use: [
        {
          loader: 'url-loader', // 对小于 limit 的图片执行 base64 处理
          options: {
            limit: 10240 // 10K，单位：字节
          }
        }
      ]
    },
    {
      test: /.(woff|woff2|eot|ttf|otf)$/, // 匹配所有 字体 文件
      use: 'file-loader'
    }
  ]
}

3.5. 文件监听

注意：这种方式，浏览器不会自动刷新，可参见下一节通过「热更新」来实现。

作用：在发现源码发生变化时，自动重新构建新的输出文件。

方式：

  • 一、启动 webpack 命令时，追加 --watch 参数。
  • 二、在 webpack.config.js 配置文件中增加 watch: true。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// webpack.config.js
module.exports = {
  // 开启监听，默认 false，不进行监听
  watch: true,
  // 监听选项，在开启监听时生效
  watchOptions: {
    // 设置监听要忽略的文件或文件夹，支持正则，默认空
    ignored: /node_modules/,
    // 监听到变化后等待多长时间去执行构建，默认 300ms
    aggregateTimeout: 300,
    // 判断文件是否发生变化
    // 通过轮训系统指定文件是否发生变化实现，默认每秒检查 1000次
    poll: 1000
  }
}

3.6. 热更新

方式一：WDS(webpack-dev-server)

说明：

  • 不刷新浏览器；
  • 不输出文件（没有磁盘 I/O），而是放在内存中；

示例：

1
2
3
4
// 1. package.json 增加启动脚本
"scripts": {
  "dev": "webpack-dev-server --open" // --open 构建完成后自动打开浏览器
}
1
2
3
4
5
6
7
8
9
10
11
12
13
// 2. webpack.config.js
const webpack = require('webpack);

// ...

mode: 'development', // 注意：热更新仅用于生产环境
plugins: [
  new webpack.HotModuleReplacementPlugin() // webpack 内置插件
],
devServer: {
  contentBase: './dist', //
  hot: true // 开启热更新
}

方式二：WDM(webpack-dev-middleware)

说明：

  • 将 webpack 输出文件传输给服务器（Node.js 服务端）；
  • 用于更灵活的定制场景；

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

app.licten(3000, function() {
  console.log('App listening on port 3000. \n');
});

3.7. 文件指纹（文件后缀）

三种方式：

  • Hash：与整个项目的构建相关，只要项目文件修改，整个项目构建的 hash 值就会改变。
  • Chunkhash：跟 webpack 打包的 chunk（模块）有关，不同的 entry 会产生不同的 chunkhash 值。
  • Contenthash：根据文件内容来定义 hash文件内容不变，这 contenthash 不变。

占位符说明：

  • [ext] 资源后缀名
  • [name] 文件名
  • [path] 文件现对路径
  • [folder] 文件所在文件夹
  • [contenthash] 文件内容 hash，默认 md5 生成
  • [hash] 生成的 hash 值
  • [emoji] 一个随机指代文件内容的 emoji

配置示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// npm i mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    app: 'app.js',
    search: 'search.js'
  },
  output: {
    filename: '[name]_[chunkhash].js', // js 文件 + hash
    path: __dirname + '/dist'
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css' // css 文件 + hash
    })
  ],
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name]_[hash:8].[ext]' // 图片文件 + hash
            }
          }
        ]
      },
      // {
      //   test: /.(png|svg|jpg|gif)$/, // 匹配所有 图片 文件
      //   // use: 'file-loader'
      //   use: [
      //     {
      //       loader: 'url-loader', // 对小于 limit 的图片执行 base64 处理
      //       options: {
      //         limit: 10240 // 10K，单位：字节
      //       }
      //     }
      //   ]
      // },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name]_[hash:8].[ext]' // 字体文件 + hash
            }
          }
        ]
      },
      {
        test: /.css$/, // 匹配所有 css 文件
        use: [
          MiniCssExtractPlugin.loader, // 'style-loader', // 二者互斥
          'css-loader'
        ]
      },
      {
        test: /.less$/, // 匹配所有 less 文件
        use: [
           MiniCssExtractPlugin.loader, // 'style-loader', // 二者互斥
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
};

3.8. 代码压缩

3.8.1. js 文件

uglifyjs-webpack-plugin 内置

3.8.2. css 文件

optimize-css-assets-webpack-pugin 插件 + cssnano 预处理器

1
2
3
4
5
6
7
8
9
10
11
12
13
// webpack.config.js

// npm i optimize-css-assets-webpack-pugin cssnano -D
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-pugin');

// ...
plugins: [
  new OptimizeCSSAssetsPlugin({
    assetNameRegExp: /\.css$/g,
    cssProcessor: require('cssnano')
  })
]
// ...

3.8.3. html 文件

html-webpack-plugin 插件并设置压缩参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// webpack.config.js

// npm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin');

// ...

plugins: [
  // 一个页面对应一个 HtmlWebpackPlugin（参见多页面打包 HTML）
  new HtmlWebpackPlugin({
    template: path.join(__dirname, 'src/search.html'),
    filename: 'search.html', // 打包出来的 html 文件名
    chunks: ['search'], //
    inject: true, // css、js 自动注入 html 中
    minify: { // 压缩参数
      html5: true,
      collapseWhitespace: true, // 空格
      preserveLineBreaks: false, // 换行
      minifyCSS: true,
      minifyJS: true,
      removeComments: false // 删除注释
    }
  })
]

// ...

3.9. 自动清理构建目录

使用插件 webpack-clean-plugin，默认删除 output 指定的输出目录。

1
2
3
4
5
6
7
8
9
10
11
12
// webpack.config.js

// npm i clean-webpack-plugin -D
const CleanWebpackPlugin = require('clean-webpack-plugin);

// ...

plugins: [
  new CleanWebpackPlugin()
]

// ...

3.10. CSS3 前缀自动补全

PostCSS autoprefixer 插件，属于打包完成后的后置处理，补全 CSS3 前缀。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// webpack.config.js

// npm i postcss-loader autoprefixer -D

// ...

module: {
  rules: [
    {
      test: /.less$/, // 匹配所有 less 文件
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'less-loader',
        {
          loader: 'postcss-loader',
          options: {
            plugins: () => {
              require('autoprefixer')({
                browsers: [ // 设置兼容的浏览器版本
                  'last 2 version', // 最新的 2 个版本
                  '>1%', // 使用人数
                  'ios 7' // iOS 7 以上
                ]
              })
            }
          }
        }
      ]
    }
  ]
}

// ...