webpack3多入口配置详解

前言：

目前的单页模式在SEO，代码模块的分割上有所限制(笔者遇到的问题是因为不同业务的代码模块希望分开处理，代码不需要融合在一起，但需要代码归置到一个地方方便管理)，故多页面多入口的需求就产生了

=========================================分割线

多页面多入口的改造主要体现在三个方面：

1.模板文件的生成，即打包后需要插入的Html模板文件，通过htmlWebpackPlugins实现

2.多入口js的编译，主要是对entry的改造

3.对于启动多页面时wepack-dev-server的改造

传统的单页打包模式，主要是经历如下的过程：webpack找到入口entry文件，一般为main.js，通过各种loader加载编译，再通过htmlWebpackPlugins将编译过后的js，css文件插入到html对应的位置，最终，wepack-dev-server帮我们本地起一个node服务器，打开页面。

对于多页面多入口的改造，主要体现在，入口js的多个，分别插入与之对应的html文件。

首先我们约定所有入口文件的名字都为main.js，此处需要用到一个glob插件(node的glob模块允许你使用 *等符号, 来写一个glob规则,像在shell里一样,获取匹配对应规则的文件。)来匹配所有文件夹下的main.js。

根据我们活动的main.js的数组来生成对应的htmlWebpackPlugins对象，插入生成的html文件名为每个文件夹的名称，使用的html模板也是文件名的index.html(此处需作这样的约定)。

const entryFiles = glob.sync(path.join(__dirname, '../src/*/main.js'))
const setMPA = () => {
  const entry = {}
  const htmlWebpackPlugins = []
  Object.keys(entryFiles).map((index) => {
    const entryFile = entryFiles[index];
    const match = entryFile.match(/src\/(.*)\/main\.js/)
    const pageName = match && match[1]
    entry[pageName] = entryFile;
    htmlWebpackPlugins.push(
      new HtmlWebpackPlugin({
        filename: `${pageName}.html`,
        template: path.join(__dirname, `../src/${pageName}/index.html`),
        chunks: ['manifest', 'vendor', pageName], //  html所使用的chunk
        inject: true
      }),
    )
  })
  return {
    entry,
    htmlWebpackPlugins
  }
}
const { entry, htmlWebpackPlugins } = setMPA()

生成对应的入口文件和html之后只需修改：

1.webpack.base.conf.js(如果项目没有此文件，请修改对应的入口处)

module.exports = {

context: path.resolve(__dirname, '../'),

// entry: {

// app: './src/main.js'

// },    ===>entry
}

2.载入插件：webpack.dev.conf.js和webpack.prod.conf.js

const devWebpackConfig = merge(baseWebpackConfig, {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(),
  ].concat(htmlWebpackPlugins)   //合并插件
})

此时已经完成了入口和多入口文件的改造。

最后只需修改package.json文件里的：

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open-page xx.html"

即可设置打开的默认页面