这个webpack配置,怎么优化?

发布于 2022-09-12 00:49:51 字数 5368 浏览 17 评论 0

这份配置怎么优化才能速度快,文件小,安全高。?

var path = require('path');
var webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const UglifyJsPlugin=require('uglifyjs-webpack-plugin');

const ExtractTextPlugin = require("extract-text-webpack-plugin");
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    entry: {
        app: ["event-source-polyfill", "babel-polyfill", './src/main.js']
    },
    output: {
        path: path.resolve(__dirname, '../backend/static/dist'),
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': resolve('src'),
            'jquery-ui': 'jquery-ui/ui/widgets',
            'jquery-ui-css': 'jquery-ui/../../themes/base',
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        'scss': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader'
                        ],
                        'sass': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader?indentedSyntax'
                        ]
                    }
                }
            },

            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('./node_modules/vuescroll-copy/vuescroll.min.js')]
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ],
            },
            {
                test: /\.sass$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader?indentedSyntax'
                ]
            },

            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    esModule: false,
                    limit: 10000
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    esModule: false,
                    limit: 10000
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    esModule: false,
                    limit: 10000
                }
            }
        ]
    },
    devtool: '#eval-source-map',
    devServer: {
        historyApiFallback: true,
        overlay: true,

        proxy: {
            '/mock': {
                target: "http://localhost:3000",
                changeOrigin: true
            },

            '/%2Fuploads': {
                target: "http://localhost:3000",
                changeOrigin: true
            },
            '/uploads': {
                target: "http://localhost:3000",
                changeOrigin: true
            },
            '/saveWebPics': {
                target: "http://localhost:3000",
                changeOrigin: true
            }

        }
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.ProvidePlugin({
            tools: resolve('/src/assets/common.js'),
            $: "jquery",
            jQuery: "jquery"
        }),
        new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, '../backend/static/dist/index.html'),
            template: './src/index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'dependency'
        })



    ]
};

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = false;
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new ExtractTextPlugin("bundle.css")
    ])

    module.exports.optimization = {
        minimizer: [
            new TerserPlugin({
                cache: true, // 开启缓存
                parallel: true, // 支持多进程
                sourceMap: true, 
            }),

            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: false
                }
            })
        ]
    }

}

QQ截图20200125125551.png
QQ截图20200125125701.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文