一、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值,使每次生成的都是唯一的不重复的
二、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 string
options 参数
{
root: __dirname,默认根目录,也就是你的package的路径(绝对路径)
verbose: true, 在控制台console日志
dry: false, 默认为false,删除所有的文件, 为true时,模拟删除,并不删除文件
watch: false, 默认false, 为true时删除所有的编译文件
exclude: [ 'files', 'to', 'ignore' ]
}
一般这一项我们都使用默认值,不去设置,只需要设置path就可以了!
总结,常用的就是这些了,后续还会在陆续的加入。。。其他相关插件!
再次跟新一个插件,也是业务需求,将公用代码块独立打包,(六)
六、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
}
一般配置选项就是上面这些,
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。