webpack4配置详解之经常使用插件分享

时间 2019-11-08

标签 webpack4 webpack 配置详解经常使用插件分享繁體版

原文原文链接

前言

继上一次webpack的基础配置分享以后，本次将分享一些工做中项目经常使用的配置插件、也会包含一些本身了解过以为不错的插件，若有分析不到位的，欢迎纠错，嗯，这些东西文档都有，大佬可绕过。javascript

Wepack4以后废弃了不少的插件，这里只会讲解webpack4还支持的（包含4以前插件），已经废弃的将再也不阐述。css

上一次的分享以后，有部分网友留言质疑：骗小白的赞、是否原创、是不是抄别人等等，固然也有不少的网友支持和鼓励，无论褒贬，苏南都很是的感谢，是大家让我认识到本身的不足与优劣。html

你们的留言，让我想起了本身刚入门前端初期的心酸，基本靠本身自学，没有人带，遇到问题像无头的苍蝇，处处乱撞网上一顿搜索，百度未曾欺我，在点了一个又一个的广告以后，翻过十页八页以后终于找到了问题的解决方案。前端

执着于对前端的热爱，经常一个问题卡到深夜，初入前端的我曾一度感叹在编辑器写一些东西，在网页上就能跑，甚至感叹 js 写上一个 alert hello world，浏览器就会自动弹出一个窗口，仿佛全世界都在向你招手，当时的兴奋是难以形容的，甚至幻想着将来有一天，可能有千万、亿万的用户，在用你写的东西。—— 虽然尚未到亿万，但梦想仍是要有的java

这几天一直在想，这篇插件的总结仍是否要继续写下去？从写博客到今天，将近两个月吧，也算是一个新人，技术方面虽然说工做了几年，但也不敢说多牛B，写博客的初衷是为了对本身工做中遇到的问题/心得等作一个总结，俗话说：好记性不如烂笔头；同时也但愿能把本身遇到的问题、坑点分享给他人，让遇到一样问题的基友们能少走那么一点点弯路。webpack

终于最后在想了好久以后明白，人无完人，百人百性、千人千面，无论你作什么总会有不一样的声音，一样无论你分享什么，总会有人须要或鄙视。因此走本身的路，让别人打车吧，坚持本身所想努力成为本身想成为的样子，就是对本身最大的确定 ———— 至曾经初入前端的咱们。git

去作想作的事，去爱值得的人；
去成为本身喜欢的模样，
去让本身发光！浑身充满力量，
充实的日子最美好！

各位早安，这里是@IT·平头哥联盟，我是首席填坑官∙苏南，用心分享与您一块儿成长作有温度的攻城狮。
公众号：honeyBadger8，群：912594095github

mini-css-extract-plugin

css-提取，看名字就懂提取css用的。
在这以前咱们可能会使用extract-text-webpack-plugin比较多一些，二者相比它有什么优点呢？
extract-text-webpack-plugin 它对css的提取，最终是根据你建立的实例、或者配置多个入口 chunk来的，
好比你配置了一个入口文件，最终全部的css都会提取在一个样式文件里，
若是你建立了多个extract-text-webpack-plugin实例，则会生成多个css的文件，
而mini-css-extract-plugin，它默认就会对你的样式进行模块化拆分，嗯，有点跟output里的配置一个意思，异步按需加载，再也不仅仅是js的特权;
使用示例：

二者编译结果进行比较，首席填坑官∙苏南的专栏，webpack配置插件 — 二者编译结果进行比较

//extract-text-webpack-plugin 编译打包
config.module.rules.push({
  test: /\.(scss|css)$/,
  use: ExtractTextPlugin.extract({
	use: [
	  "css-loader",
	  { //首席填坑官∙苏南的专栏 交流：91259409五、公众号：honeyBadger8
		loader: 'postcss-loader',
		options: {
		  plugins: [
			require('autoprefixer')({ //添加前缀
			  browsers: CSS_BROWSERS,
			}),
		  ],
		  minimize: true
		},
	  },
	  "sass-loader"
	]
  })
})
config.plugins.push(new ExtractTextPlugin({
  filename: 'css/[name].css',
  disable: false,
  allChunks: true,
}));


//mini-css-extract-plugin 编译打包
config.module.rules.push({
  test: /\.(scss|css)$/,//同时处理css/scss
	use: [
	  {
		loader: MiniCssExtractPlugin.loader,
	  },
	  "css-loader", //css处理器
	  {
		loader: 'postcss-loader',
		/* postcss 这个插件的做用在于，与已有的工具集成一块儿使用，不多有单独使用的状况， 通用咱们用的最多的，是配合 autoprefixer 来添加各浏览器的前缀，以达到更好的兼容， 再深刻一些就是 cssnext 就是容许开发者自定义属性和变量 ： color:var(--theme-color,#42b983); */
		options: {
		  plugins: [
			require('autoprefixer')({ 
			  browsers: CSS_BROWSERS,
			}),
		  ],
		},
	  },
	  "sass-loader" //sass处理器 、甚至还能够再加一个less的处理器
	]
})

config.plugins.push(new MiniCssExtractPlugin({
  filename: 'css/[name].css', //这里配置跟output写法一致
  chunkFilename: 'css/[id][chunkhash:8].css',
}));
config.plugins.push(new OptimizeCssAssetsPlugin({})); //压缩文件

复制代码

optimize-css-assets-webpack-plugin

上面的示例里已经用到了，它的做用在于压缩css文件，
assetNameRegExp：默认是所有的css都会压缩，该字段能够进行指定某些要处理的文件，
cssProcessor：指定一个优化css的处理器，默认cssnano，
cssProcessorPluginOptions：cssProcessor后面能够跟一个process方法，会返回一个promise对象，而cssProcessorPluginOptions就是一个options参数选项！
canPrint：布尔，是否要将编译的消息显示在控制台，没发现有什么用！
坑点：建议使用高版本的包，以前低版本有遇到样式丢失把各浏览器前缀干掉的问题，

new OptimizeCssAssetsPlugin({
  assetNameRegExp: /\.optimize\.css$/g,
  cssProcessor: require('cssnano'),
  cssProcessorPluginOptions: {
    preset: ['default', { discardComments: { removeAll: true } }],
    //autoprefixer: { browsers: CSS_BROWSERS }, 也是能够指定前缀的
  },
  canPrint: true
})
复制代码

SplitChunksPlugin、RuntimeChunkPlugin

它们跟上一篇的optimization配置下的的splitChunks、runtimeChunk基本是一致的，；
SplitChunksPlugin、RuntimeChunkPlugin，其实就是webpack4以前CommonsChunkPlugin的替代品，用于提取一些公共模块；
chunks：要进行处理的类型，它有三个值：all,async,initial
minSize：最少大小
maxSize：最大包的大小，超出生成新的包
minChunks：至少要引用N次的模块，
maxAsyncRequests：最大的按需加载并行请求数量
maxInitialRequests：最大的初始化加载请求次数

new webpack.optimize.SplitChunksPlugin({
    chunks: 'async', 
    minSize: 30000, 
    maxSize: 0, 
    minChunks: 1,  
    maxAsyncRequests: 1,
    maxInitialRequests:1, 
    name: true, //能够指定
    ……,//首席填坑官∙苏南的专栏 交流：912594095
    
}),
new webpack.optimize.RuntimeChunkPlugin({
    name: 'manifest',
    name: entrypoint => `runtimechunk~${entrypoint.name}` //动态文件名
})

复制代码

HotModuleReplacementPlugin

热更新替换，在不刷新重载页面的状况下更换编辑修改后的代码：
它只会更新改动过的内容，因此速度很快，几乎在本身刚改完，切到浏览器窗口内容就已经更新完了；
使用 HotModuleReplacementPlugin插件后，它会暴露一个module.hot对象，它下面有不少的属性：
accept：它有两个参数，一个是受权模块(能够直接是单个文件路径、也能够是一个数组包含多个文件路径)，第二个参数，是回调函数，即更新后要作的逻辑处理。
decline 有点黑名单的意思，就是忽略一些模块，不更新它们，
status 当前更新的状态，idle、check、prepare、ready、dispose、apply、fail等；
通常只用到 accept 最多，下面有个示例；

//webpack config
plugins:[
	new webpack.HotModuleReplacementPlugin()
]

//路由入口页
……
if (module.hot) {
    module.hot.accept([
    	'./pages/routes'
    ], (err) => {
    	const NextRoute = require('./pages/routes')
    	// 从DOM 中移除已经挂载的 React 组件 而后重装
    	ReactDOM.unmountComponentAtNode(APP_DOM);
    	ReactDOM.render(
    		<Provider store={Store}> <Router routes={NextRoute} history={browserHistory}/> </Provider>, APP_DOM); }); } …… 复制代码

html-webpack-plugin

这个插件相信你们都熟悉的不能再熟悉了,
把编译后的文件（css/js）插入到入口文件中，能够只指定某些文件插入，能够对html进行压缩等
filename：输出文件名；
template：模板文件，不局限于html后缀哦；
removeComments：移除HTML中的注释；
collapseWhitespace：删除空白符与换行符，整个文件会压成一行；
inlineSource：插入到html的css、js文件都要内联，即不是以link、script的形式引入；
inject：是否能注入内容到输出的页面去；
chunks：指定插入某些模块；
hash：每次会在插入的文件后面加上hash ，用于处理缓存，如：；
其余：favicon、meta、title ……；

new HtmlWebPackPlugin({
  filename: path.resolve(__dirname, '../assets/index.html'), 
  template: path.resolve(__dirname,"../views/temp.html"),
  minify:{ //压缩HTML文件&emsp;
&emsp;&emsp;removeComments:true, 
&emsp;&emsp;collapseWhitespace:true 
	},
  inlineSource:  '.(js|css)',
  inject: false,
	chunks: ['vendors', 'index'], //首席填坑官∙苏南的专栏
	hash:true, 
	favicon、meta、title等均可以配置，页面内使用「<%= htmlWebpackPlugin.options.title %>」便可
	……
})

复制代码

uglifyjs-webpack-plugin

js代码压缩,默认会使用 optimization.minimizer，
cache: Boolean/String ,字符串便是缓存文件存放的路径；
test：正则表达式、字符串、数组均可以，用于只匹配某些文件，如：/.js(?.*)?$/i;
parallel : 启用多线程并行运行来提升编译速度，常常编译的时候听到电脑跑的呼呼响，可能就是它干的，哈哈～；
output.comments ：删除全部注释，
compress.warnings ：插件在进行删除一些无用代码的时候，不提示警告，
compress.drop_console：喜欢打console的同窗，它能自动帮你过滤掉，不再用担忧线上还打印日志了；
等等还有一些如：定义压缩的程度、提出屡次出现但没有变量的值的配置，想深刻的同窗可移步官方；

//默认：
optimization:{
	minimizer:true
};

//自定义
minimizer: [
  new UglifyJsPlugin({
    cache: true,
    // cache: "assets", 
    parallel: true, //也能够指定 Number ,即最多并行运行数量
    sourceMap: true,
    uglifyOptions: {
      output: {
        comments: false,
        …… //首席填坑官∙苏南的专栏，QQ:912594095
      },
      compress: {
	      warnings: false,
	      drop_console:true,
	      …… 
	    }
    },
  }),
],

复制代码

BannerPlugin

这个插件，它的做用在于某些时候，咱们须要对文件添加一些说明，好比版本号，做者、日期等，
它就能够帮到，每次编译，在头部插件一些注释；
它能够直接是一个字符串，也能够是一个options;
嗯，差点忘说了，它是webpack自带的一个插件，不用另外再安装依赖，

首席填坑官∙苏南的专栏，以上为自定配置中使用频率较高的选项，公众号：honeyBadger8 — BannerPlugin对文档插入注释说明

//字符串：
new webpack.BannerPlugin('给文件添加一些信息，打包日期：'+ new Date());

//自定义
plugins: [
  new webpack.BannerPlugin({
  	{
		  banner: ' \n @item:苏南的项目 \n @author:suSouth \n @date:'+new Date()+' \n @description:苏南的项目 \n @version:'+package.version+' \n', // 要输出的注释内容
		  test:string/正则/数组，//可用于匹配某些文件才输出，
		  entryOnly: boolean, // 便是否只在入口 模块 文件中添加注释；
		  ……
		}
  })
],

复制代码

preload-webpack-plugin

在使用这个插件以前，咱们须要先了解一下 preload、prefetch，从字面意思上讲：预加载，
不难理解，就是提早加载资源(匹配其余页面可能用到的资源进行预先，从而达到无loading ，用户无感知的跳转)，它的使用也很是的简单，在你要进行预加载的资源上添加 rel="preload"标签便可；
示例：
而preload-webpack-plugin它的做用就是在编译打包的时候，帮咱们把以上的操做都作了，
编译完成后，你能够（指定某些/所有）文件动态插入到 HtmlWebPackPlugin 配置输出的文件内，
as：表示你预加载的资源类型；能够有有先多：script、font、image、style、video等等，更多详细请查看API，它还能够返回function；
include：要插入，进行预加载的文件，它有：allChunks、initial、asyncChunks、数组等选项，数组即表示指定插入某些文件
fileBlacklist:即文件黑名单，能够指定某个文件，也可使用正则来匹配；

、) web

首席填坑官∙苏南的专栏，webpack配置，插件的使用，公众号：honeyBadger8 — preload-webpack-plugin 资源预加载

//注意点1：请把配置必定写在HtmlWebPackPlugin插件以后，不然会报`HtmlWebpackPlugin.getHooks is not a function`错误，
//注意点2：webpack4以后，请使用最新版本 npm install --save-dev preload-webpack-plugin@next，

new PreloadWebpackPlugin({
  rel: 'prefetch',
  as: 'script',
  // as(entry) {
  // if (/\.css$/.test(entry)) return 'style';
  // return 'script';//首席填坑官∙苏南的专栏，QQ:912594095
  // },
  include: 'asyncChunks',
  // fileBlacklist: ["index.css"]
  fileBlacklist: [/\index.css|index.js|vendors.js/, /\.whatever/]
})


复制代码

webpack-bundle-analyzer

这个插件仍是蛮棒的，强烈推荐能够看看，也是本次分享的最后一个插件
它的做用在于能帮咱们很清晰直观的看到，你编译后的每个、每个文件哦，内容的分布组成，有利于咱们快速查找包过大、内容是否重复、问题定位优化等；
它会在编译完成后，自动启动一个服务、也能够自定义配置，打开一个可视化窗口，鼠标移动到对应的模块上，均可以显示出，该模块在某文件内占比的大小及stat、parsed、gzipped等的状态；
analyzerHost、analyzerPort：自定配置打开的地址、端口，默认使用：127.0.0.1:8888
reportFilename：报告生成的路径，默认以项目的output.path输出；
openAnalyzer：是否要自动打开分析窗口，
其余还有不少属性，官网也有，这里只是引导简介，请大佬们勿喷；

以上为自定配置中使用频率较高的选项,首席填坑官∙苏南的专栏，公众号：honeyBadger8 — 图片摘自官方示例gif

plugins:[
	new BundleAnalyzerPlugin({...}) //默认配置就很好了，能知足咱们的要求
]


复制代码

经常使用的几个插件地址汇总：

mini-css-extract-plugin 样式提取插件
optimize-css-assets-webpack-plugin 样式优化压缩/配合添加前缀等
html-webpack-plugin 生成入口文件，并注入依赖
uglifyjs-webpack-plugin js压缩
preload-webpack-plugin 资源预加载
webpack-bundle-analyzer 可视化编译分析
copy-webpack-plugin 文件拷贝
BannerPlugin 给文件开头处添加注释
typings-for-css-modules-loader
awesome-typescript-loader

结尾：

完整配置示例

以上就是今天为你们整理的几个项目中经常使用的插件，可能有些地方理解的不是特别到位，欢迎你们补充，同时我也给你们准备了一个整合后完整的webpack配置的示例，若有兴趣可自行测试，若是以为不错记得点个赞哦，固然您能动动手指关注下方公众号就更棒了，谢谢支持！正则表达式

宝剑锋从磨砺出，梅花香自苦寒来，作有温度的攻城狮! — 用心分享让咱们一块儿成长作有温度的攻城狮

做者：苏南 - 首席填坑官

连接：blog.csdn.net/weixin_4325…

交流：91259409五、公众号：honeyBadger8

本文原创，著做权归做者全部。商业转载请联系@IT·平头哥联盟得到受权，非商业转载请注明原连接及出处。