webpack.config.js基础配置（五大核心属性）

news2025/2/26 0:26:54

在上一节webpack零基础入门中我们在安装完webpack 和 webpack-cli依赖之后，直接通过npx webpack ./src/main.js --mode=development的方式对src下的js文件进行了打包。
其中的
./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。
--mode=xxx：指定模式（环境）。
./src/main.js就是webpack的打包入口文件，–mode是指定打包的模式，
这些东西其实我们可以在webpack.config.js中配置，配置好了之后，我们只需要执行

npx webpack

就能打包了，不用那么长的命令。

一、准备 Webpack 配置文件

在项目根目录下新建文件：webpack.config.js
如图：
在这里插入图片描述
Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范

图中的五个属性，就是webpack的五大核心概念

entry（入口）
指示 Webpack 从哪个文件开始打包
output（输出）
指示 Webpack 打包完的文件输出到哪里去，如何命名等
loader（加载器）
webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
plugins（插件）
扩展 Webpack 的功能
mode（模式）
主要有两种模式：
开发模式：development
生产模式：production

二、修改 Webpack 配置文件

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

修改好之后我们删除项目目录下上次打包好的dist文件夹，执行以下命令重新打包：

npx webpack

在这里插入图片描述
看到新增了dist目录，且有main.js文件代表打包成功了，然后我们再重新执行public目录下的index.html文件，如图：

控制台还是打印了两个函数的调用结果。
说明我们配置是生效的，当然目前的一些配置都是最基本，只能处理js文件，还不能处理css,图片等资源，这里只是还原一下上节中默认配置效果。