打包工具 Webpack（二）

打包工具 Webpack（二）

它分为五大块

• 入口
• 出口
• 加载器（webpack 本身只能处理 js、json 等资源，其它资源需要借助加载器才能解析，比如 css 资源）
• 插件
• 模式

我们一般会有一个配置文件（专门配置 webpack 的），叫做webapck.config.js

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

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

因为 webapck 是基于 Node.js 运行的，所以它遵循 CJS 规范

有了配置文件之后，直接运行指令webpack即可