webpack的安装，配置及引用
webpack概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
1、webpack安装
webpack4之后的版本，需要全局安装webpack和webpack-cil,命令如下：
node -v //确定已安装node
npm config get registry //确定npm镜像是淘宝镜像
//全局安装webpack 和 webpack-cil
npm i webpack -g
npm i webpack-cil -g
//还需要局部安装
npm i webpack-cli -D
//-D 可以替换成 --sava-dev 意思是安装到编译时环境，在package.json中查看，是安装到devDependences里
webpack -v
//能查看到webpack和webpack-cil版本号即可认定安装成功
2、新建项目（文件夹）
新建文件夹命名为：webpack-study，并初始化npm init -y
在项目中新建文件和文件夹：src，dist，index.html
webpack-study
----src //这里面是程序员写的代码，即webpack入口
--------index.js
--------b.js
----dist //这里面是webpack生成的代码，即出口
----index.html
----package.json
b.js代码
function add(a,b){
return a+b
}
module.exports=add
index.js
const add=require('./b')
console.log(add(1,2)) //3
3、配置webpack.config.js
在根目录下新建webpack.config.js
const path=require('path')//webpack是基于node，在这里引入node的path模块
module.exports={
entry:'./src/index.js',//指定入口
output:{
path:path.resolve(__dirname,'dist'),
//这里必须是绝对路径（C：XX/yy/zz/index.js)，则采用path模块中的方法，对路径做剪切
//相对路径长这样（../aaa/bbb/ccc/index.js)
filename:'bundle.js'
},
mode:'development'//开发环境 改成production则为 产品环境（发布环境）
}
开放环境生成的bundle.js，里面包含了大量的注释和其他冗杂代码
产品环境即对外发布上线的版本，则非常精简，空格，分号等都被去掉，只有一行代码
4、运行
webpack
即可在dist文件夹下生成bundle.js
5、配置package.json
{
"name": "webpack-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack" -------配置这一行
},
"keywords": [],
"author": "",
"license": "ISC"
}
则后续每次编译，执行以下代码
npm run build
6、引入到index.html中
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript" src="dist/bundle.js"></script>
</head>
<body>
</body>
</html>
浏览器打开后，查看控制台，即可看到执行结果。
7、配置CSS
在src文件夹下，新建css/normal.css
div{color:red}
index.html添加以下内容
<body>
<div>
这里随便写几个字
</div>
</body>
注意：我们并不是要把
normal.css直接引入到index.html中，而是要将其打包到bundle.js，再被引入到index.html
我们要安装两个loader来配置css，其中css-loader是引入css，style-loader是解析css
安装方式
npm i css-loader style-loader -D
配置方式
在webpack-config.js中，添加module字段
const path=require('path')//webpack是基于node，在这里引入node的path模块
module.exports={
entry:'./src/index.js',//指定入口
output:{
path:path.resolve(__dirname,'dist'),
//必须是绝对路径
filename:'bundle.js'
},
mode:'production',
module:{
rules:[
{
test:/\.css$/,
use:[
{loader:'style-loader'},
{
loader: 'css-loader',
options:{
modules:true
}
}
]
}
]
}
}
注意：loader 从右到左（或从下到上）的取值（evaluate）/执行（execute）
所以一定要保证先配置style-loader，在配置css-loader，这样才能保证webpack从下往上，先引入（css-loader），后解析（style-loader）。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构