webpack4 常用插件

2019-03-04 本文已影响0人前端girl吖

html-webpack-plugin
自动生成html文件

 let HtmlWebpackPlugin = require('html-webpack-plugin');
 new HtmlWebpackPlugin({
    template: './src/index.html',    // 模板文件，不局限html后缀
    filename: 'index.html',  // 生成的html命名
    hash: true, //  会在打包好的bundle.js后加hash串
    chunks: [name]   // 指定输出页面需要引入的chunks
    // removeComments 移除HTML中的注释
    // collapseWhitespace 删除空白符与换行符，整个文件会压成一行
    // inlineSource 插入到html的css,js文件都要内联，既不是以link，script引入
    // inject 是否能注入内容到输入的页面去
  })

css - 提取
- mini-css-extract-plugin
  这个插件将css按模块化解压到单独的文件中，为每个包含css的js文件创键一个css文件。
  🎈: style-loader 是将css文件以行内样式style的标签写入打包后的html页面，mini-css-extract-plugin是直接link方式引入进去
- extract-text-webpack-plugin
  根据创键实例、或者配置多个入口chunk来的，比如配置了一个入口文件，最终所有的css都会提取在一个样式文件中；如果n个入口（即创键了n个实例），则会生成多个css文件
optimize-css-assets-webpack-plugin
压缩css,优化css结构，利于网页加载和渲染
uglifyjs-webpack-plugin
js 代码压缩
clean-webpack-plugin
编译输出文件前，删除旧文件，当利用文件hash值输出时，可以利用改插件删除原有文件（即每次打包时清空指定文件夹）
```
const CleanWebpackPlugin = require('clean-webpack-plugin')
new CleanWebpackPlugin (['dist']) // 清空dist文件夹
```
copy-webpack-plugin
拷贝单个文件或多个文件或整个目录,比如static文件夹拷贝
happypack
提升构建速度
由于运行在Node.js之上的webpack是单线程的，所以webpack需要处理的事情（构建过程中，需要使用loader对js,css,图片字体等做转换操作）要一件一件的做，我们需要webpack能同一时间处理多个任务，发挥多核CPU电脑的威力，HappyPack就能做到，把任务分解多个子进程去并发的执行，子进程处理完再把结果发给主进程。（由于JavaScript是单线程模型，只能多进程实现，无法多线程）
对各种loader的兼容列表
🎈补充：由于对mini-css-extract-plugin,url-loader,file-loader的支持度的问题，所以，不建议使用HappyPack。
webpack-dev-server 自动打包/热重载
webpack-dev-server 自动打包/热重载

📢ps: 插件是一个类所以命名的时候尽量都用大写开头

purifycss-webpack
打包编译时，可剔除页面和js中未被使用的css，这样在使用第三方的类库时，只加载被使用的类，大大减小css的体积
cache-loader
持久化缓存
虽然你能在webpack的配置里找到n种缓存设置，但我发现cache-loader可以替代其它选项，它会在你的项目中创建一个 .cache-loader的文件夹，里面存放缓存文件，因为是直接写入硬盘，所以第一次打包的时候会多消耗几秒

webpack4 常用插件

猜你喜欢

热点阅读