开发者社区> 武汉-卢杨冰> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

常用的webpack插件总结

简介: 关于常用的 webpack 插件,HotModuleReplacementPlugin,html-webpack-plugin,clean-webpack-plugin,extract-text-webpack-plugin,purifycss-webpack,optimize-css-assets-webpack-plugin, compression-webpack-plugin, UglifyJsPlugin总结
+关注继续查看

HotModuleReplacementPlugin

模块热更新插件,是webpack模块自带的,所以引入webpack后,在plugins配置项中直接使用即可。


plugins: [
  new webpack.HotModuleReplacementPlugin(), // 热更新插件
]

html-webpack-plugin

生成 html 文件。将 webpack 中entry配置的相关入口 chunk 和 extract-text-webpack-plugin抽取的 css 样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个 html 文件,具体插入方式是将样式link插入到head元素中,script插入到head或者body中。


plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: path.join(__dirname, '/index.html'),
    minify: {
      // 压缩HTML文件
      removeComments: true, // 移除HTML中的注释
      collapseWhitespace: true, // 删除空白符与换行符
      minifyCSS: true, // 压缩内联css
    },
    inject: true,
  }),
]

clean-webpack-plugin

用于在打包前清理上一次项目生成的 bundle 文件,它会根据 output.path 自动清理文件夹;这个插件在生产环境用的频率非常高,因为生产环境经常会通过 hash 生成很多 bundle 文件,如果不进行清理的话每次都会生成新的,导致文件夹非常庞大。


plugins: [
  new HtmlWebpackPlugin({
    template: path.join(__dirname, '/index.html'),
  }),
  new CleanWebpackPlugin(), // 所要清理的文件夹名称
]

extract-text-webpack-plugin

将 css 成生文件,而非内联 。该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中引起页面样式加载错乱的现象


plugins: [
  // 将css分离到/dist文件夹下的css文件夹中的index.css
  new ExtractTextPlugin('css/index.css'),
]

purifycss-webpack

有时候我们 css 写得多了或者重复了,这就造成了多余的代码,我们希望在生产环境进行去除。

const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件
const glob = require('glob') // 引入glob模块,用于扫描全部html文件中所引用的css

module.exports = merge(common, {
  plugins: [
    new PurifyCssWebpack({
      paths: glob.sync(path.join(__dirname, 'src/*.html')),
    }),
  ],
})

optimize-css-assets-webpack-plugin

我们希望减小 css 打包后的体积,可以用到 optimize-css-assets-webpack-plugin。


optimization: {
  minimizer: [
    // 压缩css
    new OptimizeCSSAssetsPlugin({})
  ]

compression-webpack-plugin

所有现代浏览器都支持 gzip 压缩,启用 gzip 压缩可大幅缩减传输资源大小,从而缩短资源下载时间,减少首次白屏时间,提升用户体验。

gzip 对基于文本格式文件的压缩效果最好(如:CSS、JavaScript 和 HTML),在压缩较大文件时往往可实现高达 70-90% 的压缩率,对已经压缩过的资源(如:图片)进行 gzip 压缩处理,效果很不好。


plugins: [
  new CompressionPlugin({
    // gzip压缩配置
    test: /\.js$|\.html$|\.css/, // 匹配文件名
    threshold: 10240, // 对超过10kb的数据进行压缩
    deleteOriginalAssets: false, // 是否删除原文件
  }),
]

UglifyJsPlugin

uglifyJsPlugin 是 vue-cli 默认使用的压缩代码方式,用来对 js 文件进行压缩,从而减小 js 文件的大小,加速 load 速度。它使用的是单线程压缩代码,打包时间较慢,所以可以在开发环境将其关闭,生产环境部署时再把它打开。


plugins: [
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        warnings: false
      }
    },
    sourceMap: true,  //是否启用文件缓存
    parallel: true   //使用多进程并行运行来提高构建速度
  })

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
webpack 插件应用
webpack 插件应用
0 0
需要了解的常用Webpack插件配置-loader加载器
我们都知道通过安装和配置第三方插件,可以使我们的webpack拓展更多的功能,虽然之后开发项目不需要我们自己去进行这些繁琐的配置,但是我们需要知道这些,在必要时我们可以去做出修改。 比如我们在初识webpack中提到的webpack-dev-server(每当我们修改了源代码,webpack就会自动的进行项目打包和构建)以及html-webpack-plugin(自定制index页面内容,将存在于内存中的页面克隆一份到项目根目录)。 不需要会-但是一定要知道的简单配置Webpack操作_Developer小蜗的博客-CSDN博客。
0 0
js:webpack插件BannerPlugin添加版权信息
js:webpack插件BannerPlugin添加版权信息
0 0
js: webpack插件的使用
js: webpack插件的使用
0 0
100行代码实现一个webpack组件统计插件
前言 大家好,我是Fly哥, 好久没写文章了。最近组长无意间提了个需求,如何统一项目中组件的引用的次数??? 听到这个立马来了兴趣, 心想着可以webpack 的 loader 去做, 当时脑子里的第一时间想法 是用这个去做的,后面从优化的角度的考虑还是开发了一个自定义plugin 目前已经发布到npm 上了 如图: 图片 image-20220319214923462 读完本篇文章你可以学到什么 如何开发一个webpack 插件 如何使用 rollup + ts 进行打包 发布一个属于自己的npm webpack Webpack 想必大家都很熟悉, 面试天天问, 你会webpack?
0 0
实用webpack插件之ProvidePlugin
现代化前端的全局引入是一个很有趣的东西。
0 0
实用webpack插件之DefinePlugin
通过阅读这篇文章,可以学习到如何使用DefinePlugin插件使得前端项目更加工程化,说清晰点就是如何使用这个插件,在编译阶段根据NODE_ENV自动切换配置文件,提升前端开发效率。
0 0
2022 年最流行的 Webpack 插件,你用上了吗
2022 年最流行的 Webpack 插件,你用上了吗
0 0
使你的webpack插件变得更加优秀
使你的webpack插件变得更加优秀
0 0
文章
问答
来源圈子
更多
阿里云GTS能力中心(浩鲸智能),从交付的视角探讨数字化转型过程中大型软件开发实践、以及阿里云产品在各行业被集成的案例分享、技术沉淀等内容。敬请关注!
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
基于webpack和npm的前端组件化实践
立即下载
互联网背景下汽车产业的创新和变革
立即下载
从Web到Cloud App
立即下载