这里记录下 webpack 的基本使用，因为每次我新建项目的时候都要去搜索一下 webpack，感觉很麻烦，所以还是自己记录下使用的方法，增强下记忆。

安装

webpack 安装

写文章的时候，webpack 最新版本是 5.81.0，可以参考官网

npm install webpack webpack-cli -D

一般都是使用命令行来操作 webpack，所以顺便把 webpack-cli 给安装了

其他常用插件安装

npm install webpack-dev-server html-webpack-plugin copy-webpack-plugin clean-webpack-plugin babel-loader @babel/preset-env @babel/plugin-transform-optional-chaining url-loader raw-loader -D

这里分别装了：

webpack-dev-server
用来开启本地服务器（开发时使用）
html-webpack-plugin
用来设置不用打包的静态文件，比如 html 文件
copy-webpack-plugin
用来将不需要 webpack 处理的静态文件复制到指定的打包目录
clean-webpack-plugin
该插件负责每次打包之前都清空打包目录，保证目录干净
babel-loader
babel 的 webpack 版本，负责将 js 高版本语法编译为低版本语法，解决兼容性问题
@babel/preset-env
babel 的预设库，用来预先设置一些常用的配置选项，比如编译目标预设为 ES5
@babel/plugin-proposal-optional-chaining
用来处理可选链操作符”?.”，解决兼容性问题（提议阶段版本，目前不建议使用）
@babel/plugin-transform-optional-chaining
用来处理可选链操作符”?.”，解决兼容性问题（正式版本）
url-loader
用来引入文件 url，依赖 file-loader，如果文件大小小于限制 limit，会将文件内容进行 base64 编码然后返回，否则会直接调用 file-loader 返回文件 url
raw-loader
用来引入文件内容

配置

配置文件

在项目根目录下新建配置文件：

webpack.config.js（基本配置）
webpack.dev.config.js（开发环境配置）
webpack.pro.config.js（生产环境配置）

webpack 配置官网参考

webpack.config.js

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  // target: 'node', // 如果需要打包后运行在nodejs环境下，需要设置此值，参考：https://www.webpackjs.com/configuration/target/#target
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.js$/i,
        exclude: /node_modules/, // 不编译node_modules里的代码
        loader: "babel-loader",
        options: {
          presets: [["@babel/preset-env", { targets: "defaults" }]], // 使用babel预设
          plugins: [
            // "@babel/plugin-proposal-optional-chaining", // 使用可选链操作符"?."，不建议使用
            "@babel/plugin-transform-optional-chaining", // 使用可选链操作符"?."
          ],
        },
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        loader: "url-loader",
        options: {
          limit: 8192, // 单位：字节。如果文件大小<=这个大小，会将文件内容base64编码，否则会调用file-loader
        },
      },
      {
        test: /\.(txt|json|vert)$/i,
        loader: "raw-loader", // 用来引入文件的内容
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(), // 先删除打包目标目录再打包,
    new HtmlWebpackPlugin({
      template: "./public/index.html", // 配置模板index.html文件
    }),
    // 把文件（CNAME等）移动到打包目录，如果没有需要移动的文件，则需要注释
    // 注意，该插件使用了空值合并操作符“??=”，需要node版本至少16
    // new CopyWebpackPlugin({
    //     patterns: [
    //         { from: './public/CNAME' }
    //     ]
    // }),
  ],
  resolve: {
    alias: {
      /*
        设置import和require路径的别名
        设置后可使用
        import MyModule from '@/MyModule.js'
        替代
        import MyModule from '../../../../../MyModule.js'
      */
      "@": path.resolve(__dirname, "src"),
    },
  },
};

注意：
如果配置了 resolve.alias ，在 vscode 下一般需要在项目根目录同步配置引入模块的别名，才能通过 intellisense 查看引入模块的类型，参考解决 vscode 无法识别 webpack 中用@作为别名的模块类型

webpack.dev.config.js

// webpack.dev.config.js
const path = require("path");
const baseConfig = require("./webpack.config");

module.exports = Object.assign(baseConfig, {
  // 开发模式配置
  mode: "development",
  devtool: "source-map",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/",
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"), // 开发服务器根目录
    },
    compress: true,
    port: 8888,
  },
});

webpack.pro.config.js

// webpack.pro.config.js
const path = require("path");
const baseConfig = require("./webpack.config");

module.exports = Object.assign(baseConfig, {
  // 生产模式配置
  mode: "production",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "scripts/bundle.js",
    publicPath: "./",
  },
});

.gitignore

node_modules
/dist

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

运行脚本

最后为了方便，我们把启动 webpack 的命令行脚本添加到 npm 项目的 package.json 中

{
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.dev.config.js",
    "build": "webpack --config ./webpack.pro.config.js"
  }
}

最后就可以快乐地使用项目了。
文章实时更新中…

webpack基础使用

安装