常用的webpack插件总结-阿里云开发者社区

开发者社区> 武汉-卢杨冰> 正文

常用的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   //使用多进程并行运行来提高构建速度
  })

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

相关文章
利用Weblogic的iisproxy、iisforward插件实现IIS转发
默认情况下,IIS只能提供http重定向功能,而无法满足转发需求。 举例:http://localhost/app1 利用http重定向到 http://www.abc.com/app1 访问 http://loalhost/app1/abc.html 最终浏览器地址栏里的url会变成http://www.abc.com/app1/abc.html 这就是重定向(类似jsp中的SendRedirect),如果浏览器地址栏不变,那才叫转发(类似jsp中的forward)。
767 0
响应式 Web 设计的 20 个有用的 jQuery 插件
响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的! 本文介绍 20 个 jQuery 插件适合进行响应式 Web 网站设计。
608 0
关于结构体占用空间大小总结(#pragma pack的使用)
关于C/C++中结构体变量占用内存大小的问题,之前一直以为把这个问题搞清楚了,今天看到一道题,发现之前的想法完全是错误的。这道题是这样的: 在32位机器上,下面的代码中 class A { public: int i; union U { ...
804 0
maven 常用插件
maven插件是用来完成构建任务的。用户可以通过两种方式调用Maven插件。 第一种方式是将插件与生命周期绑定,如命令mvn compile就实现了maven-compiler-plugin的调用目标。 第二种方式是直接在命令行指定要执行的插件,如mvn archetype:generate 就表示调用maven-archetype-plugin。1.maven-assembly-pl
1444 0
2
文章
0
问答
来源圈子
更多
阿里云GTS能力中心(浩鲸智能),从交付的视角探讨数字化转型过程中大型软件开发实践、以及阿里云产品在各行业被集成的案例分享、技术沉淀等内容。敬请关注!
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载