一、webpack的安装

webpack的安装目前分为两个:webpack、webpack-cli
- npm install webpack webpack-cli-g
那么它们是什么关系呢？（cli为静态资源文件提供运行的环境）
- 执行webpack命令，会执行node_modules下的.bin目录下的webpack；
- webpack在执行时是依赖webpack-cli的，如果没有安装就会报错；
- 而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；
- 所以在安装webpack时，我们需要同时安装webpack-cli（第三方的脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西）

二、webpack的默认打包

我们可以通过webpack进行打包，之后运行打包之后的代码
- 在目录下直接执行 webpack 命令 webpack
生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包之后的文件
- 这个文件中的代码被压缩和丑化了；
- 另外我们发现代码中依然存在ES6的语法，比如箭头函数、const等，这是因为默认情况下webpack并不清楚我们打包后的文件是否需要转成ES5之前的语法，后续我们需要通过babel来进行转换和设置；
另外我们发现代码中依然存在ES6的语法，比如箭头函数、const等，这是因为默认情况下webpack并不清楚我们打包后的文件是否需要转成ES5之前的语法，后续我们需要通过babel来进行转换和设置；
- 事实上，当我们运行webpack时，webpack会查找当前目录下的 src/index.js作为入口；
- 所以，如果当前项目中没有存在src/index.js文件，那么会报错；
当然，我们也可以通过配置来指定入口和出口
- npx webpack --entry ./src/main.js --output-path ./build

三、loader配置方式

配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息：
- module.rules中允许我们配置多个loader（因为我们也会继续使用其他的loader，来完成其他文件的加载）；
- 这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览；
module.rules的配置如下：
- rules属性对应的值是一个数组：[Rule]
数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性： =
- test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式；
- use属性：对应的值时一个数组：[UseEntry]
  - UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
    - loader：必须有一个 loader属性，对应的值是一个字符串；
    - options：可选的属性，值是一个字符串或者对象，值会被传入到loader中；
    - query：目前已经使用options来替代；
  - 传递字符串（如：use: [ 'style-loader' ]）是 loader 属性的简写方式（如：use: [ { loader: 'style-loader'} ]）；
- loader属性： Rule.use: [ { loader } ] 的简写。

四、Loader的配置代码

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      // {
      //   test: /\.(jpe?g|png|gif|svg)$/,
      //   use: {
      //     loader: "file-loader",
      //     options: {
      //       esModule: false,
      //       outputPath: "webpackimg",
      //       name: "[name]_[hash:12].[ext]",
      //     },
      //   },
      //   type: "javascript/auto",
      // },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: "asset",
        generator: {
          filename: "img/[name]_[hash:16][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024,
          },
        },
      },
      // {
      //   test: /\.(eot|ttf|woff2?)$/,
      //   use: {
      //     loader: "file-loader",
      //     options: {
      //       esModule: false,
      //       outputPath: "font",
      //       name: "[name]_[hash:12].[ext]",
      //     },
      //   },
      //   type: "javascript/auto",
      // },
      {
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "font/[name]_[hash:16][ext]",
        },
      },
    ],
  },
};

五、Plugin配置

Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

const path = require("path");
const html = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "source-map",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "js/bundle.js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      // {
      //   test: /\.(jpe?g|png|gif|svg)$/,
      //   use: {
      //     loader: "file-loader",
      //     options: {
      //       esModule: false,
      //       outputPath: "webpackimg",
      //       name: "[name]_[hash:12].[ext]",
      //     },
      //   },
      //   type: "javascript/auto",
      // },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: "asset",
        generator: {
          filename: "img/[name]_[hash:16][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024,
          },
        },
      },
      // {
      //   test: /\.(eot|ttf|woff2?)$/,
      //   use: {
      //     loader: "file-loader",
      //     options: {
      //       esModule: false,
      //       outputPath: "font",
      //       name: "[name]_[hash:12].[ext]",
      //     },
      //   },
      //   type: "javascript/auto",
      // },
      {
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "font/[name]_[hash:16][ext]",
        },
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new html({
      template: "./public/index.html",
    }),
    new DefinePlugin({
      BASE_URL: "'./'",
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",
          to: "./",
          globOptions: {
            ignore: ["**/index.*"],
          },
        },
      ],
    }),
  ],
};

一、webpack基础配置（loader-plugin）

一、webpack的安装

二、webpack的默认打包

三、loader配置方式

四、Loader的配置代码

五、Plugin配置