- 1Linux开机自动执行自定义脚本或命令_linux 用户登录后脚本自动执行
- 2Python爬虫笔记1——爬虫概述_爬 就是通过编写程序来爬取互联 上的优秀资源(图 , 频, 视频, 数据)
- 3多模态大模型入门指南（非常详细）零基础入门到精通，收藏这一篇就够了
- 4高效开发：使用Spring Boot快速构建企业级应用
- 5常用文件类型 -- XML文件介绍_典型的xml文件类型
- 6【粉丝福利社】PHP从入门到精通（第6版）（软件开发视频大讲堂）（文末送书-完结）_php从入门到精通第五版和第六版差异有视频吗
- 7「数组」Knuth洗牌算法|C++random库简单介绍 / LeetCode 384（C++）
- 8【Rust日报】 2019-05-01
- 9八股文在实际工作中是助力，阻力还是空谈？
- 10LLaMa系列模型详解（原理介绍、代码解读）：LLaMA 3_llama3
在Windows下使用webpack入门_window.webpack()
赞
踩
在Windows下使用webpack入门
本文所用所有源代码地址：
https://github.com/Xganying/webpack/tree/master/webpack_test
1. webpack的打包示意图理解：
2. 前期准备
- 安装node
- 新建一个文件夹：webpack_test
3. 安装并使用webpack
（1）在命令行下进入文件夹：webpack_test中，并初始化：
（2） 在当前文件中安装webpack
安装webpack成功后，会看到webpack_test下有两个文件：node_modules和package.json：
（3） 在webpack_test目录下，新建文件：hello.js
function hello(){
console.log("hello, this is Cynthia !");
}- 1
- 2
- 3
（4） 用webpack将hello.js文件打包成hello.buddle.js文件：
理解字段含义：
Asset: 本次打包生产的文件
Size: 这个文件的大小
Chunks ： 这次打包的模块
Chunk Names： 这次打包的模块的名称
- 1
- 2
- 3
- 4
打包后就会得到文件：hello.bunddle.js ，查看该文件内容时，它前面的都是webpack自动生成的一些内置函数等，而自己写的代码则在最后。
（5） 注意：
可能由于是第一次使用webpack，所以在命令行时，可能会出现以下情况：
- 1
解决办法：需要安装一个全局的webpack，例如
这样就可以正常的使用webpack了。
（6）接着，继续新建文件：world.js
function world(){
return{
}
}- 1
- 2
- 3
- 4
- 5
在hello.js文件中引用：
require('./world.js');
function hello(){
console.log("hello, this is Cynthia !");
}- 1
- 2
- 3
- 4
- 5
然后打包就会发现显示的是Hello.js模块的编号是0，而world.js的模块编号是1：
打包后的文件则显示为：
（7）继续新建文件：style.css
body{
margin: 0;
padding: 0;
}- 1
- 2
- 3
- 4
在hello.js中引用：
require('./world.js');
require('./style.css');
function hello(){
console.log("hello, this is Cynthia !");
}- 1
- 2
- 3
- 4
- 5
- 6
打包时发现报错：
原因：Webpack不支持css文件，如果要处理css文件，得依赖loader。
（8）安装loader:
但是打包还是出错：
因为虽然引用了css文件，但是并没有给它指定loader,所以仍然会报错，给css文件指定loader,再打包：
这就就可以正常打包了，可以看到打包以后生成的部分代码：
（9）新建一个index.html文件，并引用hello.buddle.js,再执行一遍打包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack_test</title>
</head>
<body>
<script type="text/javascript" src="./hello.buddle.js"></script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
（10）修改： 在style.css文件中添加样式，使得背景变为红色
body{
margin: 0;
padding: 0;
background: red;
}- 1
- 2
- 3
- 4
- 5
重新打包后，在浏览器运行index.html文件，结果发现并没有改变背景颜色，原因是在引用css文件时，还需要style-loader:
这样，浏览器运行index.html之后发现背景样式就改变了。
结论：
- css-loader: 使webpack可以处理.css文件
- style-loade r: 把通过css-loader处理完的文件，通过一个style标签插入到.html文件当中。 当index.html引用打包后的hello.buddle.js文件，并执行的时候，css的内容就会插入到html文件中。
但是并不是每次都要这样加载这些loader文件，因为这样做可能会很麻烦。所以就可以指定这些loader文件:
但是我们发现每一次打包文件的时候，都要输入这么长的命令，很繁琐，也不好，所以可以通过–watch这个参数，使得每次执行打包的时候自动更新文件:
除了–watch这个参数外，还有其他参数，例如常用的还有：
- –process ，可以看到打包的过程
- –display-module : 查看打包的模块
- –display-reason ；查看打包模块的原因
还有许多参数在此不再多说明了。
PS:
本文是我入门学习webpack的一个入门示例，十分简单的易懂，若果您觉得有说得不妥的地方，欢迎您的指出，可以通过留言方式或者直接联系本人哦~
