可以增加一个用于多页面开发的模板吗？

[playniuniu]

对 webpack 不是很熟悉，但是希望能够进行多页面开发，能生成一个基于 webpack-simple 但是可以用于多页面开发的模板吗？

[posva]

Hi!

Please make sure to ask the question on the forums or the gitter chat.

As for your question, not sure about what you mean by multi-page app. The build process may vary depending on the backend. Make sure to add that information when asking for help on the forums or on the gitter chat.

[wengcd]

@playniuniu 试试这个 有些地方省略了。主要告诉它依赖关系就行了

example

client.html
admin.html

// build/webpack.base.conf.js
module.exports = {
  entry: {
    client: './src/client.js',
    admin: './src/admin.js'
  },
  ...
}

// build/webpack.dev.conf.js
{
  ...
  new HtmlWebpackPlugin({
    filename: 'client.html',
    template: 'client.html',
    chunks: ['client'],
    inject: true
  }),
  new HtmlWebpackPlugin({
    filename: 'admin.html',
    template: 'admin.html',
    chunks: ['admin'],
    inject: true
  }),
  ...
}

// build/webpack.prod.conf.js
{
  ...
  new HtmlWebpackPlugin({
      filename: config.build.client,
      template: 'client.html',
      chunks: ['client', 'client-vendor', 'client-manifest'],
      ....
    }),
    new HtmlWebpackPlugin({
      filename: config.build.admin,
      template: 'admin.html',
      chunks: ['admin', 'admin-vendor', 'admin-manifest']
      ...
    }),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'client-vendor',
      chunks: ['client'],
      ...
    }),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'admin-vendor',
      chunks: ['admin'],
      ...
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'client-manifest',
      chunks: ['client-vendor']
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'admin-manifest',
      chunks: ['admin-vendor']
    }),
  ...
}

// config/index.js
module.exports = {
  build: {
    env: require('./prod.env'),
    client: path.resolve(__dirname, '../dist/client.html'),
    admin: path.resolve(__dirname, '../dist/admin.html'),
    ...
  }
}

不过有个坏处，就是只修改了一个页面，build的时候会编译全部。所以所在的页面项目比较大的话可以在原有的配置上，拷贝出副本，然后修改下配置。再用命令比如npm run build:client的方式来处理