webpack.config vue多文件配置、环境变量配置

const resolve = require('path').resolve
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const url = require('url')
const publicPath = ''
// 环境变量设置
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'development'
console.log('运行环境：' + WEBPACK_ENV)

module.exports = {
    // mode: WEBPACK_ENV,
    entry: {
        vendor: './src/module/vendor',
        common: './src/module/common',
    },
    output: {
        globalObject: 'this',
        path: resolve(__dirname, 'dist'),
        filename: 'development' === WEBPACK_ENV ? 'assets/js/[name].js' : 'assets/js/[name].js?[chunkhash]',
        publicPath: 'development' === WEBPACK_ENV ? '/' : '${basePath}/' //'${pageContext.request.contextPath}/'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: ['vue-loader']
            },
            {
                test: /\.js$/,
                use: ['babel-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [/* MiniCssExtractPlugin.loader, */'style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 20000,
                        name: 'assets/image/[name].[hash:7].[ext]' //路径相对于publicPath指定的路径
                    }
                }]
            },
            {
                test: /\.worker.js$/,
                use: {
                    loader: 'worker-loader',
                    options: { inline: true, name: 'workerName.[hash].js' }
                }
            }
        ]
    },
    externals: {
        BMap: "BMap",
        BMapLib: 'BMapLib'
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                common: {
                    chunks: "initial",
                    minChunks: 2,
                    name: "common",
                    maxInitialRequests: 5, // The default limit is too small to showcase the effect
                    minSize: 0 // This is example is too small to create commons chunks
                },
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "initial",
                    name: "vendor",
                    priority: 10,
                    enforce: true
                }
            }
        },
        runtimeChunk: {
            name: 'manifest'
        },
    },
    plugins: [
        new webpack.DefinePlugin({
            DEPLOY_MODE: JSON.stringify(WEBPACK_ENV),
            APP_ROOT: JSON.stringify('development' === WEBPACK_ENV ? "http://localhost:8080" : "${basePath}"),
            'process.env': {
                VUE_APP_MAP_URL: JSON.stringify('development' === WEBPACK_ENV ? "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}" : "http://0.0.0.0:3333/v3/tile?z={z}&x={x}&y={y}")
            }
        }),

        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            jquery: "jquery",
            "window.jQuery": "jquery"
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        // 把css单独打包到文件里
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: 'css/[contenthash:12].css'  // use contenthash *
        }),
    ],
    resolve: {
        alias: {
            '~': resolve(__dirname, 'src'),
            vue: 'vue/dist/vue.js',
        },
        extensions: ['.js', '.vue', '.json', '.css']
    },
    devServer: {//参数配置查看https://github.com/chimurai/http-proxy-middleware
        host: '0.0.0.0',//前端访问只能使用: http://localhost:8080
        port: 8010,
        quiet: true,
        proxy: {
            '/ui': {//过滤后台应用路径ContextPath
                target: "http://localhost:8080",
                pathRewrite: {
                    '^/ui': ''
                }
            },
            '/': {//代理除前面配置路径以外的所有路径192.168.1.166
                target: 'http://192.168.1.166:8080/IntegratedBis',
                cookiePathRewrite: "/",//设置为根路径,cookie可透传
                onProxyReq(proxyReq, req) {
                    console.log("前端请求:", req.path, req.headers)
                    console.log("代理路径:", proxyReq.path)
                },
                onProxyRes(proxyRes, req, res) {
                    console.log("代理响应:", req.path, proxyRes.headers)
                }
            }

        },
        historyApiFallback: {
            index: url.parse('development' === WEBPACK_ENV ? '/assets/' : publicPath).pathname
        }
    },
    devtool: 'development' === WEBPACK_ENV ? '#eval-source-map' : '#source-map'
}

//开发环境下添加热更新（根据运行环境判断，开发环境时使用，生产环境则去掉，生产环境需要使用chunkhash）
if ('development' === WEBPACK_ENV) {
    module.exports.plugins.push(new webpack.HotModuleReplacementPlugin())
}

// 多页应用页面数组配置
const htmlArray = [
    { id: 'index', htmlSourcePath: 'src/module/index/index.html', htmlDestPath: 'view/index/' },
    { id: 'mainpage', htmlSourcePath: 'src/module/main/mainpage.html', htmlDestPath: 'view/main/' },
    { id: 'mainshortcut', htmlSourcePath: 'src/module/main/mainshortcut.html', htmlDestPath: 'view/main/' },
]
//entry和HtmlWebpackPlugin动态生成
htmlArray.forEach((element) => {
    //HtmlWebpackPlugin配置
    const chunksArray = ['manifest', 'vendor', 'common', element.id]//页面引用的多个js数组，数组内容为entry的属性名
    const htmlWebpackPlugin = new HtmlWebpackPlugin({
        filename: element.htmlDestPath + element.id + ('development' === WEBPACK_ENV ? '.html' : '.html'), // 生成出来的文件和路径，前面会加上output的path
        template: element.htmlSourcePath,   // 获取最初的html模版
        inject: 'body',                     // 插入文件的位置
        hash: true,                         // 在生成的文件后面增加一个hash，防止缓存

        title: 'xxxx',
        favicon: 'src/assets/image/favicon.png',
        mapUrl: "${map_url}", //百度地图配置
        chunks: chunksArray,
        chunksSortMode: 'none'
    })
    module.exports.plugins.push(htmlWebpackPlugin)

    /* 添加entry配置 */
    let jsSourcePath = './' + element.htmlSourcePath.replace('.html', '.js')
    module.exports.entry[element.id] = jsSourcePath
})