这周的话,主要是看了webpack5是教程,然后还复习一些其他的内容,最近两天的话发现知识它不进脑子。其实看了一些之前学的html和css的知识(再一个写题的网站上),但是我发现有很多问题没见过。总的来说,这周过得很平静,这样就刚好,下周希望继续保持。
1.Webpack是什么?
是一个模块化打包工具,将不同的资源和文件,进行打包,合并进一个文件里面。
就是分析你的项目结构,找到javascript模块以及其他的一些浏览器不能直接运行的拓展语言(sass,typescritp),并将其转换和打包为合适的格式给浏览器浏览。
2.webpack作用
(1)重新加载编译,将浏览器不认识的语法编译成浏览器认识的语法。less编译成css,ES6语法转换成ES5
(2)减少io请求,发送请求,会发挥一个html到浏览器,这时,打开控制台发现html页面通过scritp,link等标签引用的静态,浏览器再次发出请求获取这些资源。webpack打包,将所有静态资源都合并好了,减少io请求
3.webpack五个核心概念
入口(entry):要打包哪个文件
出口(output):要打包到哪里
加载器(loader):加载除了js文件其他文件的功能
插件(plugins):处理加载器完成不了的功能,使用插件
模式(mode):生产模式production和开发模式development
- 开发模式:仅能编译JS中的
ES Moudle
语法 - 生产模式:能编译JS中的
ES Moudle
语法,还能压缩JS代码
- 开发模式:仅能编译JS中的
4.开始使用
1.项目目录
webpack_code # 项目根目录(所有指令必须在这个目录运行)
└── src # 项目源码目录
├── js # js文件目录
│ ├── count.js
│ └── sum.js
└── main.js # 项目主文件
2.创建文件
- count.js
export default function count(x, y) {
return x - y;
}
- sum.js
export default function sum(...args) {
return args.reduce((p, c) => p + c, 0);
}
- main.js
import count from "./js/count";
import sum from "./js/sum";
console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
3.初始化
来到项目根目录webpack_code
,运行npm init -y
指令,会生成一个基础的package.json
文件。
文件内容如下所示:
{
"description": "",
}
4.下载依赖
npm i webpack webpack-cli -D
5.webpack配置文件
在项目根目录webpack_code
下新建文件webpack.config.js
// Node.js的核心模块,专门用来处理文件路径
const path=require("path");
module.exports = {
// 入口文件
entry:"./src/main.js", //相对路径和绝对路径都可
// 输出
output:{
// path:文件输出目录,必须是绝对路径
// path.resolve()方法返回一个绝对路径
// __dirname:当前文件的文件夹绝对路径
path:path.resolve(__dirname,"dist"),
filename:"main.js",//输出文件名
},
// 加载器
module:{
rules:[],
},
// 插件
plugins:[],
// 模式
mode:"development",
};
运行指令npx webpack