webpack4配置详解之常用插件分享 (2)

坑点 ：建议使用高版本的包，之前低版本有遇到样式丢失把各浏览器前缀干掉的问题，

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, //可以指定 ……, }), 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文件　 　　removeComments:true, 　　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的同学，它能自动帮你过滤掉，再也不用担心线上还打印日志了；