DaMeng

Webpack 中 noParse extertals IgnorePlugin 区别

发表于 更新于 分类于 ，

noParse

作用

noParse 是 module 的配置项，通过配置 webpack.module.noParse 可以让 webpack 不对匹配到的文件进行依赖解析，进而提高打包效率。

只是忽略解析匹配到的文件，匹配到的文件依旧会参与打包。

使用场景

如果公共库中没有依赖其他模块（即没有导入其他模块，如 jquery 中没有导入其他模块），则可以通过 noParse 来配置此公共库，使 webpack 不会对其进行依赖解析，来提高打包效率。

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
	entry: {
		main: path.resolve(__dirname, "src/js/index.js"),
	},
	output: {
		filename: "./js/[name].[contenthash:5].js",
		path: path.resolve(__dirname, "dist"),
	},
	module: {
		noParse: /lodash/, //不会解析 lodash 文件中的依赖库，但打包结果中依旧包含 lodash
	},
	plugins: [new HtmlWebpackPlugin()],
	mode: "development",
};

externals

作用

externals 是 webpack 顶层配置项，通过配置 webpack.externals 可以使 webpack 忽略对匹配文件的打包，进而提高打包效率。

使用场景

对于通过 CDN 引用的公共库，可以通过 webpack.externals 来进行配置，使其不参与 webpack 的打包。 library 的开发者也可以使用此 externals 来配置不需要参与打包的其他依赖。

配置

1
2
3
4
5
6
7
8
9
10
11
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
	//...
	externals: {
		jquery: "jQuery",
	},
	//...
};
1
2
3
4
5
6
7
8
<!-- html文件 -->
...
<body>
  <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
    crossorigin="anonymous"></script>
  </script>
</body>
...
1
2
//引用 jquery 的文件
import $ from "jquery";

IgnorePlugin

作用

IngroePlugin 是 webpack 的内置插件，作用和 webpack.externals 类似，都可以让匹配到的文件不参与打包。

使用场景

对于如 moment 等第三方库，内置一些了我们用不到的文件，可以使用 IngorePlugin 来使这些无用文件不参与打包。

配置

1
2
3
4
5
6
7
8
9
const webpack = require("webpack");

module.exports = {
	plugins: [
        //不会默认加载 moment 库中 ./local 目录下的文件
		new webpack.IgnorePlugin(/\.\/locale/, /moment/),
	]
};

1
2
3
4
5
6
7
8
9
//使用 moment 的库，需要手动引入所需的语言包
import moment from "moment";

//手动引入所需要的语言包
import "moment/locale/zh-cn";

//设置语言
moment.locale("zh-cn");