webpack（个人学习笔记）

最新推荐文章于 2024-06-14 08:40:42 发布

爱穿裤子的云

最新推荐文章于 2024-06-14 08:40:42 发布

阅读量184

点赞数

分类专栏：构建工具文章标签： webpack javascript

本文链接：https://blog.csdn.net/weixin_47369373/article/details/128138987

版权

构建工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

一、webpack
二、vite

构建工具：将使用ESM规范编写的代码转换为旧的JS语法，这样可以使得所有的浏览器都可以支持代码。

一、webpack

webpack是基于入口的静态模块打包工具，会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件。
当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

1.entry入口

告诉webpack从哪个文件开始打包，入口文件的路径是相对于当前文件（webpack.config.js）的路径。

module.exports = {
  entry: './src/index.js' // 默认值
};

2.output出口

告诉webpack打包后的文件以什么名字输出到什么地方

const path = require('path');
output: {
    path: path.resolve(__dirname, 'dist'), // 打包后所有资源输出的根路径
    filename: 'my-first-webpack.bundle.js', //打包后的JS文件输出文件名（可以携带路径）
  },

3.loader

webpack只支持js、json文件，所以通过 import 导入任何类型的模块（例如 .css 文件），其他打包程序或任务执行器的可能并不支持

 module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },

4.plugin插件

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

5.mode模块

通过选择 development（开发者模式）, production（生产者模式）或 none 之中的一个，来设置 mode 参数，可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
开发者模式不会压缩代码

module.exports = {
  mode: 'production',
};

6.babel

在编写js代码时，经常需要使用一些js中的新特性，而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。
但是我们现在希望能够使用新的特性，我们可以采用折中的方案。依然使用新特性编写代码，但是代码编写完成时我们可以通过一些工具将新代码转换为旧代码
babel就是这样一个工具，可以将新的js语法转换为旧的js，以提高代码的兼容性，如果希望在webpack支持babel，则需要向webpack中引入babel的loader

npm install -D babel-loader @babel/core @babel/preset-env

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

在package.json中设置兼容列表

"browserslist": [
        "defaults"
 ]

https://github.com/browserslist/browserslist

7.webpack-dev-server开发服务器

在开发阶段，遇到的问题是打包、运行、调试过程过于繁琐，我们可以把最终生成的代码和页面部署到服务器上，来模拟真实环境。
webpack官方制作了一个单独的库：webpack-dev-server。既不是plugin也不是loader，为当前项目开启一个服务器，将其中的文件放入到该服务器中供我们进行访问，并且还会隐式的在项目的根路径下生成一个bundle.js文件，该文件就是编译后的js文件，并且我们每修改入口文件并保存时，该文件都会自动被编译后更新到服务器上。

npm i webpack-dev-server -D

// package.json
"scripts": {
	"build": "webpack", // build 命令调用 webpack 命令。默认情况下，webpack 命令会根据根路径下的 webpack.config.js 文件作为配置，进行打包
	"watch": "webpack --watch", // 开启watch模式，执行一次编译多次，只要修改了相关的文件，就会重新触发编译，适合多次反复调试的情况。
	"dev": "webpack server --open --port 3000" // webpack server为我们的当前的项目开启一个服务器	--open自动打开浏览器， --port 3000指定端口为3000
}

二、vite

开发时，并不对代码打包，而是直接采用ESM的方式来运行项目；在项目部署时，再对项目进行打包。

webpack和Vite的区别：

webpack：分析依赖=> 编译打包=> 交给本地服务器进行渲染
首先分析各个模块之间的依赖，然后进行打包，在启动开发服务器，请求服务器时，直接显示打包结果。webpack打包之后存在的问题：随着模块的增多，会造成打出的 bundle 体积过大，进而会造成热更新速度明显拖慢。
vite: 启动服务器=> 请求模块时按需动态编译显示
vite相较于webpack没有打包过程，而是直接启动了一个开发服务器，vite劫持了浏览器的http请求，在后端进行响应的处理，将项目中使用的文件通过简单地分解与整合，然后再返回给浏览器，整个过程没有对文件进行打包编译，所以编译速度很快，需要打包的时候vite使用Rollup配置。