构建工具

• 当我们习惯了在node中编写代码的方式后，再回到前端编写html、css、js这些东西会感觉到各种的不便。比如：不能放心的使用模块化规范(浏览器兼容问题)，即使可以使用模块化规范也会面临模块过多时的加载问题。
• 我们就会迫切的希望有一款工具可以对代码进行打包，将多个模块打包成一个文件。这样一来即解决了兼容性问题，又解决了模块过多的问题。
• 构建工具就起到这样一个作用，通过构建工具可以将使用ESM规范编写的代码转换为旧的JS语法，这样可以使得所有的浏览器都可以支持代码。

Webpack

1.使用步骤：

① 初始化项目 npm init -y

② 安装依赖 webpack 、webpack-cli

npm add -D webpack webpack-cli (为什么要加-D?表示安装是一个开发依赖，开发依赖的意思是仅在开发的时候用，没有它项目也可以运行，在这里webpack只是用来打包的,所以加-D)

开发依赖：帮助程序员加工代码的库，都是开发依赖 生产依赖：帮助程序员实现功能效果的库，都是生产依赖

【这个cli的含义是命令行接口工具，因为我们无法和webpack直接沟通，这个cli就是通信媒介】

③ 在项目中创建src目录，写一个index.js文件，然后编写代码

④ 执行 npx webpack 来对代码进行打包（打包的时候默认是从index.js文件开始的）

也可以手动添加(package.json文件夹中)：

然后执行命令： npm run build，在打包完成后的dist文件中写一个index.html文件，引入打包完成的main.js文件，如下图所示：

defer的意思是延迟加载,页面加载完成之后再加载js(如果js操作了dom元素，而且在head中引入，就加上这个属性，或者是不加defer，把<script>标签写在boay中)

2. mode

开发模式与生产模式打包的代码的不同：

开发模式打包的代码是语义化的，没有压缩的 生产模式打包的代码是不语义化的，压缩过的，是为了缩小体积上线方便

 module.exports = {
     mode: "production", //设置打包模式，production表示生产模式 development 开发模式
 }

3. entry

在文件夹下新建webpack.config.js文件夹：

    // 除src文件外，其他文件要按照node语法写
    module.exports = {           
            // 用来指定打包时的主文件，默认 ./src/index.js, 一般不改(约定优于配置)
            // entry: "./hello/hello.js",

            // 可以传数组，将两个文件打包成一个
            // entry: ["./src/m1.js", "./src/m2.js"],

            // 以对象形式打包两个文件，会打包成两个文件
            // entry: {
            // 	m1: "./src/m1.js",
            // 	m2: "./src/m2.js",
            // },
    };

4. Output

//引入Node中一个内置的path模块，专门用于解决路径问题
const path = require("path");

module.exports = {
	// 配置代码打包后的地址
	output: {
		filename: "bundle.js", // 打包后的文件名
		clean: true, // 自动清理打包目录(path是谁，就会清理谁)
		path: path.resolve(__dirname, "hello"), // 指定打包的目录，必须要绝对路径
	},
};

5. Loaders

webpack只会负责js中的模块化语法转为es5，例如import等，但是像箭头函数这些是默认不支持的，webpack直接打包也会报错，因为它不支持打包css，需要使用loader。

• src目录下的index.js文件：

    // 想在js文件里导入css文件的话，import 'xxx/xx.css'就好
    import "./style/index.css";
    document.body.insertAdjacentHTML("beforeend", "<h1>今天学webpack了</h1>");

    // 引入图片
    import img from "./assets/1.jpg";
    document.body.insertAdjacentHTML("beforeend", `<img src="${img}" />`);

• src目录下的style目录下的index.css文件：

    h1 {
	background-color: palegreen;
    }

• webpack.config.js文件：

loader执行顺序：从后往前，先引入css-loader，再用style-loader让样式生效

打包图片资源要通过指定类型来处理

module.exports = {	
	// webpack默认情况下，只会处理js文件，如果我们希望它可以处理其他类型的文件，则要为其引入loader
	// 以css为例：
	// 使用css-loader可以处理js中的样式
	// 1.安装： npm install --save-dev css-loader -D （-D表示用来打包使用的）
	// 2.配置：
	module: {
            rules: [
                {
                    test: /\.css$/i, // 需要传一个正则表达式
                    // use: "css-loader",
                    use: ["style-loader", "css-loader"],
                },
                {
                    test: /\.(jpg|png)$/i, // 正则表达式 | 或
                    type: "asset/resource", // 图片资源类型的数据，可以通过指定类型type来处理
                },
            ],
	},
};

打包完成后运行到浏览器的效果：

6. _babel

在编写js代码时，经常需要使用一些js中的新特性，而新特性在旧的浏览器中兼容性并不好，此时就导致我们无法使用一些新的特性。

但是我们现在希望能够使用新的特性，我们可以采用折中的方案，依然使用新特性编写代码，但是代码编写完成时，我们可以通过一些工具将新代码转换为旧代码。

babel就是这样一个工具，可以将新的js语法转换为旧的js，以提高代码的兼容性。

我们如果希望在webpack中使用babel，我们需要向webpack中引入babel的loader。

使用步骤：

• 安装 npm install -D babel-loader @babel/core @babel/preset-env webpack
• 配置

    module: {
        rules: [
            {
                test: /.(?:js|mjs|cjs)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', { targets: "defaults" }]
                        ]
                    }
                }
            }
        ]
    }

• 在package.json中设置兼容列表(兼容哪些浏览器)

    "borwserslist": [
            "defaults"
    ]

github.com/browserslis…

7. 插件(plugin)

插件用来为webpack来扩展功能。

html-webpack-plugin：这个插件可以在打包代码后，自动在打包目录生成index.html

使用步骤：

• 安装依赖npm install --save-dev html-webpack-plugin
• 配置

// 引入html插件
const HTMLPlugin = require('html-webpack-plugin')

module.exports = {
    plugins: [
	new HTMLPlugin({
            title: "Hello Webpack!" // 还可以配置一些属性
        })
    ],
}

loader会对代码进行编译，改变代码的状态，而插件不会。

8. 开发服务器

文件监听是在发现源码变化时，就自动构建生成新的输出文件。

开启webpack中的文件监听有两种方式：

• 在启动webpack命令打包时，加上--watch参数

  • 第一种： npx webpack --watch
  • 第二种：配置script脚本，运行 npm run watch，缺点是文件更新后要手动刷新浏览器

      "scripts": {		
  	"build": "webpack",
  	"watch": "webpack --watch"
      },
  

• 在webpack.config.js文件中，设置 watch:true

---

安装一个webpack开发服务器

① 安装命令：npm add -D webpack-dev-server

② 运行命令：npx webpack serve 或者 npm run build serve(根据script中的配置而使用npm run命令)。 在后面再加上 --open的话，意思是自动在浏览器中打开。

    "scripts": {
        "build": "webpack",
	"watch": "webpack --watch"
        "dev": "webpack serve --open",
    },

然后就可以执行命令了：npm run dev。【当我们使用服务器开发的时候，不会打包dist文件，它会直接打包到服务器，所以我们要手动打包一下 npm run build或 npx webpack，不然部署到服务器的时候dist文件的内容不是最新的】

③ 项目运行在一个服务器上，在index.js文件中添加新的代码时，点击保存后，文件会自动构建，浏览器会自动刷新。

9. _sourceMap

运行的是开发模式打包后的代码，但是设置代码映射之后，调试的时候可以对源码进行调试。

module.exports = {
    devtool: "inline-source-map" // 配置源码的映射
};

Vite

• Vite也是前端的构建工具

• 相较于webpack，vite采用了不同的运行方式 ESM与Vite

  • 开发时，并不对代码打包，而是直接采用ESM的方式来运行项目(什么叫基于ESM? ES Module是ES6推出的模块化方案，它支持使用import、export语法直接导入、导出模块，让其可以在浏览器上直接运行)
  • 在项目部署时，才对项目进行打包

• 除了速度外，vite使用起来也更加方便

  • 安装开发依赖：npm add -D vite
  • vite的源码目录就是项目的根目录（新建 index.html文件）

  

  • 运行：npx vite命令的作用是启动一个开发服务器(重新保存就会自动刷新浏览器页面)

  

  • 打包代码：npx vite build

  

  • 打包后的项目运行有两种方式 ①把dist文件夹放在服务器根目录下启动项目 ②用命令npx vite preview预览打包后的代码（与npx vite命令有很大不同）

  ---

  ---

  vite中使用插件