超详细！webpack入门教程(一),作者:前端林子，Ting Yu
超详细！webpack入门教程(一)
https://cloud.tencent.com/developer/article/1195063
https://zhuanlan.zhihu.com/p/454095074
笔记：
1.webpack定义
webpack是一个前端构建工具。可理解为是一个模块打包机。它帮助我们分析项目结构，找到 JavaScript 模块以及其它一些浏览器不能直接运行的拓展语言（Scss，TypeScript 等）将其打包为合适的格式以供浏览器使用。
通过loader（加载器）和plugins（插件）对资源进行处理。
所有的资源都是通过JavaScript渲染出来的。
如果一个页面大部分是script标签构成，80%以上都是webpack打包
!function("形参")("加载器"😉(["模块"]):模块以数组形式存储,数组中的每个元素都是函数
代码压缩
将JS、CSS代码混淆压缩，让代码体积更小，加载更快
编译语法
编写CSS时使用Less、Sass，编写JS时使用ES6、TypeScript等，这些标准目前都无法被浏览器兼容，因此需要构建工具编译，例如使用Babel编译ES6语法。
处理模块化：
CSS和JS的模块化语法，目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法，但是需要构建工具将模块化语法编译为浏览器可识别形式。例如使用webpack、Rollup等处理JS模块化。
其他的构建工具：最早普及使用的是Grunt，后面又出现Gulp。Webpack是目前流行的构建工具，可以说是构建工具的神器，学习成本较高。
2.安装和使用
第一步，安装Node.js: (已安装)
C:\Users\Huawei X pro>node -v v20.10.0
全局安装webpack，运行：
C:\Users\Huawei X pro>npm install -g webpack
added 78 packages in 1m
9 packages are looking for funding
run npm fund for details
npm notice
npm notice New minor version of npm available! 10.2.1 -> 10.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.4.0
npm notice Run npm install -g npm@10.4.0 to update!
npm notice
第二步，创建配置项：
D:\webpack>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See npm help init for definitive documentation on these fields
and exactly what they do.
Use npm install
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (webpack)
version: (1.0.0)
description: test
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\webpack\package.json:
{
"name": "webpack",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) yes
D:\webpack>
第三步，安装webpack:
npm install --save-dev webpack
added 78 packages, and audited 79 packages in 2m
9 packages are looking for funding
run npm fund for details
found 0 vulnerabilities
npm安装注意两点：
(1)安装时如未指定版本号，则按最新的版本安装，这里webpack安装的是最新的4.17.1的版本
(2)npm install --save和npm install --save-dev的区别：
--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下。dependencies是发布后还依赖的，devDependencies是开发时的依赖。
第四步，安装webpack-cli:
注意：如果安装的是webpack v4+版本，则还需要安装webpack-cli或者webpack-command，否则webpack命令运行不了。执行：
D:\webpack>npm install --save-dev webpack //卸载本地安装的webpack-cli
up to date, audited 79 packages in 7s
9 packages are looking for funding
run npm fund for details
found 0 vulnerabilities
D:\webpack>npm install -g webpack-cli//全局安装webpack-cli
added 119 packages in 2m
16 packages are looking for funding
run npm fund for details
D:\webpack>npm install --save-dev webpack-cli //把webpack-cli安装到devDependencies
added 41 packages, and audited 120 packages in 4s
16 packages are looking for funding
run npm fund for details
found 0 vulnerabilities
package.json:
{
"name": "webpack",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.90.1",
"webpack-cli": "^5.1.4"
}
}
3.项目实例
work.js:
document.write('热烈欢迎学习webpack入门教程')
app.js:
var dt = require('./work.js')
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div>test</div>
<script src ='./dist/main.js'></script>
</body>
</html>
在命令行中执行：webpack 项目入口文件的地址
D:\webpack>webpack --mode=development ./src/app.js
asset main.js 2.44 KiB [emitted] (name: main)
./src/app.js 29 bytes [built] [code generated]
./src/work.js 55 bytes [built] [code generated]
webpack 5.90.1 compiled successfully in 96 ms
打包成功！
打包成功后，就会在项目目录下多出一个dist文件夹，里面有个main.js，index.html中
posted on 2024-10-18 16:12 liangfengshuang 阅读(1) 评论(0) 编辑 收藏 举报
