Question

这是我的webpack.dev.config.js

"use strict";
let webpack = require('webpack');
let path = require('path');
// let HtmlWebpackPlugin = require('html-webpack-plugin');
// let ExtractTextPlugin = require("extract-text-webpack-plugin");
const WebpackBrowserPlugin = require('webpack-browser-plugin');

const vendors = ['react', 'react-dom', 'react-router'];
module.exports = {
    devtool: 'cheap-eval-source-map',
    devServer: {
        port: 3001,
        hot: true,
        hotOnly: true,
        inline: true,
        watchContentBase: true,
        watchOptions: {
            poll: true
        },
        contentBase: "./src",
        compress: true,
        historyApiFallback: true,
        clientLogLevel: "none",
        proxy: {
            '/sms-web/*': {
                target: 'http://localhost:9099',
                changeOrigin: true,
                secure: false
            }

        }
    },
    entry: {
        app: "./src/main.js", //
        vendors: vendors //第三方库
    }, //入口文件
    output: {
        path: path.join(__dirname, "src"),
        publicPath: "",
        filename: "[name].bundle.js"
    },
    resolve: {
        extensions: [".js", ".jsx", ".tsx", ".ts"] //resolve.extensions 用于指明程序自动补全识别哪些后缀,
    },
    module: {
        //各种加载器，即让各种文件格式可用require引用
        rules: [{
            test: /\.js|jsx$/,
            loader: "babel-loader",
            exclude: "/node_modules/",
            options: {
                presets: ['es2015', 'react']
            }
        }, {
            test: /\.css$/,
            exclude: "/node_modules/",
            // loader: ExtractTextPlugin.extract("css-loader")
            use: [
                { loader: "style-loader" },
                { loader: "css-loader" }
            ]

        }, {
            test: /\.less$/,
            use: [
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "less-loader" },
            ]
        }, {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: "url-loader",
            query: {
                limit: 10000
            }
        }]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new WebpackBrowserPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                screw_ie8: true,
                warnings: false
            },
            mangle: {
                screw_ie8: true
            },
            output: {
                comments: false,
                screw_ie8: true
            },
            except: ['$super', '$', 'exports', 'require'] //排除关键字
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vendors'],
            filename: "vendors.bundle.js",
            minChunks: Infinity
        }),
    ]
};

我使用npm start在webpack-dev-server开发中运行它，如下所示：

       "start": "webpack-dev-server --config webpack.config.dev.js"

但是，捆绑时

Version: webpack 2.3.3
Time: 17035ms
        Asset     Size  Chunks                    Chunk Names
app.bundle.js    90 kB       0  [emitted]         app
vendors.bundle.js  3.33 MB       1  [emitted]  [big]  vendors
chunk    {0} app.bundle.js (app) 33.5 kB {1} [initial] [rendered]

供应商是3.33M，只是在供应商中使用react，react-dom.react-router，我想知道它是正常的还是我应该做些什么来减少

Answer 1

如果您正在寻找一种方法来减少生产版本的捆绑包的大小，我建议您关闭源映射：虽然它们在开发过程中很有用，但它们会占用大量空间在捆绑内。

优化包大小的另一个有用的webpack功能是-p标志，可以进行额外的优化。

只有这两种做法，我能够将我的捆绑包的大小从大约8 MB减少到1.22 MB，用于React应用程序。

如何减少webpack包装尺寸

1 个答案: