浅谈webpack构建工具配置和常用插件总结

1. 什么是Webpack

Webpack 是一个现代化 JavaScript 应用程序的静态模块打包器(module bundler)。Webpack 能够对模块进行打包处理，将多个模块打包成一个或多个打包文件，将应用程序的所有资源视为模块，把它们视为一个整体，并建立各个模块之间的依赖关系，最终生成最终的合并版本。

2. Webpack的配置及常用插件

2.1 Webpack的配置

Webpack有两种配置方法，分别是命令行方式和配置文件方式。

2.1.1 命令行方式

命令行方式在执行 webpack 命令时，加上配置参数。

例如:

webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader' --watch --progress

其中
- entry.js 为你项目的入口文件
- bundle.js 为输出文件的文件名
- module-bind 指定 Webpack 在遇到css文件时使用style-loader 和 css-loader
- watch 选项指定 Webpack 在代码发生变化时重新编译
- progress 选项指定 Webpack 输出编译进度

2.1.2 配置文件方式

使用开发者自定义的配置文件。

常规配置文件结构：

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件路径
  output: { // 输出文件配置
    path: path.resolve(__dirname, 'dist'), // 输出路径
    filename: 'bundle.js' // 输出文件名称
  },
  module: { // 模块loader配置
    rules: [
      {
        test: /\.css$/, // 匹配文件格式
        use: [
          'style-loader', // css-loader，用于转换 css 代码，style-loader 用于将 css 插入到 HTML 的 header 中
          'css-loader'
        ]
      }
    ]
  }
}

2.2 常用插件

2.2.1 html-webpack-plugin

html-webpack-plugin 是一个便于通过 webpack 生成 HTML 文件的插件，它会创建一个 html 文件，并把 webpack 打包生成的js文件自动插入到这个html文件中，还可以配置一些参数。

使用方法：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定html模板文件位置
      title: 'Webpack App' // 设置生成的HTML文件的标题
    })
  ]
};

2.2.2 clean-webpack-plugin

clean-webpack-plugin 是一个 webpack 插件，可以用来删除webpack打包输出目录的内容，保证每次输出的文件都是最新的。

使用方法：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin()
  ]
};

3. 示例

3.1 单页面应用配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

3.2 多页应用配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: "production",
  entry: {
    // page1入口文件
    page1: "./src/page1.js",
    // page2入口文件
    page2: "./src/page2.js"
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: 'page1.html',
      template: './src/page1.html',
      chunks: ['page1']
    }),
    new HtmlWebpackPlugin({
      filename: 'page2.html',
      template: './src/page2.html',
      chunks: ['page2']
    })
  ]
};

4. 总结

本文讲解了Webpack的概述，以及Webpack的配置项和常用插件，还附带了两个示例。掌握了这些知识点，相信可以帮助你掌握Webpack的使用方法，提高项目的构建效率。