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

复制代码
// 五大核心概念
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'
}
相关推荐
前端双越老师1 小时前
2025 年还有前端不会 Nodejs ?
node.js·agent·全栈
人工智能训练师10 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny0710 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
huangql52014 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
荣达17 小时前
koa洋葱模型理解
前端·后端·node.js
csdn_aspnet17 小时前
Windows Node.js 安装及环境配置详细教程
windows·node.js
风若飞1 天前
npm ERR! code CERT_HAS_EXPIRED
前端·npm·node.js
csdn_aspnet1 天前
Windows、Linux 系统 nodejs 和 npm 版本更新及错误修复
linux·windows·npm·node.js
北城笑笑1 天前
NodeJS 8 ,从 0 到 1:npm 包发布与更新全流程指南( 含多场景适配与踩坑总结 )
前端·npm·node.js·github
码码哈哈0.01 天前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
前端·npm·node.js