Recently, the most talked about front end is so-and-so 2.0 release, as a front end dog that is excited and feel helpless pain. However, Webpack is no exception. When a new version of something is released, the documentation has to keep up with everything. However, there is not much information at the moment, officially speaking, webpack1 and 2 are not much different in usage. Well, let’s do something about webpack2.

The original address: http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/

Install Webpack 2

The first step, of course, is to install the latest version of webpack2, but since it hasn’t been officially released yet, let’s specify one.

NPM install - save - dev [email protected]Copy the code

If you are using other WebPack plug-ins (which is a pretty redundant assumption), you will probably need to upgrade to 2.0.

The extract-text-webpack-plugin, for example, is also on its way to 2.0

NPM install - save - dev [email protected]Copy the code

Module. loaders can still be used, but it may be removed in the future, so it is best to use module.rules instead in 2.0 configuration.

// before modules: { loaders: {... } } // after modules: { rules: {... }}Copy the code

resolve.modulesDirectories => resolve.modules

The Resolve configuration has also changed.

// before resolve: { modulesDirectories: [...] , } // after resolve: { modules: [...] ,}Copy the code

No webpack.optimize.OccurenceOrderPlugin

Webpack. Optimize. OccurenceOrderPlugin this plugin. If you have studied webpack optimization friend should be very clear its role, so in 2.0, as the default function, without having to manually added to the configuration.

Postcss and postCSS-loader are commonly used in projects to load and process our CSS. In 1.0, it was necessary to configure it individually in the outermost layer of the WebPack configuration, which is no longer allowed in 2.0. Instead, in 2.0 it is possible to configure each loader individually, but only in the corresponding rule-use. That is, plug-ins that needed to be configured in the outermost layer in 1.0 must be configured separately in the rule in 2.0.

// before, in Webpack top level
postcss: {
  plugins: ...
}
// after
module: {
  rules: [{
    test: /\.scss$/,
    use: [
      {
        loader: 'postcss-loader',
        options: {
          plugins: ...
        }
      },
      'sass-loader'
    ]
  }]
}Copy the code

The changes to the Loaders configuration mentioned above definitely make webPack configuration easier and clearer. Previously, it was often necessary to pass in multiple Loaders as parameters to configure some plug-ins, such as ExtractTextPlugin:

// Webpack 1 ExtractTextPlugin.extract( 'style-loader', 'css-loader! postcss-loader! sass-loader' );Copy the code

If there are more configurations, it is more troublesome and confusing.

1 2 3 4 5 // Webpack 1 ExtractTextPlugin.extract( 'style-loader', 'css-loader? modules-true! postcss-loader! sass-loader' );Copy the code

In 2.0 it is possible to replace this complex configuration by defining an array of loaders:

// Webpack 2
var loaders = [
  {
    loader: 'css-loader',
    options: {
      modules: true
    }
  },
  {
    loader: 'postcss-loader'
  },
  {
    loader: 'sass-loader'
  }
]
ExtractTextPlugin.extract({
  fallbackLoader: 'style-loader',
  loader: loaders,
})Copy the code

Stop Babel from compiling ES2015 modules

In 1.0, WebPack did not support the MODULES import method of ES2015, but it can be converted into the CommonJS injection specification via Babel. In 2.0, the native module import method of ES6 is also supported, and it can identify which code in the imported module is not being used. That said, if we use Babel, we should actively tell it not to convert ES6’s injection module method to CommonJS.

We can do this by changing the configuration of.babelrc:

// before
"presets": ["es2015"]
// after
"presets": [
  ["es2015", { "modules": false }]
]Copy the code

The last

Webpack2 has many improvements in performance, including improved resource packaging and optimized configuration methods. Although it has not been officially released yet, I hope you can use it in your project if you can.