webpack html自动引入公共模块

Question

我在使用 webpack 配置多页面应用的时候，遇到一个问题

common_b.png

比如存在三个页面 Pa,Pb,Pc，然后 Pa 的 index.js 和 Pb 的 index.js 中都引入了 common 模块 b，通过 entry 和 htmlWebpackPlugin，能将页面相应的 index.js 自动打包到 html 中，而公共模块 b，却不可以。

想请问一下 webpack 能否自动将公共 chunk 也引入到相应的页面中，比如 Pa|Pb 引入 common_b，而 Pc 则不引入，我看了一下htmlWebpackPlugin 的 chunks 是手动加的，不能自动识别出使用了某个模块么？

Answer 1

对于你的个性化需求，你也可以自行编辑一个方法来控制你的页面依赖需求
下面是我之前自己写的一个demo
你可以根据自己要求改一下
之后如果有什么页面依赖需求，只需要改 data.js 就可以了

data.js

const data = [
  {
    title: '访问目录',
    name: 'index',
    type: 'h5',
    template: 'react_h5.html',
    language: 'react'
  },
  {
    title: 'Hello World',
    name: 'helloworld-react',
    type: 'h5',
    template: 'react_h5.html',
    language: 'react'
  }
];

module.exports = data;

entry.js

const data = require('./data');
const path = require('path');
let entry = {};
data.forEach(item => {
  const _path = path.resolve(__dirname, '../src/pages/' + item.name + '/index.js');
  entry[item.name] = item.type === 'h5' && item.language === 'react' ? ['babel-polyfill', _path] : _path;
});

module.exports = entry;

htmlPlugin.js

const data = require('./data');
const HTMLPlugin = require('html-webpack-plugin');
const path = require('path');
const htmlPlugin = data.map(item => new HTMLPlugin(
  { 
    favicon: 'favicon.ico',
    template: path.resolve(__dirname, '../template/' + item.template),
    filename: item.name + '.html',
    title: item.title,
    minify: {
      removeComments: true,
      collapseWhitespace: false,
      removeAttributeQuotes: true 
    },
    chunks: [item.name]
  }
));
module.exports = htmlPlugin;

webpack.config.js

const htmlPlugin = require('./htmlPlugin');
const entry = require('./entry');
module.exports = {
  entry: entry,
  plugins: [
    ...htmlPlugin
  ]
};