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'
}
相关推荐
故事与九35 分钟前
基于 Node.js 的 HTML 转 PDF 服务
pdf·node.js·html
F2E_Zhangmo38 分钟前
webpack5所用依赖以及对应的版本
vue.js·webpack
鲁Q同志1 小时前
vue项目启动报错(node版本与Webpack)
前端·vue.js·webpack
GUIQU.6 小时前
【node.js】数据库与存储
数据库·node.js
黑风风18 小时前
Ubuntu 安装 Node.js 指定版本指南
ubuntu·node.js·vim
GUIQU.19 小时前
【node.js】入门基础
node.js
flex888819 小时前
【开源】一个基于 Vue3 和 Electron 开发的第三方网易云音乐客户端,具有与官方客户端相似的界面布局
开源·node.js·vue
ZL_KZN19 小时前
nodejs快速入门到精通1
node.js
Q_Q196328847520 小时前
python宠物用品商城系统
开发语言·spring boot·python·django·flask·node.js·php
binnnngo1 天前
解决npm install报错:getaddrinfo ENOTFOUND registry.nlark.com
前端·npm·node.js