const path = require('path') const webpack = require('webpack') // const CleanWebpackPlugin = require("clean-webpack-plugin") const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require("html-webpack-plugin") const glob = require('glob') const setMPA = () => { const entry = {} const htmklWebpackPlugins = []; const entryFiles = glob.sync(path.join(__dirname ,"./src/*/index.js")) // 匹配入口文件 console.log('entryFiles',entryFiles) Object.keys(entryFiles).map((index) => { const entryFile = entryFiles[index] const match = entryFile.match(/src\/(.*)\/index\.js/) const pageName = match && match[1] entry[pageName] = entryFile; // 设置entry htmklWebpackPlugins.push( // 设置html模版 new HtmlWebpackPlugin({ template: path.join(__dirname, `src/${pageName}/index.html`), filename: `${pageName}.html`, chunks: [pageName], inject: true, // 注入css/js minify: { // 模板格式设置 html5:true, collapseWhitespace: true , preserveLicenseComments: false , minifyJS: true , minifyCSS: true, removeComments: true, } }), ) }) return { entry, htmklWebpackPlugins , } } const {entry,htmklWebpackPlugins} = setMPA() module.exports = { entry, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, mode: 'development', // mode: 'production', watch: true , module: { rules:[ { test: /.js$/, use:'babel-loader' }, { test: /.less$/, use:[ 'style-loader', 'css-loader', 'less-loader' ] }, { test: /.(png|jpg|gif|jpeg)$/, use:[ { loader: 'url-loader', options: { limit: 10240 } } ] }, { test: /.(otf|ttf|woff|woff2|eot)$/, use:[ 'file-loader', ] } ] }, plugins:[ new webpack.HotModuleReplacementPlugin(), new CleanWebpackPlugin(), ].concat(htmklWebpackPlugins), devServer: { contentBase: path.join(__dirname ,"dist"), hot: true , }, devtool: 'cheap-source-map' }