webpack插件类 | 大排档

插件类详解

webpack-dev-server - webpack自带服务

webpack自带的插件
- CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin - 提取公用部分
外部加载插件
- HotModuleReplacementPlugin() - 热替换
- html-webpack-plugin - 解析html模板
- UglifyjsWebpackPlugin - js压缩
- web-webpack-plugin - 与html-webpack-plugin类型国内人写的https://github.com/gwuhaolin/web-webpack-plugin/blob/master/readme_zh.md
- extract-text-webpack-plugin - 单独打包css文件
- open-browser-webpack-plugin - 资源构建成功后自动打开浏览器
- clean-webpack-plugin - 清除文件夹,添加hash后，会导致改变文件内容重新打包时文件名不同越来越多，使用clean-webpack-plugin
- babel-plugin-react-transform react-transform-hmr - react的热更新, 需要在配置bable.rc
- ExtractTextPlugin - 将js中引用的css文件抽取出一个单独的css文件
- webpack-merge - 合并数组、函数
- webpack-dev-middleware - devServer就是基于webpack-dev-middleware和ExpressJS来实现的
- imagemin-webpacl-plugin - 压缩图片
- webpack-spritesmith - 制作雪碧图
- HotModuleReplacementPlugin - devServer热更新

HotModuleReplacementPlugin() 热替换

webpac-dev-server支持模块热替换，在前端代码变动的时候无需整个刷新页面，只把变化的部分替换掉。使用HMR功能也有两种方式: 命令行方式和Node.js API。

1、script: {
“start”: “webpack –config webpack.config.js”,
“dev”: “webpack-dev-server –inline –hot”
}

2、webpack.config

entry: [
  'webpack/hot/dev-server',
  path.resolve(__dirname, 'src/index.js')
],
devServer: {
  hot: true       // 这里需要配置与HotModuleReplacementPlugin配合使用
},
plugins: [
  new webpack.HotModuleReplacementPlugin(),
]

注意，devServer开启不会自动编译，解决就在启动一个执行webpack的侦听

html-webpack-plugin

创建HTML文件，或将以有的HTML文件移动目录

$ npm i –save-dev html-webpack-plugin // 安装

const HtmlWebpackPlugin = require(‘html-webpack-plugin’); // 引用插件

option 选项

plugins: [
new HtmlWebpackPlugin({

  // 改变页面的<title>标签的内容 
  title: '首页',                   // 页面调用<%= htmlWebpackPlugin.options.title %|

  // 模版地址
  template: path.resolve(basePath, 'main.html'),

  // 构建后的文件名和目录
  filename: path.resolve(buildPath, 'main.html'),

  // chunks这个参数告诉插件要引用entry里面的哪几个入口
  chunks:['main'],

  // 不引用的模块
  excludeChunks: [],

  // 要把script插入标签里 head or body
  inject:'body',

  // 设置meta标签
  meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'},

  // 基础路径
  base: 'https://example.com/path',

  // js或css文件是否加时间缀
  hash: true,

  // 缓存
  cache: true,

  // xhtml
  xhtml: true, 

  minify: {
    collapseWhitespace: true,           // 去掉空格
    removeComments: true,               // 移除注释
    removeRedundantAttributes: true,    
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    useShortDoctype: true
  }
}),

open-browser-webpack-plugin

devServer下资源构建成功后自动打开浏览器 — 已可以在命令中配置

$ npm install open-browser-webpack-plugin –save-dev

var OpenBrowserPlugin = require(‘open-browser-webpack-plugin’);

plugin: [
new OpenBrowserPlugin({ url: ‘http://localhost:3000' })
]

也可以使用在package.json中加 –open

"scripts": {
  "start": "webpack-dev-server --hot --inline --open",
}

https://github.com/baldore/open-browser-webpack-plugin

CleanWebpackPlugin

用于删除目录、文件

$ npm install –save-dev clean-webpack-plugi

const CleanWebpackPlugin = require(‘clean-webpack-plugin’);

plugins: [
new CleanWebpackPlugin(),
],

https://github.com/johnagan/clean-webpack-plugin

UglifyjsWebpackPlugin

压缩文件

$ npm i -D uglifyjs-webpack-plugin

const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’)
module.exports = {
plugins: [
new UglifyJsPlugin()
]
}

extract-text-webpack-plugin

单独打包css文件

$ npm i -D extract-text-webpack-plugin

clean-webpack-plugin 清除文件夹

$ npm install clean-webpack-plugin –save-dev

const CleanWebpackPlugin = require(‘clean-webpack-plugin’);
plugins: [
new CleanWebpackPlugin([‘dist’]),
new HtmlWebpackPlugin({
title: ‘Output Management’
})
]

react的热替换

$ npm install –save-dev babel-plugin-react-transform react-transform-hmr

.babelrc配置
{
“presets”: [“react”, “env”],
“env”: {
“development”: {
“plugins”: [[“react-transform”, {
“transforms”: [{
“transform”: “react-transform-hmr”,
“imports”: [“react”],
“locals”: [“module”]
}]
}]]
}
}
}

| https://zhuanlan.zhihu.com/p/43778591
| https://www.webpackjs.com/concepts/ 中文文档