#webpack2

[syakuis]

웹팩 설치 와 설정 : Webpack 2 install & setting 프론트엔드 개발시 사용되는 웹팩 2에 대한 자세히 알아본다. 워낙 유명한 개발 도구라 설명은 생략하고 사용하기 위한 설정에 대해 자세하게 다뤘다. 나는 리액..

#webpack #webpack2 #웹팩 #웹팩2

[nirajmchauhan]

React bundling for production using Webpack 2

A quick way to reduce your bundle.js file size is using minification. But that's not it, your react bundle contains the code which you have included, this also means that unused code & big size packages are used.

So first step is to analyze your bundle.js file. Webpack has a nice feature to export your bundle stats to a JSON file, and then just upload this file which will give you a nice graphical report.

In your project folder, run this command:,webpack --json > stats.json upload this JSON file to this website

The output will be something like this:

Now identify your unused, duplicate or replaceable dependencies and then let's minify it using Webpack2.

Webpack2 is more powerful and it has huge support for ES6, a complete feature list is available here

The configuration I am using for my webpack:

const path = require('path'); const output = path.resolve(__dirname, 'public'); const src = path.resolve(__dirname, 'app'); const clientConfig = { target: 'web', entry: `${src}/index.js`, output: { path: output, filename: 'js/bundle.js', }, resolve: { extensions: ['.js', '.jsx'] }, module: { rules: [ { test: /\.html$/, exclude: /node_modules/, use: 'html-loader', }, { test: /\.(js|jsx)$/, exclude: /node_modules/, use: [ 'babel-loader' ], } ] } }; module.exports = [clientConfig];

Now by running, webpack -p will generate a minified version of bundle.js.

Let's take this a step ahead by gzipping our bundled file. To enable gzipping we will require: compression-webpack-plugin

plugins: [ new CompressionPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: /\.js$|\.html$|\.css$/, threshold: 10240, minRatio: 0.8 }) ]

You can enable gzipping only for production by reading

-p

argument.

const path = require('path'); const CompressionPlugin = require('compression-webpack-plugin'); const PROD = process.argv.indexOf('-p') !== -1; const output = path.resolve(__dirname, 'public'); const src = path.resolve(__dirname, 'app'); const clientConfig = { target: 'web', entry: `${src}/index.js`, output: { path: output, filename: 'js/bundle.js', }, resolve: { extensions: ['.js', '.jsx'] }, module: { rules: [ { test: /\.html$/, exclude: /node_modules/, use: 'html-loader', }, { test: /\.(js|jsx)$/, exclude: /node_modules/, use: [ 'babel-loader' ], } ] }, plugins: PROD ? [ new CompressionPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: /\.js$|\.html$|\.css$/, threshold: 10240, minRatio: 0.8 }) ] : [] }; module.exports = [clientConfig];