Question

我正在学习webpack，并尝试使用Babel 7的Treeshaking将应用程序的捆绑包大小从2.14 MB减小到更少。

但是它将大小减小到几个字节。

即使我已经按照webpack文档的所有步骤进行操作，为什么会发生这种情况？这个应用程式的大小不算太小。

这是我的配置

.babelrc

{
  "presets": [["@babel/preset-env",{ "modules": false }], "@babel/preset-react"],
  "plugins": ["react-html-attrs", "@babel/plugin-proposal-class-properties","react-hot-loader/babel"]
}

Package.json

{
  "name": "ibism-frontend-2",
  "version": "1.0.0",
  "description": "",
  "main": "./src/app.js",
  "sideEffects": false,
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "webpack": "^4.16.1",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.2"
  },
  "dependencies": {
    "axios": "^0.16.1",
    "jwt-decode": "^2.2.0",
  }
}

Webpack.config.js

let debug = process.env.NODE_ENV !== "production";
let webpack = require('webpack');
let path = require('path');


let define = new webpack.DefinePlugin({
    "process.env": {
        NODE_ENV: JSON.stringify("production")
    }
});

let ignore = new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

const HtmlWebPackPlugin = require("html-webpack-plugin");


module.exports = {

    optimization:{
        usedExports:true,
    },


    devServer:{
       // inline: true,
        contentBase: path.resolve(__dirname, "dist"),
        historyApiFallback: true,
        // hot:true
        // port: 8081
    },

    watch: true,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000, //seems to stablise HMR file change detection
        ignored: /node_modules/
    },

    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/, // or u can also do this path.join(__dirname, 'src')
                include: path.resolve(__dirname, "src"),
                use:{
                    loader: 'babel-loader',
                },
            },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },

        ]
    },
    plugins: [

        ignore,
        new HtmlWebPackPlugin({
            template: "./src/index.ejs",
            filename: "./index.html",
            // hash:true
        }),

    ],
};

结果：

   Asset       Size  Chunks             Chunk Names
 main.js  951 bytes       0  [emitted]  main

./ index.html 2.05 KiB [发射]

摇树将捆绑包大小减小到字节

0 个答案: