webpack4设置之分享几个经常使用插件

2019年8月20日 183次阅读来源: 苏南

《webpack4设置之分享几个经常使用插件》

媒介

　　继上一次webpack的基础设置分享以后，本次将分享一些工作中项目常常运用的设置插件、也会包括一些本身相识过以为不错的插件，若有剖析不到位的，迎接纠错，嗯，这些东西文档都有，大佬可绕过。

　　Wepack4以后烧毁了许多的插件，这里只会解说webpack4还支撑的（包括4之前插件），已烧毁的将不再论述。

　　上一次的分享以后，有部份掘金网友留言质疑：骗小白的赞、是不是原创、是不是是抄别人等等，固然也有许多的网友支撑和勉励，不论褒贬，苏南都异常的感谢，是你们让我认识到本身的不足与好坏。

　　人人的留言，让我想起了本身刚入门前端早期的心伤，基础靠本身自学，没有人带，碰到题目像无头的苍蝇，随处乱闯网上一顿搜刮，百度未曾欺我，在点了一个又一个的广告以后，翻过十页八页以后终究找到了题目的解决方案。

　　固执于对前端的酷爱，常常一个题目卡到深夜，初入前端的我曾一度叹息在编辑器写一些东西，在网页上就能跑，以至叹息 js 写上一个 alert hello world，浏览器就会自动弹出一个窗口，觉得全球都在向你招手，当时的高兴是难以形容的，以至幻想着将来有一天，能够有万万、亿万的用户，在用你写的东西。

　　这几天一直在想，这篇插件的总结照样不是要继续写下去？从写博客到本日，快要两个月吧，也算是一个新人，手艺方面虽然说工作了几年，但也不敢说多牛B，写博客的初志是为了对本身工作中碰到的题目/心得等做一个总结，俗语说：好记性不如烂笔头；同时也愿望能把本身碰到的题目、坑点分享给别人，让碰到一样题目的基友们能少走那末一点点弯路。

　　终究末了在想了良久以后邃晓，人无完人，百人百性、千人千面，不论你做总会有差别的声响，一样不论你分享什么，总会有人须要。所以走本身的路，让别人打车吧，对峙本身所想勤奋成为本身想成为的样子容貌，就是对本身最大的肯定 ———— 至曾初入前端的我们。

去做想做的事，去爱值得的人；
去成为本身喜好的样子容貌，
去让本身发光！满身充溢气力，
充分的日子最优美！

列位晨安，这里是
@IT·平头哥同盟，我是
首席填坑官∙苏南，专心分享一同生长做有温度的攻城狮。
民众号：
honeyBadger8，群：912594095

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的特权;

《webpack4设置之分享几个经常使用插件》

//extract-text-webpack-plugin 编译打包
config.module.rules.push({
  test: /\.(scss|css)$/,
  use: ExtractTextPlugin.extract({
    use: [
      "css-loader",
      { //首席填坑官∙苏南的专栏 交换：912594095、民众号：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, //能够指定
    ……,

  }),
  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 最多，下面有个示例；

《webpack4设置之分享几个经常使用插件》



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 ，用于处置惩罚缓存，如：<link href=”/css/index.css?v=a6fc12dd5002c”>；
其他：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的同砚，它能自动帮你过滤掉，再也不必忧郁线上还打印日记了；
等等另有一些如：定义紧缩的水平、提出屡次涌现但没有变量的值的设置，想深切的同砚可移步官方；


//默许：
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自带的一个插件，不必别的再装置依靠，

《webpack4设置之分享几个经常使用插件》


//字符串：
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”标签即可；
示例：<link rel=”preload” href=”index.css” as=”style” />
而preload-webpack-plugin它的作用就是在编译打包的时刻，帮我们把以上的操纵都做了，
编译完成后，你能够（指定某些/悉数）文件动态插进去到 HtmlWebPackPlugin 设置输出的文件内，
as：示意你预加载的资本范例；能够有有先多：script、font、image、style、video等等，更多细致请检察API，它还能够返回function；
include：要插进去，举行预加载的文件，它有：allChunks、initial、asyncChunks、数组等选项，数组即示意指定插进去某些文件
fileBlacklist:即文件黑名单，能够指定某个文件，也能够运用正则来婚配；

《webpack4设置之分享几个经常使用插件》


//注重点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：是不是要自动翻开剖析窗口，
其他另有许多属性，官网也有，这里只是指导简介，请大佬们勿喷；

《webpack4设置之分享几个经常使用插件》

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设置的示例，若有兴致可自行测试。

　　下一期设计跟人人一同分享“React怎样封装一个组件”（或许说沉淀一个组件库）来简朴实战一下react怎样上手？迎接延续关注，如以为不错记得点个赞哦，固然您能动动手指关注下方民众号就更棒了，感谢支撑！

《webpack4设置之分享几个经常使用插件》

算法网

webpack4设置之分享几个经常使用插件

媒介

mini-css-extract-plugin

optimize-css-assets-webpack-plugin

SplitChunksPlugin、RuntimeChunkPlugin

HotModuleReplacementPlugin

html-webpack-plugin

uglifyjs-webpack-plugin

BannerPlugin

preload-webpack-plugin

webpack-bundle-analyzer

常常运用的几个插件地点汇总：

末端：

更多文章：