Most projects will be used in webpack tips

Original Address
This paper is a summary of webpack skills they are learning, and in the absence of special circumstances applicable to specified webpack 3.0 version.

Progress report

Use webpack --progress --colorsthis allows the compiler output content with the progress and colors.

compression

In a production environment when building the project, using

webpack -p

This code is automatically provided also in webpack 2

process.env.NODE_ENV === 'production'

The complex file package

By setting the output attribute is [name].jsto derive a plurality of packets. The following example will generate a.jsand b.js.

module.exports = {
  entry: {
    a: './a',
    b: './b'
  },
  output: { filename: '[name].js' }
}

Fear of repeat pack? Use CommonsChunkPlugin to the generic part into a new output file.

plugins: [ new webpack.optimize.CommonsChunkPlugin('init.js') ]

<script src='init.js'></script>
<script src='a.js'></script>

Separate app files with third-party libraries

Use CommonsChunkPlugin vendor.js to move the third party code.

var webpack = require('webpack')

module.exports = {
  entry: {
    app: './app.js',
    vendor: ['jquery', 'underscore', ...]
  },

  output: {
    filename: '[name].js'
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor')
  ]
}

Let's see, CommonsChunkPlugin how these work:

We specify a named vendor of the entrance, and it is loaded with jquery and other third-party libraries.
CommonsChunkPlugin these third-party libraries to identify duplication in app.js in, we put app.js third-party libraries are removed.
In vendor.js in, CommonsChunkPlugin also joined the run time of webpack.

Reference link: Code splitting

Resource Mapping (webpack 1)

The best resource mapping option cheap-module-eval-source-map. When using chrome / firefox developer tools, it will show the original resource file. On the other hand, it is more than source-mapand eval-source-mapfaster.

// 只在webpack 1中有效
const DEBUG = process.env.NODE_ENV !== 'production'

module.exports = {
  debug: DEBUG ? true : false,
  devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'
}

Your file is displayed as chrome developer tools webpack:///foo.js?a93h. If we want to show more clearly what the file name, for example webpack:///path/to/foo.js?

output: {
    devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
}

Reference links: DevTools Documentation

Resource Mapping (webpack 2-3)

In webpack 2-3 version, the best resource mapping option cheap-module-source-map, because cheap-module-eval-source- map strategy has been unable to show the correct path in chrome / firefox in.

const DEBUG = process.env.NODE_ENV !== 'production'

module.exports = {
  devtool: DEBUG ? 'cheap-module-source-map' : 'hidden-source-map'
}

If you are using the Extract-text-WebPACK-plugin , you can use 'source-map'an alternative, otherwise css resource mapping will not work.

// 只有当你使用extract-text-webpack-plugin时
module.exports = {
  devtool: DEBUG ? 'source-map' : 'hidden-source-map'
}

Likewise, you want webpack:///path/to/foo.jsthis clear path, we can write the following:

output: {
  devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
}

Reference links: DevTools Documentation

Output css file

This is a complex process, you can find the answer here . (Translator's Note: This guide is not a translation.)

Development model

You want some configuration exists only in the development environment it?

const DEBUG = process.env.NODE_ENV !== 'production'

// Webpack 1
module.exports = {
  debug: DEBUG ? true : false,
  devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'
}

// Webpack 2
module.exports = {
  devtool: DEBUG ? 'cheap-module-source-map' : 'hidden-source-map'
}

In webpack 1, when packaging your project resources, through env NODE_ENV=production webpack -pto call webpack command.
In webpack 2, as long as webpack -p on it, because webpack automatically help you set up NODE_ENV.

Size analysis package

You want to know what the resource package "heavyweight" dependent on it? Use webpack-bundle-size-analyzerit.

$ yarn global add webpack-bundle-size-analyzer

$ ./node_modules/.bin/webpack --json | webpack-bundle-size-analyzer
jquery: 260.93 KB (37.1%)
moment: 137.34 KB (19.5%)
parsleyjs: 87.88 KB (12.5%)
bootstrap-sass: 68.07 KB (9.68%)
...

If you are generating resource mapping, you can also use the source-map-explorer, it can work independently of the webpack.

$ yarn global add source-map-explorer

$ source-map-explorer bundle.min.js bundle.min.js.map

Reference links:
WebPACK-bundle-size-Analyzer
Source-the Map-Explorer

Smaller react projects

react default generate some development tools in a production environment and you do not need them. Use EnvironmentPlugin to let them humanely destroyed it. This will probably save space around 30kb.

plugins: [
  new webpack.EnvironmentPlugin({
    NODE_ENV: 'development'
  })
]

In webpack 1, use the env NODE_ENV=production webpack -pcommand to start webpack to package resources. While in webpack 2, as long as webpack -pyou can, a little reason.

Reference links: EnvironmentPlugin Documentation

Smaller Lodash

Lodash very useful, but we usually use only the function of drop in the ocean. lodash-webpack-plugin can be used NOOP , the Identity or other simpler options to replace the Feature sets , to help you reduce the space occupied by lodash.

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

const config = {
  plugins: [
    new LodashModuleReplacementPlugin({
      path: true,
      flattening: true
    })
  ]
};

This method can help you save at least 10kb. If your project lodash high proportion of resources that will save you even more.

The introduction of all the files in a folder

Have you ever tried the following code but found ineffective?

require('./behaviors/*')  /* 看似很正确 */

In fact, you should use require.context.

// http://stackoverflow.com/a/30652110/873870
function requireAll (r) { r.keys().forEach(r) }

requireAll(require.context('./behaviors/', true, /\.js$/))

Reference Links: require.context

Clear extract-text-webpack-plugin log

If you are using extract-text-webpack-plugin seen following debug log when:

Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules

You can use stats: { children: false }to turn it off:

/* webpack.config.js */
stats: {
  children: false,
},

Reference Link: Extract text-WebPACK-plugin-# 35

to sum up

These are the rstacruz 13 recommendations on webpack the summary, which is almost all projects with the resulting configuration tips Webpack it ~