前言
这篇文章纯粹是作为笔记记录的方式分享我平时项目中常用的一些插件，以及提供一些我觉得不错的博文链接～
以下是常用插件列表，假如你都知道的话就可以直接跳过这篇文章啦
- happypack
- dllplugin
- commons-chunk-plugin
- webpack-dev-server
- webpack-dev-middleware
- webpack-hot-middleware（HMR）
- webpack-hot-server-middleware
- http-proxy-middleware
- html-webpack-plugin
- extract-text-webpack-plugin
- optimize-css-assets-webpack-plugin
- uglifyjs-webpack-plugin
- imagemin-webapack-plugin
- copy-webpack-plugin
加快构建速度类
- happyPack
happyPack能使得webpack进行node多线程构建项目，从而提高构建速度，以下是一个栗子：
const os = require('os')
const HappyPack = require('happypack')
const happThreadPool = HappyPack.ThreadPool({size: os.cpus().length}) // 采用多进程，进程数由CPU核数决定
plugins:[
new HappyPack({
id: 'js',
cache: true,
loaders: ['babel-loader?cacheDirectory=true'],
threadPool: happThreadPool
}),
]
- DLLPlugin
DLL字面意思了解一下
DLL(Dynamic Link Library)文件为动态链接库文件，又称“应用程序拓展”，是软件文件类型。 在Windows中，许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立的动态链接库，即DLL文件，放置于系统中。 当我们执行某一个程序时，相应的DLL文件就会被调用
我们在项目中一定会引入不少第三方的库，例如一些框架啊工具啊啥的，我们一般来说不会去改动这些文件，所以我们期盼的效果是在不改动这些库文件的情况下，打包一次就够了。这时有个牛逼的插件出现了——DLLPlugin。
DLLPlugin和DllReferencePlugin需要结合一起使用，首先需要独立建一个配置文件。
webpack.dll.conf.js
{
entry: {
vendor: [
"vue",
"vue-router",
"vuex"
]
},
output: {
path: path.join(__dirname, '../static/'), // 输出的路径
filename: '[name].dll.js', // 输出的文件，将会根据entry命名为vendor.dll.js
library: '[name]_library' // 暴露出的全局变量名
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '../static/', '[name]-mainfest.json'), // 描述依赖对应关系的json文件
name: '[name]_library',
context: __dirname // 执行的上下文环境，对之后DllReferencePlugin有用
})
]
}
这会生成一个manifest.json文件，存储各个模块与库文件的对应关系，然后在原配置文件中加上DllReferencePlugin
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('../static/vendor-mainfest.json') // 指向这个json
})
]
最后运行以下命令行将库文件打包好
webpack --config ./build/webpack.dll.conf.js
再打包我们原先的业务代码，大功告成～！
- commons-chunk-plugin
commons-chunk-plugin的作用是用来提取项目中公共依赖模块到一个新的chunk�，一般用于抽离类库node_modules。
关于commons-chunk-plugin更详细的使用和配置以及与DllPlugin的异同之处，有两篇不错的文章分享给大家～
webpack分离第三方库(CommonsChunkPlugin并不是分离第三方库的好办法DllPlugin科学利用浏览器缓存）
协助开发类
- webpack-dev-middleware
在webpack-cli中我们会启动开发模式webpack --wactch来观察代码的改动从而进行重新构建。类似的，webpack-dev-middleware起了一个中间件的作用，用它输出的文件会存在内存里，构建速度相当快，所以�可以利用它配合服务器（如express）作为静态资源服务器（本地）用于开发。
- webpack-dev-server
webpack-dev-server大家可能会比较熟悉，它本身就是一个express服务器，它就是封装了webpack-dev-middleware，还可以用到下面将会提及的HMR。
- webpack-hot-middleware（HMR）
webpack-hot-middleware结合了webpack-dev-middleware，实现了浏览器无刷新更新
- webpack-hot-server-middleware
emmmm就是webpack-hot-middleware和webpack-dev-middleware的结合版，我也只是听说。。并没有用过。
详细分析推荐一下文章～
Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc
- http-proxy-middleware
认识到这个插件的缘由是我在vue-cli（webpack模式）中进行本地开发时遇到了跨域问题，后来是使用到proxyTable来解决了这个问题。
关于proxyTable的知识，可以阅读一下以下文章
在更进一步的了解得知proxyTable是作为http-proxy-middleware插件的配置选项，在express服务器中作为接口代理的功能。
参考文章
构建基础类
- html-webpack-plugin
这个插件大多读者都应该很熟悉，它会用于生成一个html文件，并将最终生成的js，css以及一些静态资源文件以script和link的形式动态插入其中。你可以自定义这个html也可以让插件生成一个新的html。
基础用法参考官网文档
对于多页面应用，可以通过配置多个html-webpack-plugin生成多个html文件。
const glob = require('glob')
function htmlWebpackConfigs () {
var configs = []
glob.sync('./src/apps/**/*.html').forEach(htmlPath => {
const chunk = htmlPath.split('./src/apps/')[1].split('/index.html')[0]
const filename = chunk + '.html'
const htmlConf = {
filename: filename,
template: htmlPath,
chunks: ['vendors', chunk]
}
configs.push(new HtmlWebpackPlugin(htmlConf))
})
return configs
}
module.exports = {
plugins: [
...htmlWebpackConfigs()
]
}
- copy-webpack-plugin
顾名思义，对资源进行拷贝，例如一些静态资源直接拷贝到打包后的文件夹中。
new CopyWebpackPlugin([
{
from :'html',
to:'html'
},
{
context: 'global/img',
from: '**/*',
to:'img/common'
},
{
from: 'img',
to:'img'
},
{
from :'global/lib/es5-shim-sham.js'
}
])
优化压缩类
- extract-text-webpack-plugin
extract-text-webpack-plugin会将你项目中的css都单独打包，不会内嵌到js bunlde中，这样css和js即可并行加载，而代价就是额外的http请求。
module: {
rules: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'css/[name].[contenthash].css'
})
]
- optimize-css-assets-webpack-plugin
optimize-css-assets-webpack-plugin对css文件进行优化和最小化操作
plugins: [
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
canPrint: true
})
]
优秀文章分享～
- uglifyjs-webpack-plugin
uglifyjs-webpack-plugin对js文件进行压缩并且结合tree shaking删除未引用代码
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true
},
sourceMap: true
})
]
- imagemin-webapack-plugin
imagemin-webapack-plugin顾名思义就是对项目中的图片进行压缩～
plugins: [
new ImageminPlugin({
test: /\.(jpe?g|png|gif|svg)$/i,
disable: process.env.NODE_ENV !== 'production', // Disable during development
pngquant: {
quality: '90-100'
},
gifsicle: {
optimizationLevel: 2,
interlaced: true
},
optipng: {
optimizationLevel: 4,
},
jpegtran: {
progressive: true
}
}),
]
结尾
本篇文章更多的是本人在工作中的知识扫盲和学习笔记，看起来可能就是篇流水账一样-.-若有错误之处请多多包涵，也可随时提出你宝贵的意见和建议～
