背景
最近在看一些webpack插件相关的东西，本身对webpack不是很了解，但是这些事高级程序员必备要掌握的知识，试着学一学。
介绍
webpack官网：https://www.webpackjs.com/concepts/plugins/
官网有这么多东西：
官网内容
- 概念：就是一个打包器，把我们写的东西，打包成浏览器能够识别的东西，并且精简，压缩等（自己总结的）；
- 入口起点（entry）：指定一个文件路径，那么webpack 就从这儿开始干活（打包，编译，压缩等）；
- 输出(output)：webpack工作完会输出到指定的位置；
- loader ：loader 用于对模块的源代码进行转换，因为webpack 本身只能打包commonjs规范的js文件，可以理解成处理代码的，比如说less如何最终处理成css，就需要loader来处理。
- 插件（plugins）：理解成对项目和webpack的扩展吧，比如开发中，热替换（下面也有），就是插件。比如DllPulgin(加快打包速度的，分离打包)等。用于辅助开发，扩展webpack的功能的。
- 配置（configuration）：webpack.js文件的配置内容，可以配置那些功能
- 模块（modules）：webpack可以支持的模块有ts,sass,less,coffeeScript，ESNext。
- manifest ：当webpack打包时，我们的src等路径全都不存在了，那么打包时如何找到路径呢？就是通过mainfest.json文件来找到对应的路径，找到依赖。
- 构建目标（target）：用来指定webpack使用什么环境的语言来构建，比如：
module.exports = {
target: 'node'
};
使用 node webpack 会编译为用于「类 Node.js」环境。如果需要了解支持哪些target,请参考如下链接：
https://www.webpackjs.com/configuration/target/
- 模块热替换(HMR - Hot Module Replacement)：就是开发中实时编译功能，本地写好的代码，不用手动刷新，页面会通过保存自动刷新。
常用的插件
DefinePlugin ：允许在编译时(compile time)配置的全局常量
用法：
webpack.config.js文件（所有插件都需要用new的方式来创建）：
//创建：
new webpack.DefinePlugin({
"test":{a:1}
}),
app.js ：
//使用：
console.log(test);//这儿不需要引入就可以直接使用
DllPlugin：为了极大减少构建时间，进行分离打包
DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。
这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。
下面的例子，将我们常用的jquery、lodash打包，这两个库也不会经常去改变，单独打包，后续打包就不用在打包这两个静态资源的文件了，只打包我们src下面的文件，从而加快了打包速度。
webpack.dll.js
const webpack=require('webpack');
module.exports = {
entry:{
vendor:['jquery','loadsh']
},
output:{
path:__dirname+"/dll",
filename:"[name].js",
library:"[name]_library"
},
plugins:[
new webpack.DllPlugin({
path:__dirname+"/dll/[name]-mainfest.json",
name:"[name]_library",
context:__dirname
})
]
}
编译如上代码会在目录中生成如下文件：
dll目录
webpack.config.js
const webpack=require('webpack');
module.exports = {
entry:{
app:'./app.js'
},
output:{
filename:"[name].js"
},
plugins:[
new webpack.DefinePlugin({
"test":{a:1}
}),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require("./dll//vendor-mainfest.json"),
// name: "./my-dll.js",
// scope: "xyz",
// sourceType: "commonjs2"
})
// new webpack.ProvidePlugin({
// $:'jquery'
// })
]
}
vendor-mainfes
vendor-mainfes文件里面是一串json，都是一些路径的地址。
EnvironmentPlugin：DefinePlugin 中 process.env 键的简写方式。
EnvironmentPlugin 是一个通过 DefinePlugin 来设置 process.env 环境变量的快捷方式。
new webpack.EnvironmentPlugin(['NODE_ENV', 'DEBUG'])
等价于
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.DEBUG': JSON.stringify(process.env.DEBUG)
})
ExtractTextWebpackPlugin：从 bundle 中提取文本（CSS）到单独的文件
安装
npm install --save-dev extract-text-webpack-plugin
# 对于 webpack 2
npm install --save-dev [email protected]
# 对于 webpack 1
npm install --save-dev [email protected]
用法：
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
HotModuleReplacementPlugin：启用模块热替换(Enable Hot Module Replacement - HMR)
new webpack.HotModuleReplacementPlugin({
// Options...
})//只要加上这么一句就好了
HtmlWebpackPlugin：简单创建 HTML 文件，用于服务器访问
需要安装
npm install --save-dev html-webpack-plugin
该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。 只需添加插件到你的 webpack 配置如下：
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpackConfig = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]//这儿添加
};
这将会产生一个包含以下内容的文件 dist/index.html：
webpack App
ProvidePlugin：不必通过 import/require 使用模块
自动加载模块，而不必到处 import 或 require 。
webpack.config.js
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
or
new webpack.ProvidePlugin({
identifier: ['module1', 'property1'],
// ...
})
然后在我们任意源码中：
// in a module
$('#item'); // <= 起作用
jQuery('#item'); // <= 起作用
// $ 自动被设置为 "jquery" 输出的内容