webpack入门

-1
原创 已于 2025-11-21 15:00:53 修改 · 609 阅读 · 25 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #前端 #node.js

于 2025-11-21 14:41:07 首次发布

文章目录

什么是webpack

前端工程化，是指项目开发到上线，过程中集成的所有工具技术，Node.js是前端工程化的基础。
在这里插入图片描述
webpack是用于JavaScript应用程序的静态模块打包工具，当webpack处理应用程序时，会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将项目中所需的所有模块组成一个或多个bndles，它们均为静态资源，用于展示内容。
静态模块指的是编写代码过程中的，html，css，js，图片等固定内容的文件。
打包是指把静态模块内容，压缩，整合，转译等（前端工程化），例如：把 less / sass 转成 css 代码，把 ES6+ 降级成 ES5，支持多种模块标准语法。
在这里插入图片描述
参考文档 ： https://www.webpackjs.com/concepts/

webpack配置

使用webpack

  1. 新建并初始化项目，编写业务源代码
npm init
  1. 下载 webpack和webpack-cli 到当前项目中
npm i webpack webpack-cli --save-dev
  1. 配置局部自定义命令
"scripts": {
	"build": "webpack"
}

3.运行打包命令，会自动产生dist分发文件夹

npm run build

打包入口和出口

  1. 项目根目录，新建 webpack.config.js 配置文件
    在这里插入图片描述

  2. 导配置入口，出口文件路径

const path = require("path")

module.exports = {
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: './login/index.js'
    }
}

生成 html 文件

1.下载 html-webpack-plugin 本地软件包

npm i html-webpack-plugin --save-dev

2.配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	 plugins: [
        new HtmlWebpackPlugin({
            template: './public/login.html',
            filename: './login/login.html',
        })
    ]
}

打包css

  1. 准备 css 文件代码引入到入口src/login/index.js 中
import './login.css'
  1. 下载 css-loader 和 style-loader 本地软件包
    css-loader：解析css代码
    style-loader: 把解析的css代码插入到DOM
npm i css-loader style-loader --save-dev
  1. 配置 webpack.config.js
module.exports = {
	 module: {
        rules: [
            // 打包css 代码
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            }
        ]
    }
}

打包css-提取css代码

将CSS代码提取到独立的css文件中，这样css文件可以被浏览器缓存，减少js文件体积

  1. 下载mini-css-extract-plugin 本地软件包
npm install mini-css-extract-plugin --save-dev
  1. 配置webpack.config.js，注意不能和style-loader 一起使用
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
	 module: {
        rules: [
            // 打包css 代码
            {
                test: /\.css$/i,
                //use: ["style-loader", "css-loader"],
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    plugins: [
    		new MiniCssExtractPlugin({
            filename: './login/login.css'
        })
	  ]
}

打包css-压缩代码

压缩提取的CSS代码
1.下载插件css-minimizer-webpack-plugin

npm install css-minimizer-webpack-plugin --save-dev
  1. 配置webpack.config.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
// ...
optimization: {
        minimizer: [
            // webpack中可以使用`...`来扩展现有minimizer
            `...`,
            new CssMinimizerPlugin()
        ]
    }
}

打包less代码

  1. 新建less 代码（设置背景图）并引入到入口文件，例如src/login/index.js中
import './xxx.css'
  1. 下载less 和less-loader 本地软件包
npm i less less-loader --save-dev
  1. 配置webpack.config.js
module.exports = {
	module: {
        rules: [
            // 打包less
            {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            }
        ]
    }
}

打包图片

Webpack内置资源模块（字体，图片等）打包，无需额外loader
配置webpack.config.js

module.exports = {
	module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif)$/i,
                type: 'asset',
                generator: {
                    filename: 'assets/[hash][ext][query]'
                }
            }
        ]
    }
}

其中：
【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串
【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串
【query】保留引入文件时代码中查询参数（只有URL 下生效）

注意：资源临界值默认为8KB
大于8KB 文件：发送一个单独的文件并导出URL 地址
小于8KB 文件：导出一个data URI（base64字符串）

开发环境

之前改代码，需重新打包才能运行查看，效率很低，可以配置开发环境，启动web服务，自动检测代码变化，热更新到页面。
注意：dist 目录和打包内容是在内存里，并不在打包导出的dist目录下

  1. 下载webpack-dev-server
npm i webpack-dev-server --save-dev
  1. 在webpack.config.js设置模式为开发模式
module.exports = {
	mode: 'development',
	devServer: {
	  static: './dist',
  }
}
  1. 在package.json中配置自定义命令
"scripts": {
	"build": "webpack",
	"dev": "webpack serve --open"
}
  1. 启动开发服务器
npm run dev

打包模式

模式名称特点场景
开发模式development调试代码，实时加载，模块热替换等本地开发
生产模式production压缩代码，资源优化，更轻量等打包上线

打包模式的配置
方式一
在webpack.config.js 配置文件设置mode 选项

module.exports = {
	mode: 'production'
}

方式二
在package.json 命令行设置mode 参数，命令行设置的优先级高于配置文件中的，推荐用命令行设置

 "scripts": {
    "build": "webpack --mode=production",
    "dev": "webpack serve --open --mode=development"
  }

打包模式的应用

例如对CSS代码的提取，在开发模式下用style-loader内嵌更快，在生产模式下用MiniCssExtractPlugin提取css代码
方案一
webpack.config.js 配置mode选项，或者在package.json 命令行设置mode 参数，会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为development和production，但只接受这两种参数。

如果要根据 webpack.config.js 中的 mode 变量更改打包行为，则必须将配置导出为函数，而不是导出对象：

var config = {
  entry: './app.js',
  //...
};

module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    config.devtool = 'source-map';
  }

  if (argv.mode === 'production') {
    //...
  }

  return config;
};

方案二
配置不同环境的webpack.config.js

  1. 安装 webpack-merge
npm install --save-dev webpack-merge
  1. 创建不同环境的webpack.config.js
  webpack-demo
  |- package.json
  |- package-lock.json
 |- webpack.config.js
 |- webpack.common.js
 |- webpack.dev.js
 |- webpack.prod.js
  |- /dist
  |- /src
    |- index.js
    |- math.js
  |- /node_modules

将prod和dev配置中公共部分提取到common中，在prod和dev中使用merge进行引用
webpack.common.js

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     app: './src/index.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Production',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
 };

webpack.dev.js

 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'development',
   devtool: 'inline-source-map',
   devServer: {
     static: './dist',
   },
 });

webpack.prod.js

 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'production',
 });
  1. 配置package.json
"scripts": {
	"start": "webpack serve --open --config webpack.dev.js",
	"build": "webpack --config webpack.prod.js"
}

方案三
借助cross-env （跨平台通用）包命令，设置参数区分环境

  1. 下载cross-env 软件包到当前项目
npm i cross-env --save-dev
  1. package.json中配置自定义命令，传入参数名和值
"scripts": {
    "build": "cross-env NODE_ENV=production webpack --mode=production",
    "dev": "cross-env NODE_ENV=development webpack serve --open --mode=development"
}
  1. 在webpack.config.js 区分不同环境使用不同配置
module.exports = {
 module: {
	rules: [
		// 打包css 代码
     {
     	test: /\.css$/i,
       use: [process.env.NODE_ENV === 'development' ? 'style-loader': MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
 }
}

cross-env 设置的只在Node.js 环境生效，前端代码运行环境无法访问process.env.NODE_ENV，需要使用Webpack 内置的DefinePlugin 插件，在编译时，将前端代码中匹配的变量名，替换为值或表达式

const webpack = require('webpack')

module.exports = {
	plugins: [
		new webpack.DefinePlugin({
	     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
     })
	]
}

打包模式

打包的代码被压缩和混淆，无法正确定位源代码位置（行数和列数），source map
可以准确追踪error 和warning 在原始代码的位置，inline-source-map 选项把源码的位置信息一起打包在js 文件内，仅适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）

module.exports = {
	devtool: 'inline-source-map'
}

解析别名alias

在webpack.config.js 中配置解析别名@ 来代表src 绝对路径，创建import引入路径的别名，来确保模块引入变得更简单

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    }
}

cdn 使用

  1. 在html 中引入第三方库的CDN 地址并用模板语法判断
<% if(htmlWebpackPlugin.options.useCdn){ %>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<% } %>

2.配置webpack.config.js 中 externals外部扩展选项（防止某些import 的包被打包）

const config = {
	plugins: [
		new HtmlWebpackPlugin({
            template: './public/login.html',
            filename: './login/login.html',
            useCdn: process.env.NODE_ENV === 'production'
        })
	]
}


if(process.env.NODE_ENV === 'production') {
    config.externals = {
        // key：代码中import from 后面的模块标识字符串
        // value: 替换在原地的变量名（要和CDN暴露在全局的变量名一致）
        'bootstrap/dist/css/bootstrap.min.css': 'bootstrap',
        'axios': "axios"
    }
}

多页面打包

配置webpack.config.js

const config2 = {
    entry: {
        '模块1': path.resolve(__dirname, 'src/入口1.js'),
        '模块2': path.resolve(__dirname, 'src/入口2.js')
    },
    ouput: {
        path: path.resolve(__dirname, 'dist'),
        filename: './[name]/index'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/页面1.html',
            filename: './路径/login.html',
            chunks: ['模块1']
        }),
        new HtmlWebpackPlugin({
            template: './public/页面2.html',
            filename: './路径/login.html',
            chunks: ['模块2']
        })
    ]
}
Webpack入门基础知识及案例
weixin_43483590的博客
08-06 1492
​webpack相信大家都已经不陌生了，应用程序的静态模块打包工具。那么我们如何使用webpack对项目进行模块化打包呢？ ​
webpack入门基础
09-20
Webpack入门首先需要了解几个核心概念，即入口(entry)、输出(output)、加载器(loaders)、插件(plugins)。入口起点(entry point)指示Webpack应该使用哪个模块，来作为构建其内部依赖图的开始。输出(output)决定了如何...
webpack入门全套
weixin_43516605的博客
10-10 619
webpack入门到精通（处理各种资源文件、编写插件）
超详细 WebPack 入门教程
qq_43682422的博客
04-09 6658
前端工程化 1.什么是前端工程化 前端工程化指的是: 在企业级的前端项目开发中，把前端开发所需要的工具，技术，流程，经验等进行规范化，标准化。 1)模块化 （js的模块化,css的模块化,资源的模块化） 2)组件化（复用现有的UI结构，样式，行为） 3)规范化（目录结构的划分，编码规范化，接口规范化，文档规范化，Git分支管理） 4)自动化（自动化构建，自动化部署，自动化测试） 4)前端工程化的解决方案 早期的前端工程化解决方案：grunt ,gulp 目前主流的前端工程化解决方案: webpack(ht
Webpack入门详解
starry-sea1412的弃坑之路
05-19 748
Webpack 是一个现代化的 JavaScript 应用程序的静态模块打包工具。它是一个非常强大的工具，可以将多个模块打包成一个或多个 bundle，从而提高应用程序的性能和加载速度。
webpack入门教程
youhebuke225的博客
05-22 710
目录webpack相关1. webpack相关配置 webpack相关 1. webpack相关配置 详情 点击
Webpack入门
m0_72410588的博客
05-01 191
Webpack 是一个强大的静态模块打包工具，可以将应用程序的所有模块打包成一个或多个 bundle 文件。它支持模块化、Loader 和 Plugin 等许多功能，能够极大地提高前端开发的效率和可维护性。
webpack 入门
zhm0303的博客
12-11 402
一，初始化和安装webpack npm init -y npm install --save-dev webpack 二，创建 webpack.config.js文件 对webpack.config文件进行配置 module.exports = { entry: './src/index.js', output: { filename: '[name].[chunkh
WebPack入门
李乾文的博客
08-09 291
webpack是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换、打包或包裹任何资源。
webpack入门到实战（上）
weixin_43443341的博客
06-06 710
web开发中我们打交道的无非是html，css，js等静态文件，为什么不直接将工程中的源文件发布到服务器，而是进行webpack打包处理呢？webpack是一个开源的JavaScript模块打包工具，其核心功能是解决模块之间的依赖，把各个模块按照特定的顺序和规则组织在一起最终将打包合并后的文件发布到服务器................................................................................................
webpack入门demo
11-21
Webpack入门是一个循序渐进的过程，从理解基础概念到熟练运用各种加载器和插件，每一步都需要脚踏实地地学习。在实践中不断尝试，将帮助开发者更快地掌握Webpack的精髓，从而在前端开发中大放异彩。
webpack入门+react环境配置
12-10
《webpack入门+React环境配置详解》 在前端开发中，模块化管理和自动化打包工具的使用已经成为常态，而webpack正是这样一款强大的工具。本文旨在为React的开发环境搭建打下基础，帮助开发者理解webpack的基本概念和...
简单聊聊webpack摇树的原理
小秀的博客
11-24 782
Webpack 的 Tree Shaking（摇树）是一项用于消除 JavaScript 上下文中未引用代码的优化手段，它能有效减小打包体积。
Vue项目中 安装及使用Sass（scss）
最新发布
2509_94198322的博客
11-27 269
为什么会有这个安装方法，是因为我在使用常规安装方法时，会出现版本不兼容问题，导致安装失败，所以 尝试了一个新的方法，如下。的版本，因为它会根据 npm 依赖项自动安装合适的版本。项目就可以正常使用sass啦~：nodejs环境中将sass转css。2.在这个配置中，你不需要指定。：把 sass编译成css。
Webpack学习——Plugin（插件）
u012881935的博客
11-26 243
写一个 “打印打包开始和结束” 的插件创建LogPlugin.js// 插件必须是类，类名建议大写开头// Webpack 会自动调用 apply 方法，传入 Compiler 实例// 1. 注册到 "compile" 钩子（开始编译时触发，同步钩子用 tap）console.log("打包开始啦！");});// 2. 注册到 "done" 钩子（打包完成时触发，同步钩子用 tap）// stats 是打包统计信息，包含打包耗时、模块数等console.log(`打包完成！${
Webpack学习——Loader（文件转换器）
u012881935的博客
11-26 129
a:1,b:2
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值