webpack-learing/webpack.dev.js

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'
}