ProvidePlugin
- 语法：
module.export = {
plugins: [
new webpack.ProvidePlugin({
$: ‘jquery‘,
jQuery: ‘jquery‘,
‘window.jQuery‘: ‘jquery‘,
‘window.$‘: ‘jquery‘,
}),
]
}
- 作用：
rovidePlugin的机制是：当webpack加载到某个js模块里，出现了未定义且名称符合（字符串完全匹配）配置中key的变量时，会自动require配置中value所指定的js模块
使用ProvidePlugin还有个好处，就是，你自己写的代码里，再！也！不！用！require！jQuery！啦！
延伸：
{
test: require.resolve(‘jquery‘), // 此loader配置项的目标是NPM中的jquery
loader: ‘expose?$!expose?jQuery‘, // 先把jQuery对象声明成为全局变量`jQuery`，再通过管道进一步又声明成为全局变量`$`
},
有了ProvidePlugin为嘛还需要expose-loader？
如果你所有的jQuery插件都是用webpack来加载的话，的确用ProvidePlugin就足够了；
不过总有那么些需求是只能用<script>来加载的
webpack.optimize.CommonsChunkPlugin
- 语法：
new webpack.optimize.CommonsChunkPlugin({
name: ‘commons/commons‘,
filename: ‘[name]/bundle.js‘,
minChunks: 4,
}),
- 作用：
抽取出所有通用的部分，参数：
- name: ‘commons/commons‘ ： 给这个包含公共代码的chunk命个名（唯一标识）
- chunks： 表示需要在哪些chunk（也可以理解为webpack配置中entry的每一项）里寻找公共代码进行打包。不设置此参数则默认提取范围为所有的chunk
- filename: ‘[name]/bundle.js‘ ：如何命名打包后生产的js文件，也是可以用上[name]、[hash]、[chunkhash]这些变量的, 例子就是‘commons/commons/bundle.js‘了 （最终生成文件的路径是根据webpack配置中的ouput.path和上面CommonsChunkPlugin的filename参数来拼的）
- minChunks: 4, ： 公共代码的判断标准：某个js模块被多少个chunk加载了才算是公共代码
ExtractTextPlugin
- 语法：
new ExtractTextPlugin(‘[name]/styles.css‘),
- 作用：
抽取出chunk的css ，
ExtractTextPlugin的初始化参数不多，唯一的必填项是filename参数，也就是如何来命名生成的CSS文件。跟webpack配置里的output.filename参数类似，这ExtractTextPlugin的filename参数也允许使用变量，包括[id]、[name]和[contenthash]；理论上来说如果只有一个chunk，那么不用这些变量，写死一个文件名也是可以的，但由于我们要做的是多页应用，必然存在多个chunk（至少每个entry都对应一个chunk啦）
在这里配置的[name]对应的是chunk的name，在webpack配置中把各个entry的name都按index/index、index/login这样的形式来设置了，那么最后css的路径就会像这样：build/index/index/styles.css，跟chunk的js文件放一块了（js文件的路径形如build/index/index/entry.js）
备注： 还要在css-loader , less-loader , postcss-loader 等关于样式的loader 配置里做相应的修改
{
test: /\.css$/,
include: /bootstrap/,
use: ExtractTextPlugin.extract([{
loader: ‘css-loader‘,
}]),
}
HtmlWebpackPlugin
- 语法：
var glob = require(‘glob‘);
var path = require(‘path‘);
var options = {
cwd: ‘./src/pages‘, // 在pages目录里找
sync: true, // 这里不能异步，只能同步
};
var globInstance = new glob.Glob(‘!(_)*/!(_)*‘, options); // 考虑到多个页面共用HTML等资源的情况，跳过以‘_‘开头的目录
var pageArr = globInstance.found; // 一个数组，形如[‘index/index‘, ‘index/login‘, ‘alert/index‘]
var configPlugins = [];
pageArr.forEach((page) => {
const htmlPlugin = new HtmlWebpackPlugin({
filename: `${page}/page.html`,
template: path.resolve(dirVars.pagesDir, `./${page}/html.js`),
// 意思是加载 page 下面的js , 和加载 commons/commons 目录下的js
chunks: [page, ‘commons/commons‘],
hash: true, // 为静态资源生成hash值
xhtml: true,
});
configPlugins.push(htmlPlugin);
});
- 作用：
生成html，参数：
- filename `${page}/page.html`, ： 生成的文件名字，多页面就会有多个 HtmlWebpackPlugin ，通常使用循环生成一个数组
- template ： path.resolve(dirVars.pagesDir, `./${page}/html.js`), 生成的html 基于的模板
- chunks ： [ page, ‘commons/commons‘] : 意思是加载 变量page 和 commons/commons 目录下的js
- hash： true ： 为静态资源生成hash值