webpack打包多页面配置

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');   //用于生成html文件
    // import htmlWebpackPlugin from 'html-webpack-plugin.js'

    module.exports = {
        entry: {  //文件入口
            'demo': './src/main.js',
// 'demo_2' : './src/main_1.js',
            'a': './src/a.js',
            'b': './src/b.js',
        },
        output: {   //打包后的文件出口
            filename: 'js/[name]_[hash].bundle.js',   //打包后的文件的名字
            path: path.resolve(__dirname, 'dist'),    //打包后文件的存放位置
// publicPath : 'https://localhost:8080'
        },
        plugins: [   //打包成多个HTML文件   new HtmlWebpackPlugin()一下，就有一个HTML
            new HtmlWebpackPlugin({
                template: './index.html',   //HTML模板
                filename: 'a.html',   //打包生成的html名字 
                title: ' 我的网页',
                inject: 'body',  //打包后的js在哪引入   body：在body中引入   false： 不引入
                minify: {
                    removeComments: true,  //删除注释
                },
                excludeChunks: ['b']  //在生成的html引入不包括b外的所有js文件
            }),  //
            new HtmlWebpackPlugin({
                template: './index.html',
                filename: 'b.html',   //打包生成的html名字 
                title: ' 我的网页',
                inject: 'body',
                minify: {
                    removeComments: true,  //删除注释
                },
                chunks: ['b', 'a']  //在生成的html引入b，a的js文件
            })
        ],

        module: {
            rules: [
                {
                    test: /\.js$/,  //正则匹配js结尾的文件
                    loader: 'babel-loader',  //用babel处理js文件
                    exclude: /node_modules/,  //  不处理含有node_modules的文件
                    query: {
                        presets: ["latest"]   //给babel指定的插件
                    }
                },
                {  //webpack 处理css是从右往左，从下往上
                    test: /\.less$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                plugins: (loader) => [    //postcss-loader的插件
                                    require('postcss-import')({root: loader.resourcePath}),  //将css文件中的通过@import导入的css打包在一起
                                    // require('postcss-cssnext')(),
                                    require('autoprefixer')({   //自动添加浏览器前缀名
                                        browsers: ['last 5 versions']
                                    }),
                                    // require('cssnano')()
                                ]
                            }
                        },
                        'less-loader'
                    ]
                },
                {    //webpack 处理css是从右往左，从下往上
                    test: /\.css$/,
// loader :'style-loader!css-loader'
                    use: [
                        'style-loader',
                        'css-loader',
// 'postcss-loader'   //css的浏览器前缀  
                        {
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                plugins: (loader) => [    //postcss-loader的插件
                                    require('postcss-import')({root: loader.resourcePath}),  //将css文件中的通过@import导入的css打包在一起
                                    // require('postcss-cssnext')(),
                                    require('autoprefixer')({   //自动添加浏览器前缀名
                                        browsers: ['last 5 versions']
                                    }),
                                    // require('cssnano')()
                                ]
                            }
                        }
                    ]
                },
                {  //处理模块
                    test: /\.html$/,
                    use: 'html-loader'
                },
                {
                    test: /\.(jpg|png|gif)$/,
                    use: {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'img'
                        }
                    }
                }
            ]
        },

    }