[測試] React JS

fredayeung

我用 webpack 2.2.0 , 當我寫左一個非常簡單的 code, generate 出來的 bundle.js 竟然是 1.85MB, 我裝左  babel-plugin-import, 用 ant design 唔知有無關係, 不過我 code 裡面無用 ant design, 都 1.85MB
有時間的 ching 唔該睇下我搞咩?

code 如下:

import React from 'react';
import {render} from 'react-dom';

class Main extends React.Component{

render() {
        return (
                         <div>
                          <h2>Primary</h2>
                          </div>
                          )
                    }
          }
render(<Main />, document.getElementById('apps'));

webpack.config.js

var  webpack = require("webpack");
var path = require("path");
var BUILD_DIR = path.resolve(__dirname, 'dist');
var APP_DIR = path.resolve(__dirname, 'src/app');


var config = {
        devtool: 'source-map',
  entry: APP_DIR+'/index.js',
  output: {
        path: BUILD_DIR,  
    filename: "bundle.js",
        publicPath: "/dist/",
  },
  plugins: [
   new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ],  
   
module: {
  rules: [
  {
        test: /\.jsx?/,
    include: APP_DIR,
         use: {
          loader: "babel-loader"
        }
                  
  },
  {
      test: /\.less$/,
      use: [
        {loader: "style-loader"},
        {loader: "css-loader"},
        {loader: "less-loader",
                 options: {
            javascriptEnabled: true
          }
         
        }
      ]
    },
               
]
},
externals:{
         'appConfig': process.env.NODE_ENV==="production"
         ?JSON.stringify(require('./configs/appConfigpro.json'))
         :JSON.stringify(require('./configs/appConfigdev.json'))
                 
}

};
module.exports=config;

fredayeung

回覆 1# fredayeung

重大發現: 之前我打 webpack -d     bundle.js size: 1.85MB
現在我打 webpack    bundle.js size:148KB