尚硅谷wepack课程学习笔记

为什么需要使用打包工具？

开发时使用的框架、es6 语法 、less 等浏览器无法识别。
需要经过编译成浏览器能识别的css、js才可以运行。
打包工具可以帮我们编译，号可以做代码压缩、兼容处理、性能优化。

常见的打包工具有什么？
vite、webpack、glup、grunt

webapck最基本的使用?
是一个静态资源打包工具，以一个或多个文件为打包入口，将项目中所有文件编译组合成输入一个或多个文件。这个输出的文件我们交budle，他就是经过编译可以在浏览器运行的文件。

webpack本身的功能是有限的？
开发模式：仅仅编译js modle语法
生产模式：编译js modle语法、压缩js代码

package.json 是什么文件？
通常我们需要安装一些依赖包，而在下载这个包之前，我们需要包描述文件。通常描述这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证、如何启动项目、运行脚本等元数据。
package.json 一般在项目创建之初创建。创建方式可以手动（直接在项目根目录新建一个 package.json 文件）、也可以npm init -y 初始化一个，y 就是要使用配置的默认值
package.json文件就是一个JSON对象，该对象的每一个成员就是当前项目的一项设置

练习步骤：
1、新建一个包，名称不能和webpack重复
2、创建基本的mani.js 文件、src、public文件、写入es6 模块化语法，报错，浏览器无法识别。
3、试试使用webpack 后能否识别呢？无法解析modle语法
4、引入之前需要初始化一个包描述文件 npm init -y
5、npm install webpack webpack-cli --save-dev
6、安装成功后执行npx webpack ./src/main.js --mode=development ,npx 会将node—module 的bin 下面的内容临时添加到环境变量。
7、执行上面即可打包了。默认输出到dist，可以观察输出文件，是编译后的文件。
8、npx webpack ./src/main.js --mode=production 生产模式，会压缩代码

webapck的五大核心概念
入口entry
输入output
loader webpack本身只能处理js、json等资源，其他资源需要借助loader
plugin 拓展功能
mode 模式：生产、开发

练习步骤：
1、安装好之后建一个webpack的配置文件，在根路径下，并且文件名必须是webpack.config.js
2、添加基本配置
3、我们之前打包执行的是npx webpack ./src/main.js --mode=development 这个命令，写了webpack的配置文件中设置了入口后，可以直接使用npx webpack 执行了。上面是使用cli的方式运行本地的webpack，但这样还是有些麻烦。
4、在 package.json 文件中添加一个 npm script： “build”: “webpack”
现在，可以使用 npm run build 命令替代之前使用的 npx 命令。注意，使用 npm scripts 便可以像使用 npx 那样通过模块名引用本地安装的 npm packages。
拓展，可以学习下npm中文文档

资源管理
1、使用style样式，需要借助loader
2、npm install --save-dev style-loader css-loader
3、添加配置，参考官网

1、使用less资源
2、npm install less less-loader --save-dev
3、添加配置，参考官网

1、图片资源的使用
2、不需要要下载，使用内置的asset即可。资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。``关于这块配置webpack官网介绍
3、添加配置，
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: ‘asset/resource’,
},

1、对文件的加载，如 JSON 文件、CSV、TSV 和 XML。
2、npm install --save-dev csv-loader xml-loader
3、添加配置，参考官网

调整文件打包输出目录
每一次打包都会在dist下多一些文件，而且很混乱。我们在下一次打包之前手动删除dist，再重新打包。
并设置输出路径，文件资源可设置输出路径。

   generator: {
          filename: 'asset/[hash:10][ext][query]'
   }

可不可以不每次都需要手动删除呢？
能不能自动清除dist文件上次内容？可以，在output 对象中配置clean：true 即可。

发现问题：
1、原本html中引入的js资源是这么写的

引入的是打包后的文件，如果更改入口起点的名称，或者添加一个新的入口，那么会在构建时重新命名生成的 bundle，但是 index.html 仍然在引用旧的名称！我们可以使用 HtmlWebpackPlugin 来解决这个问题。

处理js资源
webpack对于js资源的处理是有限的，只能处理model语法，对于es6新语法不兼容，我们需要使用babel
在转换之前先介绍一下eslint ，用于检查jx和jsx语法的工具。更多介绍eslint官网

在webpack中使用eslint
1、npm install eslint-webpack-plugin --save-dev
2、npm install eslint --save-dev
3、添加配置，参考官网

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new ESLintPlugin({
      context:path.resolve(__dirname,'src'),
    })]
  // ...
};

4、运行起来报错，缺少eslint的配置文件。我们在根目录下新建 .eslintrc.js 文件名不能改。
然后具体的配置可以参考官网，可以继承推荐的默认配置。

5、发现dist下定义的文件也被eslint 检查了，但我们并不需要检查这些文件。在根目录下创建一个 .eslintignore 文件，写上需要忽略的文件路径即可。

在webpack中使用babel

关于bable的介绍可以看bable官网
1、npm install -D babel-loader @babel/core @babel/preset-env webpack
2、配置，参考官网 bable配置
3、配置可以直接写在webpack的配置文件中，也可以在根目录创建 babel.config.js 配置。