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
}

通常配置選項就是上面這些，