插件可以完成更多 loader 不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 選項(xiàng)中指定劲够。
1. webpack內(nèi)建插件
// webpack should be in the node_modules directory, install if not.
var webpack = require("webpack");
//這個(gè)插件的作用是給輸出的文件頭部添加注釋信息靠粪。
module.exports = {
plugins: [
new webpack.BannerPlugin("This is ...")
]
};
2. 第三方插件
通過npm 發(fā)布的一些插件
首先安裝
npm install component-webpack-plugin
使用
var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
plugins: [
new ComponentPlugin()
]
}
建議：當(dāng)安裝第三方插件通過npm建議使用這個(gè)工具:https://www.npmjs.com/package/webpack-load-plugins
檢查所有安裝在你依賴中的第三方插件蜡吧。
3. 用過的一些插件的介紹
1.內(nèi)部插件 new webpack.DefinePlugin(definitions)
DefinePlugin允許您創(chuàng)建全局變量,可以在編譯時(shí)進(jìn)行配置。這對(duì)開發(fā)構(gòu)建和發(fā)布構(gòu)建非常有用占键。例如,您可能使用一個(gè)全局常數(shù)確定是執(zhí)行開發(fā)構(gòu)建還是發(fā)布構(gòu)建行為昔善，這種場(chǎng)景下DefinePlugin很便利。
var webpack = require("webpack");
module.exports = {
plugins:[
new webpack.DefinePlugin({
// 配置開發(fā)全局常量
env: development
})
]
}
**2.第三方插件copy-webpack-plugin
復(fù)制高度靜態(tài)資源畔乙，有時(shí)候一些資源是高度靜態(tài)資源不需要進(jìn)行打包君仆，直接復(fù)制到指定的文件目錄進(jìn)行引用。比如：一些本地庫。
安裝
npm install --save-dev copy-webpack-plugin
使用
var CopyWebpackPlugin = require('copy-webpack-plugin'),
module.exports = {
plugins:[
new CopyWebpackPlugin([
{
from:' ',
to:' ',
ignore: ['*.md']
} //主要參數(shù) from:從哪里復(fù)制 to:復(fù)制之后放到哪里 ,ignore:不復(fù)制的忽略
])
]
}
//如果不指定to ,則默認(rèn)放在output目錄下面返咱。
3.第三方插件html-webpack-plugin
這個(gè)插件可以幫助生成 HTML 文件氮帐，在 body 元素中，使用 script 來包含所有你的 webpack bundles洛姑，只需要在你的 webpack 配置文件中如下配置：
安裝
$ npm install html-webpack-plugin --save-dev
使用
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body',
title: 'webpack loader'
})]
};
詳解地址： https://www.npmjs.com/package/html-webpack-plugin
4. webpack-hot-middleware 熱替
安裝
npm install --save-dev webpack-hot-middleware
使用：
plugins: [
// OccurenceOrderPlugin is needed for webpack 1.x only
//熱替換時(shí)需要的三個(gè)內(nèi)置插件
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
詳解地址： https://github.com/glenjamin/webpack-hot-middleware
** 5.extract-text-webpack-plugin**
作用：webpack提取css片段到css文件的插件
詳解地址：https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/webpack-1/README.md
未完待續(xù)
