webpack默认内置了很多优化插件，下面介绍一下各自的含义以及如何使用。
1、noParse:指定不解析的包
例:
不解析jquery中的依赖。
有时候多处引入了jquery库（比如html文件中设置juery的引用），就不需要多次打包，此时可以用noParse指定不打包js中引入的jquery。
module.exports = {
module: {//模块
noParse: /jquery/,//不解析jquery中的依赖库
rules: [//规则，多个loader
]
}
}2、exclude/include:指定解析路径
例:
exclude：将指定文件夹排除在外；include：在指定文件夹中查找；
module.exports = {
module: {//模块
rules: [//规则，多个loader
{
test: /\.js$/,
exclude: /node_modules/,//排除node_modules文件夹下的文件
include: path.resolve('src'),//指定从src文件夹下面找
use: {
//用 babel-loader 把es6转es5
loader: "babel-loader",
}
},
]
}
}3、IgnorePlugin：指定不打包的目录
例:
只要moment中引入了.locale就把locale忽略掉，不打包进来
webpack:
const webpack = require('webpack')
module.exports = {
plugins: [//存放所有插件
new webpack.IgnorePlugin(/\.\/locale/, /moment/)//moment中引用了.locale就把locale忽略掉，不打包进来
],
}js:
import moment from "moment";
//手动引入所需语言包
import "moment/locale/zh-cn";
moment.locale("zh-cn");
let r = moment().endOf("day").fromNow();
console.log(r);
3、DllPlugin：动态链接库
动态链接库，可以减少打包过程中的第三方库的打包。只需要引入提前打包好的第三方库的文件即可。
让不需要变动的库可以提前打好包，在html里面进行引入该包，最后在通用webpack配置用使用DllReferencePlugin插件进行引入。
例:
让react和react-dom进行预打包，之后每次打包都使用事先打好的包。
1.新增react配置文件：
新增webpack.config.react.js配置文件：
//webpack 是用nodejs写的，是node语法
let path = require('path')//node提供的 相对路径 转 绝对路径 的插件
let webpack = require("webpack");
module.exports = {
mode: "development",//模式，两种模式，产线模式"production"、开发模式"development"。产线模式会把编译文件进行压缩优化，代码变成一行。
entry: {//入口，相对路径
react: ["react", "react-dom"],
},
output: {
filename: "_dll_[name].js",//打包后的文件名
path: path.resolve(__dirname, "dist"),//打包后的路径（文件夹路径），必须是绝对路径,"__dirname"指当前路径
library: "_dll_[name]",
// libraryTarget: "var",//commonjs var this ...
},
plugins: [
new webpack.DllPlugin({
name: "_dll_[name]",
path: path.resolve(__dirname, "dist", "manifest.json"),
})
]
}2.打包
运行：
npx webpack --config webpack.config.react.js可以看到dist目录下多出两个文件，_dll_react.js和manifest.json文件。
3.引入
在html模板文件中引入打好的_dll_react.js包。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/_dll_react.js"></script>
</head>
<body>
<!-- 模版，此处插入js脚本 -->
<div>我是毛毛</div>
</body>
</html>
4.添加依赖
在通用webpack配置中引入manifest.json文件。
这里用到DllReferencePlugin插件
const webpack = require('webpack')
module.exports = {
plugins: [//存放所有插件
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, "dist", "manifest.json"),
})
],
}5.使用
在js中使用react
import React from "react"
import { render } from "react-dom"
render(<h1>test</h1>, window.root);5.运行
npm run dev6.查看结果
查看页面上是否展示代码中的“test”文案，再看看打包速度和打包大小是否有变化。
暂无评论