详解用webpack把我们的业务模块分开打包的方法

下面我将详细讲解如何使用webpack将业务模块分开打包的方法。

第一步：安装webpack以及相关的Loader和Plugin

首先需要全局安装webpack，使用以下命令：

npm install webpack -g

接着在项目目录下安装webpack以及相关的Loader和Plugin，使用以下命令：

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin babel-loader css-loader style-loader file-loader url-loader sass-loader node-sass extract-text-webpack-plugin --save-dev

• webpack：webpack本身
• webpack-cli：webpack的命令行工具，用于在命令行中执行webpack命令
• webpack-dev-server：开发服务器，提供了实时重载等功能
• html-webpack-plugin：生成HTML文件，并自动引入相关的打包后的文件
• clean-webpack-plugin：构建前清空输出文件夹
• babel-loader：转化ES6代码到ES5代码
• css-loader：加载css文件，并且解析css文件中的依赖关系
• style-loader：将css文件中的样式注入到html文件中
• file-loader：处理文件对象，可以处理任意二进制的文件，比如把字体文件或者图片文件转换成 require 引用的模块
• url-loader：和file-loader类似，不过可以将文件以base64编码，并且设置文件大小的上限
• sass-loader/node-sass：加载 Sass 文件并编译成 CSS
• extract-text-webpack-plugin：将 CSS 文件单独抽离成一个文件，而不是嵌入到 JavaScript 文件中

第二步：配置webpack.config.js文件

在项目的根目录下创建一个webpack.config.js文件，对webpack进行配置。以下是一个示例配置文件的内容：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

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

module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.scss$/,
                use: extractSass.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true
                            }
                        }
                    ],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[hash].[ext]',
                            outputPath: 'images/'
                        }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[hash].[ext]',
                            outputPath: 'fonts/'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Webpack Demo',
            template: './src/index.html'
        }),
        extractSass
    ]
};

• entry：入口文件，这里使用了一个对象来指定入口文件，其中key是chunk的名称，value是入口文件的路径
• output：输出文件，包括输出路径和文件名
• module：模块配置，包括各种loader的配置
• plugins：插件配置，包括生成HTML文件、清除输出文件夹、抽离CSS文件等

第三步：将业务模块进行分割

webpack提供了SplitChunksPlugin，可以将业务模块进行分割。我们只需要在webpack的配置文件中添加如下代码：

optimization: {
  splitChunks: {
    chunks: 'all'
  }
},

上面的代码会将业务模块和第三方库进行分割，从而提高打包速度，减少文件大小。

示例

以下是两个示例的说明：

示例1：将React和ReactDOM分开打包

在示例1中，我们将React和ReactDOM分开打包。具体的做法是先安装React和ReactDOM：

npm install react react-dom --save

接着在webpack.config.js中修改entry配置：

entry: {
  app: './src/index.js',
  vendor: ['react', 'react-dom']
}

将vendor作为第二个入口文件，然后在optimization中添加如下代码：

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
        name: 'vendor',
        chunks: 'all'
      }
    }
  }
},

其中test属性表示需要提取的第三方库的名称，name属性表示提取的第三方库的chunk名称。

示例2：将CSS文件分离出来

在示例2中，我们将CSS文件分离出来，避免样式嵌入到JavaScript文件中：

npm install extract-text-webpack-plugin css-loader style-loader --save-dev

然后在webpack.config.js中添加如下代码：

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

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

module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ],
          fallback: 'style-loader'
        })
      }
    ]
  },
  plugins: [
    extractSass
  ]
};

其中我们使用了extract-text-webpack-plugin插件来将CSS文件单独打包，不再与JavaScript文件混合在一起。