react+webpack项目经常使用的插件(plugins)

1、HtmlWebpackPlugin使用：

npm install html-webpack-plugin --save-dev

解释：这个插件是简化建立生成html（h5）文件用的，若是你引入的文件带有hash值的话，这个尤其的有用，不须要手动去更改引入的文件名！

默认生成的是index.html,基本用法为：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

js经过script的标签引入到body中！
若是你使用了ExtractTextPlugin来提取css，将经过link在head中引入！

通常配置：

title: 用于生成的HTML文档的标题,也就是html，head中`<title>ceshi</title>`
filename: 生成的文件名，default index.html
template: 模版（填写相对路径，与配置文件的相对路径，例如：'./index.html'
hash: 增长hash值，使每次生成的都是惟一的不重复的

2、ExtractTextWebpackPlugin 分离咱们的样式文件，例如css,sass,less

npm install --save-dev extract-text-webpack-plugin

基本用法：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
     //输出在根目录上，也能够这样写css/styles.css
  ]
}

其中plugins中的参数配置有：（string/object） id: 插件实例的惟一标识，默认状况下是自动生成的，不建议设置
filename: 生成文件的名称，能够包含[name], [id] and [contenthash]
allChunks：(bollean) 从全部附加块中提取（默认状况下，它仅从初始块中提取）

rules里面的参数配置有：（loader | object) options.use :
{String}/{Array}/{Object} 使用的编译loader options.fallback :
{String}/{Array}/{Object} 当css没有被提取的时候,能够看成保守用 options.publicPath :
能够覆盖output里的publickPath

若是想生成多个css文件的话，能够这样写:

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractCSS = new ExtractTextPlugin('css/[name]-one.css');
const extractLESS = new ExtractTextPlugin('css/[name]-two.css');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      },
      {
        test: /\.less$/i,
        use: extractLESS.extract([ 'css-loader', 'less-loader' ])
      },
    ]
  },
  plugins: [
    extractCSS,  //两个实例
    extractLESS
  ]
};

3、DefinePlugin 定义变量

容许咱们建立可在编译时配置的全局常量，这对与须要灵活配置的项目而言很是的重要，举个例子：
开发中咱们须要devtool来查看redux树中stroe中的变量，可是生产环境中不须要，那么就能够这样定义：

const nodeEnv = process.env.NODE_ENV || 'development';
const isPro = nodeEnv === 'production';
new webpack.DefinePlugin({
    "__dev__": JSON.stringify(isPro) 
})

那么在开发环境中__dev__为false，
打包的时候能够在CLI中输入NODE_ENV=production 这样__dev__就为true;

4、ProvidePlugin 提供识别码

通俗点讲就是使用一些字符代替复杂的字符，例如我想用 $ 表明 jquery, 那么就可使用这个插件，或着我想用 'av' 表明 './ateon/values' 这个路径，也可使用这个插件。

基本用法：

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'av' : './ateon/values'
})

在模块中使用，import lives from 'av' === import lives from './ateon/values'

5、clean-webpack-plugin 清除你的build目录

基本用法：

const CleanWebpackPlugin = require('clean-webpack-plugin')

// webpack config
{
  plugins: [
    new CleanWebpackPlugin(paths [, {options}])
  ]
}

[, {options}]为可选参数
`path` An [array] of string
options 参数

{
root: __dirname,默认根目录，也就是你的package的路径（绝对路径）
verbose: true, 在控制台console日志
dry: false, 默认为false，删除全部的文件， 为true时，模拟删除，并不删除文件
watch: false, 默认false， 为true时删除全部的编译文件
exclude: [ 'files', 'to', 'ignore' ] 
}

通常这一项咱们都使用默认值，不去设置，只须要设置path就能够了！

总结，经常使用的就是这些了，后续还会在陆续的加入。。。其余相关插件！

再次跟新一个插件，也是业务需求，将公用代码块独立打包，（六）

6、CommonsChunkPlugin 公用模块独立打包

说到这个，能够说不少用webpack项目的都会使用到这一插件，能够提高些许编译的速度。直接上demo吧！首先假设是一个react-webpack项目，那必然每次新建js的时候都会

import React,{PropTypes} from 'react';
import {ReactDOM} from 'react-dom';

将react和reactdom独立打包到一个文件，配置以下：

entry: {
      index: ‘main.js’,
      vendor : ['react', 'react-dom']  
},
output: {
    chunkFilename:"[name].[hash:8].js", //用hash解决缓存的问题，
}


plugins： [
new CommonsChunkPlugin({ //对指定的chunks进行公共模块的提取 多个 html共用一个js文件(chunk)，可用CommonsChunkPlugin
        names: ['vendor', 'manifest'],
}),
]

这个names是一个数组，vendor对应的是entry上面的键值，必须一致，打包后就会在cli(命令行)中看到多一个vendor.js文件，若是启动文件必须先引入这个js才行，不然会报错！

那么这个manifest是为了解决vendor再次编译的问题，若是只是写了names:vendor，你能够仔细检查vendor后面的hash值的变化，在热更新的时候，每次更改js文件，都会从新编译，vendor也会从新编译(看看hash就知道了)，按理说应该是不会更改了，由于咱们就是用这个插件去解决公用代码库不用每次都打包，提高编译速度的！解决的方案就是加一个这个，目前我也在找缘由，找到了会及时过来更新的！

这个还有其余的参数配置，这里稍微解释一下参数的配置

{
name: string,//or   names: Array 对应entry上的键值
filename: string    生成文件的名字，若是没有默认为输出文件名
minChunks: number|Infinity  模块被引用的次数多少才会被独立打包>=2
chunks: 表示须要在哪些chunk（也能够理解为webpack配置中entry的每一项）里寻找公共代码进行打包。不设置此参数则默认提取范围为全部的chunk
}

通常配置选项就是上面这些，