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"， 按依赖顺序引入webpack 中某些配置
原文地址：https://www.cnblogs.com/lmy-ms/p/8179275.html