Webpack how to create production code and how to use it

Question

I am very new to webpack, I found that in the assembly of products we can reduce the size of the general code. Currently webpack is about 8 MB files and main.js about 5 MB. How to reduce the code size in the assembly? I found a sample webpack configuration file from the Internet, and I configured it for my application, and I ran npm run build and started creating it, and it generated some files in the ./dist/ directory.

• However, these files are heavy (same as development version)
• How to use these files? I am currently using webpack-dev server to run the application.

package.json file

 { "name": "MyAPP", "version": "0.1.0", "description": "", "main": "src/server/server.js", "repository": { "type": "git", "url": "" }, "keywords": [ ], "author": "Iam", "license": "MIT", "homepage": "http://example.com", "scripts": { "test": "", "start": "babel-node src/server/bin/server", "build": "rimraf dist && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors" }, "dependencies": { "scripts" : "", ... }, "devDependencies": { "scripts" : "", ... } } 

webpack.config.js

 var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var public_dir = "src/frontend"; var ModernizrWebpackPlugin = require('modernizr-webpack-plugin'); module.exports = { devtool: 'eval-source-map', entry: [ 'webpack-hot-middleware/client?reload=true', path.join(__dirname, public_dir , 'main.js') ], output: { path: path.join(__dirname, '/dist/'), filename: '[name].js', publicPath: '/' }, plugins: [ plugins ], module: { loaders: [loaders] } }; 

webpack.production.config.js

 var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var public_dir = "src/frontend"; var ModernizrWebpackPlugin = require('modernizr-webpack-plugin'); console.log(path.join(__dirname, 'src/frontend' , 'index.html')); module.exports = { devtool: 'eval-source-map', entry: [ 'webpack-hot-middleware/client?reload=true', path.join(__dirname, 'src/frontend' , 'main.js') ], output: { path: path.join(__dirname, '/dist/'), filename: '[name].js', publicPath: '/' }, plugins: [plugins], resolve: { root: [path.resolve('./src/frontend/utils'), path.resolve('./src/frontend')], extensions: ['', '.js', '.css'] }, module: { loaders: [loaders] } }; 

Answer 1

After observing the number of viewers on this question, I decided to complete the answer from Vikramaditya and Sandeep.

To create production code, the first thing you need to create is a production configuration with optimization packages such as

  new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.AggressiveMergingPlugin() 

Then in the package.json file you can customize the build procedure using this production configuration

 "scripts": { "build": "NODE_ENV=production webpack -p --config ./webpack.production.config.js" }, 

now you need to run the following command to start the build

 npm run build 

According to my build assembly configuration, webpack will build the source in the ./dist directory.

Your user interface code will now be available in the ./dist/ directory. Install your server to submit this user interface code for the request. and you are done.!

Answer 2

You can add plugins as suggested by @Vikramaditya. Then generate the assembly. You must run the command

 webpack -p --config ./webpack.production.config.js 

-p tells webpack to generate a production assembly. You must modify the script construct in package.json to enable the create flag.

Answer 3

Use these plugins to optimize your build:

  new webpack.optimize.CommonsChunkPlugin('common'), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.AggressiveMergingPlugin() 

I recently learned about compression-webpack-plugin which gzips your output package to reduce its size. Add this to the list of plugins listed above to further optimize your production code.

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

Dynamic gzip compression on the server side is not recommended for serving static client files due to the high CPU utilization.

Answer 4

You can use the argv module npm (install it by running npm install argv --save ) to get the parameters in the webpack.config.js file, and for production you use the -p flag "build": "webpack -p" , you can add condition in webpack. config.js as below

 plugins: [ new webpack.DefinePlugin({ 'process.env':{ 'NODE_ENV': argv.p ? JSON.stringify('production') : JSON.stringify('development') } }) ] 

And here it is.

Answer 5

This will help you.

 plugins: [ new webpack.DefinePlugin({ 'process.env': { // This has effect on the react lib size 'NODE_ENV': JSON.stringify('production'), } }), new ExtractTextPlugin("bundle.css", {allChunks: false}), new webpack.optimize.AggressiveMergingPlugin(), new webpack.optimize.OccurrenceOrderPlugin(), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: true, compress: { warnings: false, // Suppress uglification warnings pure_getters: true, unsafe: true, unsafe_comps: true, screw_ie8: true }, output: { comments: false, }, exclude: [/\.min\.js$/gi] // skip pre-minified libs }), new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), //https://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack new CompressionPlugin({ asset: "[path].gz[query]", algorithm: "gzip", test: /\.js$|\.css$|\.html$/, threshold: 10240, minRatio: 0 }) ], 

Answer 6

In addition to GJ's answer PJ:

  new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.AggressiveMergingPlugin() 

from

 "scripts": { "build": "NODE_ENV=production webpack -p --config ./webpack.production.config.js" }, 

causes an attempt to double your code twice. See https://webpack.imtqy.com/docs/cli.html#production-shortcut-p for more details.

You can fix this by removing UglifyJsPlugin from the array of plugins or add OccurrenceOrderPlugin and remove the "-p" -flag. so one possible solution could be

  new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.OccurrenceOrderPlugin(), new webpack.optimize.AggressiveMergingPlugin() 

and

 "scripts": { "build": "NODE_ENV=production webpack --config ./webpack.production.config.js" }, 

Answer 7

If there is a lot of duplicate code in your webpack.dev.config and your webpack.prod.config file, you can use boolean isProd to activate certain functions only in certain situations and have only one webpack.config.js file.

 const isProd = (process.env.NODE_ENV === 'production'); if (isProd) { plugins.push(new AotPlugin({ "mainPath": "main.ts", "hostReplacementPaths": { "environments/index.ts": "environments/index.prod.ts" }, "exclude": [], "tsConfigPath": "src/tsconfig.app.json" })); plugins.push(new UglifyJsPlugin({ "mangle": { "screw_ie8": true }, "compress": { "screw_ie8": true, "warnings": false }, "sourceMap": false })); } 

By the way: DedupePlugin plugin has been removed from Webpack. You must remove it from your configuration.

UPDATE:

In addition to my previous answer:

If you want to hide your release code, try enclosejs.com . It allows you to:

• make a version of your application without sources
• create self-extracting archive or installer
• Make a closed source graphics application
• Put your assets in an executable file

You can install it with npm install -g enclose