webpack配置多个入口文件和多个输出

1. 多个入口，多个出口的添加

//config.js
const glob = require('glob')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const getEntrys = function(entryPattern){
  let entrys = []
  let entry = {}
  glob.sync(entryPattern).forEach((path) => {
    let length = path.split('/').length - 1
    path = path.split('/')[length].split('.')[0]
    entry[path] = `./src/pages/${path}/${path}.js`
  })
  return entry
}

const getOutHtmls = function(entryPattern){
  let outHtmls = []
  glob.sync(entryPattern).forEach((path) => {
    let length = path.split('/').length - 1
    let filename = path.split('/')[length]
    let template = path
    pageName = path.split('/')[length].split('.')[0]
    outHtmls.push(new HtmlWebpackPlugin({
      filename,
      template,
      inject:true,
      chunks: [pageName, 'common'],
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      // chunksSortMode: 'dependency'
    }))
  })
  return outHtmls
}

module.exports = {
  getEntrys,
  getOutHtmls
}

2. webpack基础的配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const ManifestWebpackPlugin = require('webpack-manifest-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const webpack = require('webpack')
const multipe = require('./config/config.js')
const getEntrys = multipe.getEntrys
const getOutHtmls = multipe.getOutHtmls
//根据具体目录结构来确定路径
const entryPattern = './src/pages/**.html';

module.exports = {
  entry:getEntrys(entryPattern),
  output: {
    filename: '[name]/js/[name].[hash].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.js', '.json'],
    alias: {
      '@': path.resolve(__dirname, './src'),
      'config':path.resolve(__dirname, './config'),
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use:['babel-loader'],
        exclude: "/node_modules"
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader?importLoaders=1&&minimize","postcss-loader"]
        }),
        exclude:"/node_modules"
      },
      // LESS
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({ 
          fallback: 'style-loader', 
          use: ['css-loader?importLoaders=1&&minimize', 'postcss-loader', 'less-loader'] })
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        loader: 'file-loader',
        options:{
          limit:10000,
          name:'[name]/img/[name].[hash].[ext]'
        },
        exclude: "/node_modules"
      }
    ]
  },
  plugins: [
    new ManifestWebpackPlugin(),
    new CleanWebpackPlugin(['dist']),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common' // 指定公共 bundle 的名称。
    }),
    new ExtractTextPlugin({
      filename:"[name]/css/[name].[contenthash].css",
      allChunks:true
    }),
    ...getOutHtmls(entryPattern)
  ]
}

多个入口(html文件)，多个出口的配置demo