2021最新webpack5: webpack配置文件

P3 03-webpack配置文件
更新于: 2022-01-03 16:08:20

背景

全局 webpack/webpack-cli 的问题

如果每次都直接用 webpack 命令打包，共享等很多问题都不方便，包括 cli 的版本不一致等问题

局部webpack方式

# 生成 package.json
npm init -y

# 安装 webpack/webpack-cli
npm i -D webpack webpack-cli

运行局部webpack命令打包

npx webpack

webpack 的默认入口

src/index.js

可以用命令方式指定

# 设置入口
npx webpack --entry ./src/main.js
# 设置导出路径
npx webpack --entry ./src/main.js --output-path=build

给定默认的配置文件

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

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
};

注意点：

  1. entry 后面的文件是  ./src/main.js 而不是 src/main.js
  2. outputh 里的  path: 必须是绝对路径

参考