@hyext/builder-zabin/scripts/vue/webpack.prod.js

builder of hyext

const path = require('path')
const chalk = require('chalk')
const commonCfgFactor = require('../common')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')
//使用path.posix统一路径
function assetsPath(_path) {
    return path.posix.join('static', _path)
}

module.exports = function({config, inputPath, outputPath, publicPath}) {
    function resolve(dir) {
        return path.resolve(inputPath, dir)
    }

    const commonCfg = commonCfgFactor({mode: 'production', config, inputPath, outputPath, publicPath})

    return {
        context: __dirname,
        mode: 'production',
        entry: commonCfg.entry,
        output: {
            path: outputPath,
            filename: assetsPath('js/[name].[chunkhash:10].js'),
            publicPath: publicPath
        },
        resolve: {
            extensions: ['.js','.vue', '.json'],
            modules: ["src", "node_modules"],
            alias: {
                '@': resolve('src'),
                'src': resolve('src'),
                'assets': resolve('src/assets'),
                'components': resolve('src/components')
            }
        },
        module: {
            rules: [{
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    cacheDirectory: true,
                    presets: [
                        ['@babel/preset-env', {
                            modules: false
                        }]
                    ],
                    plugins: [
                        "@babel/plugin-transform-runtime"
                    ]
                }
            }, {
                test: /\.vue$/,
                loader: 'vue-loader'
            }, {
                test: /\.(css|scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader", {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: (loader) => [
                                require('autoprefixer')({}),
                                require('postcss-import')({
                                    root: loader.resourcePath
                                })
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            implementation: require('sass'),
                            sassOptions: {
                                fiber: require('fibers')
                            }
                        }
                    }
                ]
            }, {
                test: /\.(png|jpe?g|gif|webp|svg)$/i,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: assetsPath('img/[name].[hash:10].[ext]')
                    }
                }]
            }, {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'file-loader',
                options: {
                    name: assetsPath('fonts/[name].[hash:10].[ext]')
                }
            }]
        },
        plugins: [
            new VueLoaderPlugin(),
            new OptimizeCSSAssetsPlugin({}),
            new MiniCssExtractPlugin({
                // Options similar to the same options in webpackOptions.output
                // both options are optional
                filename: assetsPath('css/[name].[contenthash:10].css')
                // chunkFilename: devMode ? assetsPath('[id].css') : assetsPath('css/[id].[chunkhash:10].css')
            }),
            ...commonCfg.plugins
        ],
        optimization: {
            removeAvailableModules: false,
            removeEmptyChunks: false,
            // runtimeChunk: {
            //     name: 'runtime'
            // },
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendors',
                        chunks: 'all'
                    }
                }
            }
        }
    }
}