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

一、HtmlWebpackPlugin使用：

http://www.tuicool.com/articles/fq2qQrN

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.htmltemplate: 模版（填写相对路径，与配置文件的相对路径，例如：'./index.html'hash: 增加hash值，使每次生成的都是唯一的不重复的

二、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  ]};

三、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;

四、ProvidePlugin 提供识别码

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

基本用法：

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

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

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

基本用法：

const CleanWebpackPlugin = require('clean-webpack-plugin')// webpack config{  plugins: [    new CleanWebpackPlugin(paths [, {options}])  ]}

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

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

一般这一项我们都使用默认值，不去设置，只需要设置path就可以了！

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