webpack.config.build.js

var webpack = require('webpack');
// 用于生成HTML文件并自动注入依赖文件（link/script）的webpack插件
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var path = require('path');
var webpack = require('webpack');

module.exports = function (config) {
    let webpackConfig = {
        // devtool: 'eval',
        devServer: {
            disableHostCheck: true,
            host: '0.0.0.0',
            port: 8889
        },
        entry: {
            // babel: 'babel-polyfill',
            index: './main/index.js'
        },
        output: {
            // path: __dirname,
            path: path.resolve(config.buildPath),
            filename: './static/scripts/[name].[hash:7].bundle.js',
            // 没有指定输出名的文件输出的文件名格式
            chunkFilename: './static/scripts/[name].[chunkhash].js'
        },
        module: {
            rules: [
                // {
                //     test: /.js$/,
                //     loader: 'babel-loader',
                //     options: {
                //         presets: ['@babel/preset-env'],
                //         plugins: ['@babel/plugin-proposal-class-properties']
                //     }
                // },
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: 'vue-style-loader'
                        },
                        {
                            loader: 'css-loader'
                        }
                    ]
                },
                {
                    test: /\.less$/,
                    use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' }]
                },
                { test: /\.vue$/, loader: 'vue-loader' },
                {
                    test: /\.(png|jpe?g|gif)$/,
                    loader: 'url-loader',
                    options: {
                        limit: 5120,
                        name: 'static/images/[name].[hash:7].bundle.[ext]',
                        esModule: false
                    }
                },
                {
                    test: /\.(|eot|woff|woff2|ttf|svg)$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: './static/fonts/[name].[hash:7].bundle.[ext]',
                        esModule: false
                    }
                },
                {
                    test: /\.(xls|doc)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: './static/other/[name].[hash:7].bundle.[ext]',
                        esModule: false
                    }
                }
            ]
        },
        // 配置webpack插件
        plugins: [
            new HtmlWebpackPlugin({
                filename: './index.html',
                template: './main/index.html',
                // favicon: './main/favicon.ico',
                inject: true,
                title: '兔小乖字帖'
            }),
            new VueLoaderPlugin(),
            //拷贝文件
            // new CopyWebpackPlugin([
            //     {
            //         from: './src/content/other',
            //         to: './static/other',
            //         ignore: ['.*']
            //     }
            // ]),
            new webpack.DefinePlugin({
                // 定义环境和变量
                'process.env': {
                    NODE_ENV: JSON.stringify('production')
                }
            })
        ],
        optimization: {
            splitChunks: {
                cacheGroups: {
                    commons: {
                        name: 'commons',
                        chunks: 'initial',
                        minChunks: 2,
                        minSize: 0
                    },
                    vendor: {
                        test: /node_modules/,
                        chunks: 'initial',
                        name: 'vendor',
                        priority: 10,
                        enforce: true
                    }
                }
            },
            // // 表示只导出那些外部使用了的那些成员
            // usedExports: true,
            // // 压缩模块
            // minimize:true,
            // // 合并模块
            // concatenateModules:true,
            runtimeChunk: false
        },
        resolve: {
            // Vue v2.x 之后 NPM Package 预设会分出 runtime-only 版本，若要使用 standalone 功能则需下列设定s
            alias: {
                vue$: 'vue/dist/vue.js'
            }
        },
        mode: 'production'
    };
    return webpackConfig;
};