webpack 中某些配置
webpack 每次配置后，过段时间不用就会遗忘，简单记录下最近用webpakc遇到的问题，重拾记忆。
1、入口文件
module.exports = { entry: 'a.js', // 单个入口文件 output: { path: '', publicPath: '', filename: '[name].js' } } module.exports = { entry: {
index:['a.js', 'b.js', 'c.js']
}, // 单个入口文件(将 a.js b.js c.js 文件合并成一个文件) output: { path: '', publicPath: '', filename: '[name].js' } } module.exports = { entry: { // 多入口文件 a:'a.js', b: ['b.js', 'c.js'], c:'c.js', }, output: { path: '', publicPath: '', filename: '[name].js' } }
2、输出多个文件，并且自动在 html 中引入相应的 js 文件
var HtmlWebpackPlugin = require('html-webpack-plugin'); var htmlTmp = { index: 'index', list: 'list', details: 'details' } module.exports= { plugins = [] } Object.keys(htmlTmp).forEach(name => { var plugin = new HtmlWebpackPlugin({ filename: name + '.html', // 生成的文件名 template: name + '.html', // 模板文件 chunks: [name], // 为每个页面只引入对应的 js 文件（一定要有的属性） chunksSortMode: "dependency" // 根据依赖顺序加载文件，否则会出现加载问题（一定要有的属性）
}); webpackConfig.plugins.push(plugin); }); // 结果： 如果入口文件分别是 index.js list.js details.js,则会将三个文件分别插入 index.html list.html details.html 中
3、如果把所有文件合成一个 js 文件，那么会有些公用的库，我们不需要每次改动一点点别的文件，就要重新加载一次库文件（因为版本戳变了呀），怎魔办？
拆分啊，用 commonsChunkPlugin 分割代码：
在理解CommonsChunkPlugin代码分割之前，我们需要熟悉webpack中chunk的概念，webpack将多个模块打包之后的代码集合称为chunk。根据不同webpack配置，chunk又有如下几种类型：
- Entry Chunk: 包含一系列模块代码，以及webpack的运行时(Runtime)代码，一个页面只能有一个Entry Chunk，并且需要先于Normal Chunk载入
- Normal Chunk: 只包含一系列模块代码，不包含运行时(Runtime)代码。
// 提取代码库
var webpack = require("webpack"); module.exports = { entry: { app: "./app.js", vendor: ["lodash","jquery"], }, output: { path: "release", filename: "[name].[chunkhash].js" }, plugins: [ new webpack.optimize.CommonsChunkPlugin({names: ["vendor"]}) ] };
// 上述配置将常用库打包到一个vender命名的Entry Chunk，并将以app.js为入口的业务代码打包到一个以business命名的Normal Chunk。其中Entry Chunk包含了webpack的运行时(Runtime)代码，所以在页面中必须先于业务代码加载。
// 提取共有代码
var webpack = require("webpack"); module.exports = { entry: { page1: "./page1.js", page2: "./page2.js" }, output: { filename: "[name].[chunkhash].js" }, plugins: [ new webpack.optimize.CommonsChunkPlugin("common.[chunkhash].js") ] }
// 上述配置将两个页面中通用的代码抽取出来并打包到以common命名的Entry Chunk，并将以page1.js和page2.js为入口代码分别打包到以page1和page2命名的Normal Chunk。
// 其中Entry Chunk包含了webpack的运行时(Runtime)代码，所以common.[chunkhash].js在两个页面中都必须在page1.[chunkhash].js和page2.[chunkhash].js前加载。
// --------------
// 在这种配置下，CommonsChunkPlugin的作用可以抽象：将多个入口中的公有代码和Runtime(运行时)抽取到父节点
// 将多个入口中的公有代码和Runtime(运行时)抽取到父节点
var webpack = require("webpack"); module.exports = { entry: { p1: "./page1", p2: "./page2", p3: "./page3", ap1: "./admin/page1", ap2: "./admin/page2" }, output: { filename: "[name].js" }, plugins: [ new webpack.optimize.CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]), new webpack.optimize.CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"]) ] };
// 每一次使用CommonsChunkPlugin都会将共有代码和runtime提取到父节点。上述例子中，通过两次CommonChunkPlugin的作用，runtime被提取到common.js中。
// 通过这种树型结构，我们可以清晰的看出每个页面对各个chunk的依赖顺序。
// --------------
// 问题：本意就是在只修改业务代码时，而不改动库代码时，打包出的库代码的chunkhash也发生变化，导致浏览器端的长缓存机制失效。
// 方案：提取 runtime （运行时）代码
var webpack = require("webpack");
module.exports = {
entry: {
app: "./app.js",
vendor: ["lodash","jquery"],
},
output: {
path: 'release',
filename: "[name].[chunkhash].js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({names: ['vendor','runtime']}),
]
};
// 这种情况下，当业务代码发送变化，而库代码没有改动时，vender的chunkhash不会变，这样才能最大化的利用浏览器的缓存机制
4、说说我遇到的问题，如果在 输出的 html文件中引入公共 js（如：生成的 a.html 只引入了 a.js，b.html 只引入了 b.js ，想把vendor.js 和 manifest.js 也分别引入到 a.html 和 b.html 中），如下：
Object.keys(htmlTmp).forEach(name => { var plugin = new HtmlWebpackPlugin({ filename: name + '.html', template: name + '.html', chunks: [name, 'vendor', 'manifest'], chunksSortMode: "dependency" }); webpackConfig.plugins.push(plugin); }); // 把 vendor.js 和 manifest.js 都引入生成的 html 中 // chunks: [name, 'vendor', 'manifest'], 把页面中需要的文件放进数组 // chunksSortMode: "dependency"， 按依赖顺序引入
