개발 모드에서 webpack 번들을 줄이는 방법은 무엇입니까?

Question

나는 반응/redux 프로젝트에 대한 내 자신의 webpack 구성을 만들려고합니다.

"dependencies": { 
    "react": "15.4.2", 
    "react-dom": "15.4.2", 
    "react-hot-loader": "3.0.0-beta.6" 
    }, 
    "devDependencies": { 
    "babel-core": "6.24.0", 
    "babel-loader": "6.4.1", 
    "babel-preset-react": "6.23.0", 
    "commitizen": "2.9.6", 
    "cz-conventional-changelog": "2.0.0", 
    "html-webpack-plugin": "2.28.0", 
    "webpack": "2.3.1", 
    "webpack-bundle-analyzer": "^2.3.1", 
    "webpack-dev-server": "2.4.2" 
    } 

내 웹팩 구성의 모습처럼

내 package.json 보인다 (개발 모드에서, 내가 생산 모드로 감소하는 방법을 알고) 구성은 꽤 잘 작동하는 것 같다,하지만 번들 크기가 큰

const webpack = require('webpack'); 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

const project = require('./project.config') 

const __DEV__ = project.globals.__DEV__; 
const __PROD__ = project.globals.__PROD__; 
const __TEST__ = project.globals.__TEST__; 

const APP_ENTRIES = [project.paths.client('index.js')]; 

if (__DEV__) { 
    APP_ENTRIES.unshift(
    'react-hot-loader/patch', 
    `webpack-dev-server/client?http://${project.server_host}:${project.server_port}`, 
    'webpack/hot/only-dev-server' 
) 
} 

const config = { 
    devtool: project.compiler_devtool, 

    entry: APP_ENTRIES, 

    output: { 
    path: project.paths.dist(), 
    filename: `[name].[${project.compiler_hash_type}].js`, 
    publicPath: project.compiler_public_path, 
    }, 

    resolve: { 
    modules: [ 
     project.paths.client(), 
     'node_modules', 
    ], 
    }, 

    module: { 
    rules: [{ 
     test: /\.js?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
    }], 
    }, 

    plugins: [ 
    new BundleAnalyzerPlugin(), 
    new HtmlWebpackPlugin({ 
     template: project.paths.client('index.html'), 
     hash: false, 
     filename: 'index.html', 
     inject: 'body', 
    }), 
    ], 

    node: { 
    fs: 'empty', 
    net: 'empty', 
    tls: 'empty' 
    } 
} 

if (__DEV__) { 
    config.plugins.push(
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin()); 
} 

module.exports = config 

은 지금은 내가 실행할 때이 출력을 가지고 webpack-dev-server

내 번들이 1.3MB보다 크지 만 몇 가지 라이브러리 만 사용하고 있습니다.

webpack-bundle-analyser을 사용하면 왜 내 번들이 너무 큰지 알아 내려고했습니다. 여기 react 및 readct-dom 가장 큰 라이브러리 것 같다 결과

입니다.

내 번들의 크기를 줄이는 방법이 있습니까 개발 모드 ??? 내가 뭐 잘못 했어요 ?

추 신 : compress = true을 webpack-dev-server 옵션에 설정했지만 번들의 크기는 줄이지 ​​않았습니다. 여기

---

내가 webpack-dev-server

빈을 사용하는 방법에 대한 자세한 내용은//하는 index.js (이

const webpack = require('webpack'); 
const WebpackDevServer = require('webpack-dev-server'); 

const config = require('../config/webpack.config'); 
const project = require('../config/project.config'); 

function runDevServer() { 
    const devServer = new WebpackDevServer(webpack(config), { 
    compress: true, 
    hot: true, 
    publicPath: project.compiler_public_path, 
    stats: project.compiler_stats, 
    watchOptions: { 
     ignored: /node_modules/ 
    }, 
    }); 

    // Launch WebpackDevServer. 
    devServer.listen(project.server_port, project.server_host, (err) => { 
    if (err) { 
     console.log('Webpack dev server encountered an error', err); 
     return reject(err); 
    } 
    console.log(`Listening at ${project.server_host}:${project.server_port}`); 
    }); 
} 

runDevServer() 

SRC (나는 그것을 node bin/start.js를 사용하여 실행) start.js 내 Home은 "Hello world"를 반환하는 구성 요소 일뿐입니다)

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import { AppContainer } from 'react-hot-loader'; 

import Home from './routes'; 

const render =() => { 
    try { 
    ReactDOM.render(
     <AppContainer> 
     <Home /> 
     </AppContainer>, 
     document.getElementById('root') 
    ); 
    } catch (err) { 
    console.error(err) 
    } 
}; 

if (module.hot) { 
    module.hot.accept('./routes',() => render()); 
} 

render() 

최근 질문

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 관련 문제

• 관련 문제 없음^_^