webpack - 五大核心概念和基本配置（打包一个简单HTML页面）

怕冷的火焰（~杰）2024-09-12 19:02

复制代码

// 五大核心概念
1. entry（入口）
指示Webpack从哪个文件开始打包

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

3. loader（加载器）
webpack本身只能处理js，json等资源，其他资源如图片需要借助loader，webpack才能解析

4. plugin（插件）
扩展Webpack的功能

5. mode（模式）
主要有两种模式：开发模式（development）和生产模式（production）

使用webpack打包html

复制代码

const path = require('path')

module.exports = {
    // 入口
    entry: './src/main.js', // 这里要用相对路径

    // 输出
    output: {
        // 文件的输出路径, __dirname代表当前文件夹目录
        path: path.resolve(__dirname, 'dist'),  // 这里要用绝对路径

        // 文件名
        filename: 'main.js'
    },

    // loader加载器
    module: {
        rules: [
            // loader的配置
        ]
    },

    // plugins插件
    plugins: [
        // 插件配置
    ],

    // 模式
    mode: 'development'
}