webpack第四部分：统一配置

在前面我们已经介绍完了webpack4的配置文件的基本配置，在这一部分我们就来介绍关于webpack的一些比较实用的使用技巧，比如项目之间的复用，同时我们也会介绍webpack4的新特性，比如extractTextPlugin的新特性。


## 正文

1. webpack的复用

webpack在web工程中的应用很广泛，当项目增多的时候，这种工程配置也会变得很多，我们难免会面临一些公共库的配置的问题，这有时候也会让我们觉得有点麻烦，webpack在实现上提供了对配置文件的复用，比如react项目。

通常我们都是依赖于create-react-app命令去创建一个react项目，其实就是通过npx来调用create-react-app来实现创建的，最神奇的地方就是create-react-app会自动帮你安装很多脚手架，这其中就包括了一个webpack的配置文件，在该配置文件中，就包含了对css和js的处理。

webpack对配置文件的复用有两种方式，分别是：

a. 配置文件导出的形式

module.exports = {
    // ...
}

我们可以通过这种方式来引入webpack的配置，以达到配置文件的复用的目的。

b. merge的方式

var webpackMerge = require('webpack-merge');
var commonConfig = {
    // ...
};
var prodConfig = {
    // ...
};
module.exports = webpackMerge(commonConfig, prodConfig);

在这种方式中，prodConfig的配置会覆盖commonConfig的配置，并且导出的也会是prodConfig的配置，这类似于java中的继承。

2. webpack4 新特性

a. webpack-cli

webpack4 中，webpack-cli独立出来了，用于在命令行执行构建过程。Webpack 3 及更低版本中使用 webpack 的 --config 选项指定配置文件，而在 webpack 4 中，--config 选项已从 webpack-cli 中移除。在构建脚本中可以使用 webpack --config 来配置 webpack 选项。

b. 提取提取CSS

使用extractTextPlugin在webpack3 中，要构建一个单独的CSS文件时，我们必须在不同的模式下，手动更改 webpack 配置。而在webpack 4 中，默认情况下就会提取CSS到一个单独的文件中。使用新的 mini-css-extract-plugin 插件，还能够将 CSS 抽取到一个单独的文件中。

const MiniCSSExtractPlugin = require('mini-css-extract-plugin');

const plugins = [
  new MiniCSSExtractPlugin({
    // 类似于 `./css/[name].css`
    filename: '[name].css',
  }),
];

c. Tree Shaking

Webpack 4 不仅会删除未使用的导出，还会删除导出的未使用部分。这可以进一步减少打包后的代码量。

d. Named Modules

Webpack 4 引入了 named modules，命名模块允许在编译后文件中引用命名空间，从而使出错的代码更具可读性。

e. Scope Hoisting

Webpack 4 使用了一种新的范围提升算法，来进一步优化模块的作用域，在大多数情况下，可以减少与导出无关的代码量。

3. extractTextPlugin 的新特性

a. 支持CSS modules

b. 支持PostCSS

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    plugins: (loader) => [
      require('autoprefixer')({
        browsers: [
          '>1%',
          'last 4 versions',
          'Firefox ESR',
          'not ie < 9', // React doesn't support IE8 anyway
        ],
      }),
    ],
  },
};

// ...

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCSSExtractPlugin.loader,
          'css-loader',
          postcssLoader,
        ],
      },
    ],
  },
};

c. 支持less

webpack4中extractTextPlugin支持less，我们只需要安装less和less-loader，并且在webpack的配置文件中进行如下配置即可：

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const less = require("less");

const extractLess = new ExtractTextPlugin({
  filename: '[name].[contenthash].css',
  disable: process.env.NODE_ENV === "development"
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: extractLess.extract({
          use: [{
            loader: "css-loader"
          }, {
            loader: "less-loader",
            options: {
              javascriptEnabled: true
            }
          }],
          // use style-loader in development
          fallback: "style-loader"
        })
      }
    ]
  },
  plugins: [
    extractLess
  ]
};

4. 总结

webpack4中有很多实用的新特性，我们学会这些新特性，将会使得我们的工作更加高效。webpack的配置在web工程中扮演着重要的角色，webpack的复用将会在很大的程度上，提升我们的工作效率，所以掌握webpack的复用也是一件非常重要的事情。在webpack4中，extractTextPlugin也有了许多非常实用的新特性，比如支持less、支持PostCSS，这些都将帮助我们开发出更加优质的web应用。