webpack多页面打包笔记

依赖glob库
前提：统一放在src目录下，然后放功能名目录，最后放index.js
格式
entry: glob.sync(path.join(__dirname, './src/*/index.js))

 

webpack.config.js的内容

const path = require('path')

const glob = require('glob')

const HtmlWebapckPlugin = require('html-webpack-plugin')

const setMPA = () => {

const entry = {}

const htmlWebapckPlugins = []

const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'))

Object.keys(entryFiles)

.map(index => {

const entryFile = entryFiles[index]

const match = entryFile.match(/src\/(.*)\/index\.js/)

const pageName = match && match[1]

entry[pageName] = entryFile

htmlWebapckPlugins.push(

new HtmlWebapckPlugin({

template: path.join(__dirname, `src/${pageName}/index.html`),

filename: `${pageName}.html`,

chunks: `${pageName}`,

inject: true,

minify: {

html5: true,

collapseWhitespace: true,

preserveLineBreaks: false,

minnifyCSS: true,

minifyJS: true,

removeComments: false

}

})

)

})

return {

entry,

htmlWebapckPlugins

}

}

const {entry, htmlWebapckPlugins} = setMPA()

module.exports = {

entry: entry,

output: {

filename: '[name]_[chunkhash:8].js',

path: path.join(__dirname, 'dist')

},

mode: 'production',

plugins: htmlWebapckPlugins

}