Vue.js 学习笔记十一：Webpack之webpack 配置 plugin，mode

目录

webpack 配置

插件(plugin)

添加版权的 plugin

打包 html 的 plugin

js 压缩的 plugin

模式(mode)

---

webpack 配置

插件(plugin)

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

 

添加版权的 plugin

我们先来使用一个最简单的插件，为打包的文件添加版权声明，该插件名字叫 BannerPlugin，属于 webpack 自带的插件。 按照下面的方式来修改 webpack 配置文件：

// webpack.config.js
const webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    new webpack.BannerPlugin('最终版权归 stary 所有')
  ]
}

 

打包 html 的 plugin

目前，我们的 index.html 文件是存放在项目的根目录下的。我们知道，在真实发布项目时，发布的是 dist 文件夹中的内容，但是 dist 文件夹中如果没有 index.html 文件，那么打包的 js 等文件也就没有意义了。

所以，我们需要将 index.html 文件打包到 dist 文件夹中，这个时候就可以使用 HtmlWebpackPlugin 插件。

HtmlWebpackPlugin 插件可以为我们做这些事情：

自动生成一个 index.html 文件(可以指定模板来生成)；

将打包的 js 文件，自动通过 script 标签插入到 body 中。

先安装 HtmlWebpackPlugin 插件：

npm install html-webpack-plugin --save-dev

使用插件，修改 webpack 配置文件中 plugins 部分的内容如下：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
		template:'index.html'
	})
  ]
}

这里的 template 表示根据什么模板来生成 index.html。还有些其他选项参考：https://github.com/jantimon/html-webpack-plugin#plugins。

 

js 压缩的 plugin

在项目发布之前，我们必然需要对 js 等文件进行压缩处理。这里，我们就对打包的 js 文件进行压缩。

我们使用一个第三方的插件 uglifyjs-webpack-plugin。

先安装 uglifyjs-webpack-plugin插件：

npm install uglifyjs-webpack-plugin --save-dev

然后把插件添加到你的 webpack 配置中：

// webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new UglifyJsPlugin()
  ]
}

 

模式(mode)

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

只需在配置对象中提供 mode 选项：

module.exports = {
  mode: 'development',
};

支持以下字符串值：

选项	描述
development	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名。
production	会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和 chunk 启用确定性的混淆名称，FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin 和 TerserPlugin 。
none	不使用任何默认优化选项

如果没有设置，webpack 会给 mode 的默认值设置为 production。

在前面我们已经在 package.json 的 scripts 中定义自己的执行脚本：

 "scripts": {
  "build": "webpack --mode=development"
 }

所以之前我们一直是在 development 环境下打包。设置了 mode， 这里就可以去掉 --mode=development。package.json里的配置优先。