基本配置

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

1. 大核心概念

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

2. 准备 Webpack 配置文件

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

/** node核心模块 专门处理路径问题 */
const path = require("path")

module.exports={
    /** 入口文件（一个或多个） */
    entry: "./src/main.js",
    /** 输出 */
    output: {
        /** 
         * 文件输出的路径 
         * path 要绝对路径
         * __dirname：node.js 的变量，代表当前文件的文件夹目录
        */
        path: path.resolve(__dirname, "dist"),
        /** 输出之后的文件名 */
        filename: "main.js",
        /** 
         * 作用：打包前自动删除上次打包的 dist 文件夹
         * 原理：在打包前，将 path 整个目录内容清空，再进行打包 
        */
        clean: true,
    },
    /** 加载器 */
    module: {
        rules: [
            /** loader 的配置 */
        ]
    },
    /** 插件 */
    plugins: [
        /** plugins 的配置 */
    ],
    /** 模式 */
    mode: "development",
}

Webpack 是基于 Node.js 运行的，所以采用 Commonjs 模块化规范

3. 使用命令打包

在项根目录下运以下命令

npx webpack