基本配置

开始使用

1. 资源目录

webpack_code # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件

2. 安装依赖

• 初始化

npm init -y

• 下载依赖

npm i webpack webpack-cli -D

3. 启动

• 开发模式

npx webpack ./src/main.js --mode=development

• 生产模式

npx webpack ./src/main.js --mode=production

基本配置项

核心配置项

1. entry（入口）：指定打包入口文件

2. output（输出）：指定打包文件输出目录，文件命名

3. loader（加载器）：webpack 只能处理 js、json 等资源，解析其他资源需要借助 loader

4. plugins（插件）：扩展 Webpack 的功能

5. mode（模式）

   • 开发模式：development
   • 生产模式：production

配置文件

在项目根目录新建 webpack.config.js

const path = require("path");

module.exports = {
  // 入口(相对路径或绝对路径)
  entry: "./src/main.js",
  // 输出
  output: {
    // 必须是绝对路径
    path: path.resolve(__dirname, "/dist"),
    // 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: { rules: [] },
  // 插件
  plugins: [],
  // 模式
  mode: "development",
};

注意

entry 入口相对的是项目根路径，而不是其所在文件位置，默认值为 ./src/index.js ，建议写成绝对路径