webpack4使用笔记之plugin

ymyang 发布于2019-08-23 14:57 / 2014人阅读

摘要：默认为根据自己的指定的模板文件来生成特定的文件主要是针对多入口文件。那么选项就可以决定是否都使用这些生成的文件。压缩压缩通过使用可以看到项目各模块的大小，可以按需优化图片来自于的

webpack4 常用plugin

clean-webpack-plugin

html-webpack-plugin

mini-css-extract-plugin

terser-webpack-plugin(webpack4内置)

optimize-css-assets-webpack-plugin

webpack-bundle-analyzer

clean-webpack-plugin

清除文件插件

new cleanWebpackPlugin(
  [resolve("dist"), resolve("build")], {
    root: __dirname,
    exclude:  ["test.html"], // 排除
    verbose: true, // Write logs to console.
    dry: false,    // Use boolean "true" to test/emulate delete. (will not remove files).
    watch: false,     // If true, remove files on recompile. 
    beforeEmit: false // 在将文件发送到输出目录之前执行清理
})

html-webpack-plugin

自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)。

如果你既指定了 template 选项，又指定了 title 选项，那么webpack 会选择哪一个？事实上，这时候会选择你指定的模板文件的 title, 即使你的模板文件中未设置 title。

new htmlWebpackPlugin({
    title: "testooo", // html 文件的标题
    filename: "detail.html", // 生成 html 文件的文件名。默认为 index.html.
    template: `./src/detail.html`, // 根据自己的指定的模板文件来生成特定的 html 文件
    chunks: ["index", "vendor"], // 主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。默认引用所有
    inject: "body",  // true默认值，script标签位于html文件的 body 底部 注入选项 
    hash: true, //  hash选项的作用是 给生成的 js 文件一个独特的 hash 值 xx.js?xxxxxx
    // 对 html 文件进行压缩
    minify: {
      removeAttributeQuotes:true,
      removeComments: true,
      collapseWhitespace: true,
      removeScriptTypeAttributes:true,
      removeStyleLinkTypeAttributes:true
   }
})

mini-css-extract-plugin

分离css: 此插件将CSS提取到多带带的文件中。

它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMaps的按需加载。

extract-text-webpack-plugin ，只支持 webpack 4 以下提取 CSS 文件, webpack 4以上用mini-css-extract-plugin

terser-webpack-plugin(webpack4内置)

webpack 4 中删除了 webpack.optimize.CommonsChunkPlugin,并且使用 optimization 中的splitChunk来替代,下面的配置代替了之前的 CommonsChunkPlugin 配置，同意能提取 JS 和 CSS 文件

压缩的配置也移动到了 optimization 选项下，值得注意的是压缩工具换成了 terser-webpack-plugin，这是 webpack 官方也推荐使用的

module.exports = {
    optimization: {
        splitChunks: {
          vendors: {
            name:  "venders",
            chunks:  "all",
            minChunks: chunks.length
        }
      }
}

optimize-css-assets-webpack-plugin

webpack5很可能会内置css压缩,为了压缩输出，可使用optimize-css-assets-webpack-plugin插件。

默认只压缩js，所以通过设置optimization.minimizer覆盖默认的压缩配置，应确保指定了一个JS的压缩配置, 否则默认配置就被覆盖了，就不再压缩js了。

类似extract-text-webpack-plugin，通过optimization.splitChunks.cacheGroups可以将css提取到一个文件中。

module.exports = {
    minimizer: [
      new terserPlugin({ // 压缩js
        cache:  true,
        parallel:  true
      }),
      new optimizeCSSAssetsPlugin({ // 压缩css
        cssProcessorOptions: {
          safe: true
        }
      })
    ],
    optimization: {
        cacheGroups: {
            styles: {            
              name: "styles",
              test: /.scss|css$/,
              chunks: "all",    // merge all the css chunk to one file
              enforce: true
            }
          }
      }
}

webpack-bundle-analyzer

通过使用webpack-bundle-analyzer可以看到项目各模块的大小，可以按需优化

图片来自于webpack-bundle-analyzer的github

GPU云服务器云服务器云服务器多人独之使用 webpack4 webpack4教程 plugins

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101401.html

webpack4搭建Vue开发环境笔记~~持续更新

摘要：项目地址一知识获取当前文件所在路径，等同于把一个路径或路径片段的序列解析为一个绝对路径给定的路径的序列是从右往左被处理的，后面每个被依次解析，直到构造完成一个绝对路径如果处理完全部给定的片段后还未生成一个绝对路径，则当前工作目录会被用上生成项目git地址一、node知识 __dirname: 获取当前文件所在路径，等同于path.dirname(__filename) consol...

hankkin 2019-08-23 13:01 评论0 收藏0
webpack4配置详解之逐行分析

摘要：今天就尝试着一起来聊聊吧，旨在帮大家加深理解新手更容易上路，都能从到搭建配置自定属于自己的脚手架，或对已封装好的脚手架有进一步的巩固，接下来苏南会详细讲解中的每一个配置字段的作用部分为新增。 showImg(https://segmentfault.com/img/bVbjmMV?w=1008&h=298); 前言　　经常会有群友问起webpack、react、redux、甚至cre...

dkzwm 2019-08-23 13:04 评论0 收藏0
webpack4配置之分享几个常用插件

摘要：去做想做的事，去爱值得的人去成为自己喜欢的模样，去让自己发光浑身充满力量，充实的日子最美好各位早安，这里是平头哥联盟，我是首席填坑官苏南，用心分享一起成长做有温度的攻城狮。 showImg(https://segmentfault.com/img/bVbjIcs?w=1008&h=298); 前言　　继上一次webpack的基础配置分享之后，本次将分享一些工作中项目常用的配置插件、也...

Jackwoo 2019-08-26 13:24 评论0 收藏0
webpack 基础与项目优化实践总结

摘要：前言本文基于，主要涉及基本概念基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行优化配置。同一文件中，修改某个影响其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行...

Scorpion 2019-08-23 18:15 评论0 收藏0
为什么我不推荐你使用vue-cli创建脚手架？

摘要：后来经过排查你会发现是由于目前还没有版本。可以使用该方式解决。这就是我为什么不推荐你使用创建脚手架的原因此文的受众是想要进阶中级的初级前端人员。最近在知乎看到一个问题，原问题如下：很奇怪，为什么现在能找到自己手动创建vue脚手架的文章非常少，而且大家似乎对webpack4的热情并不高，对于想基于vue2.0+webpack4搭建一个脚手架的我来说资料真是少得可怜。难道现在一般的做...

trigkit4 2019-08-22 16:09 评论0 收藏0