Webpack中的基本配置

目录

webpack配置五大概念

webpack配置文件设置

---

此节内容我们要对 webpack 的基本配置做一些了解。

webpack配置五大概念

1.entry（入口）

指示 Webpack 从哪个文件开始打包

2.output（输出）

指示 Webpack 打包完的文件输出到哪里去，如何命名等

3.loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

4.plugins（插件）

扩展 Webpack 的功能

5.mode（模式）

主要由两种模式：

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

webpack配置文件设置

需要在项目根目录下新建 webpack 配置文件：webpack.config.js（Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范）

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

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名 在dist目录下
    filename:"static/main.js",
    //自动清空上次打包结果,即打包前将path目录整个清空
    clean:true,
  },
  // 加载器，用来处理其他资源
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

设置了webpack的基础配置后，就可以使用如下简单指令对入口文件所涉及到的 Js 资源进行打包了。但样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要在 webpack 配置文件的 module 加载器中的 rules 配置来编译这些资源，后续章节会详细讲到。