开始使用Webpack

这周的话，主要是看了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代码

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