基本配置

在使用webpack之前，我们需要对webpack的配置有一定的认识。

5 大核心概念

• entry(入口)

  指定 Webpack 从哪个文件开始打包。

• output(输出)

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

• loader(加载器)

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

• plugins(插件)

  扩展 webpack 的功能。

• mode(模式)

  主要有两种模式：

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

准备 Webpack 配置文件

在项目根目录下新建文件：webpack.config.js

module.exports = {
  //入口
  entry: "",
  //输出
  output: {},
  //加载器
  module: {
    rules: [],
  },
  //插件
  plugins: [],
  //模式
  mode: "",
};

webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范。

修改配置文件

1. 配置文件

const path = require("path");

module.exports = {
  //入口
  entry: "./src/main.js", //相对路径
  //输出
  output: {
    //文件的输出路径
    //__dirname nodejs的变量，代表当前文件的文件夹目录
    path: path.resolve(__dirname, "dist"), //相对路径
    //文件名
    filename: "main.js",
  },
  //加载器
  module: {
    rules: [
      //loader的配置
    ],
  },
  //插件
  plugins: [
    //plugin的配置
  ],
  //模式
  mode: "development",
};

2. 运行指令

npx webpack

小结

Webpack 将来都通过 webpack.config.js 文件进行配置，来增强 webpack 的功能。 后面会以两个模式来分别搭建 webpack 的配置，先进行开发模式，再完成生产模式。