| title | date |
|---|---|
05-webpack串讲 |
2023-07-26 |
介绍：
我们之前写项目，使用的vue-element-admin也是基于webpack的，之前我们通过vue-cli创建的项目也是基于webpack的。今天我们需要自己去搭建开发环境，不使用官方提供的脚手架。
总结：
- webapck是一个构建工具，是基于node的，电脑上必须安装node，node版本需要大于16
- 打包器，是从入口开始，按照模块依赖进行打包，最终得到浏览器的可以识别的静态资源。
- 从某种程度来说，webpack代表的是一种架构能力。
创建一个文件夹，如下：
初始化一个配置文件，如下：
安装本次课程所需要的依赖，如下：
依赖如下：
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.22.1",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-decorators": "^7.22.3",
"@babel/preset-env": "^7.22.4",
"@babel/preset-react": "^7.22.3",
"babel-loader": "^9.1.2",
"css-loader": "^6.8.1",
"eslint": "^8.41.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-webpack-plugin": "^4.0.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.1",
"mini-css-extract-plugin": "^2.7.6",
"sass": "^1.62.1",
"sass-loader": "^13.3.1",
"style-loader": "^3.3.3",
"url-loader": "^4.1.1",
"vue-loader": "^15.8.0",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.7.14",
"webpack": "^5.84.1",
"webpack-cli": "^5.1.1",
"webpack-dev-server": "^4.15.0"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"vue": "^2.7.14",
"vue-loader-plugin": "^1.3.0",
"webpack-merge": "^5.9.0"
}
}安装之，如下：
现在，就安装webpack，webpack-cli。webpack是核心包，提供了很多的API，插件。后面我们要用到这些API和插件。webpack-cli提供了很多命令。
我们有两种安装方式，第一种，全局安装, (不推荐)，全局安装相当它把当成一个工具进行安装了。如下：
- cnpm i webpack -g （不需要操作）
- cnpm i webpack-cli -g （不需要操作）
第二种，就是在项目中安装（推荐，刚开始全局安装过了），如下：
- cnpm i webpack -D // -D表示开发依赖
- cnpm i webpack-cli -D
测试你的webpack是否安装成功，如下：
学习webpack，就是学习一堆的配置，这些配置你也不需要记，官方说，你要配置，需要在项目的根目录下面创建一个webpack.config.js文件，如下：
开始打包，如下：
看一下，打包后文件，如下：
现在指定mode，如下：
再次打包，如下：
再次看一下打包后的文件，如下：
需要webpack.config.js文件名变了，打包时，需要手动指定，如下：
还可以配置一个脚本，如下：
运行脚本，如下：
cnpm run build
npm run build需要通过yarn，是不需要run，直接yarn build就OK。
入口有三种写法，上面的是第一种写法，使用的是相对路径，也可以使用绝对路径，如下：
入口还可以写成对象的形式，如下：
看一上vue打包后资源如下：
然后指定出口，如下：
测试如下：
出口必须指定绝地路径，如下：
最好还是叫dist，有的地方，叫build，我们就叫dist。也可以在出口中指定打包后的文件叫什么，如下：
说一下单词，如下：
filename可以指定一个格式化字符串，可以指定hash值，如下：
说白了，输入的JS模块所依赖的源码发生了变化，打包时，hash值也会发生变化，用于解决浏览器缓存导致页面不刷新的问题。
能不能把打后的js文件，放到js文件夹下面的，可以的，如下：
前面打包是把包打包到硬盘上的。在开发时，需要配置一个开发服务器，这个开发服务器可以直接让我们在内存中打包，速度是远远高于硬盘的。我们之前用的脚手架，都是在内存中打开。
安装一个开发服务器，叫webpack-dev-server，如下：
安装之，如下：
配置之，如下：
之前打包是使用webpack进行打包的，直接是在硬盘上的打包，现在我们需要使用内存打，如下：
访问之，如下：
可以配置一个脚本，如下 ：
执行脚本，如下：
创建一个页面，如下：
我们在内存中打包，如下：
访问之，如下：
你要知道，你刚才是内存打包，在内存是有打包后的js文件的，能不能把打包的的js插入到上面的页面中呢？看一下，如下 ：
结论，并没有把打包后的js文件，插入到页面中，那个我们就使用一个插件，叫html-webpack-plugin，如下：
之前已经安装完了。
使用之，如下：
再次在内存中打包，如下：
测试之，如下：
在硬盘上打包试一下，如下：
再一下vue脚手架，如下：
打包分两种，一种是开发时的打包，一种是生产时的打包。不同的打包方式，是有不同的配置的，现在有两种打包方式，也就是说有两种配置，但是这两种配置中有一些公共的配置，把这些配置区分出来，创建如下的文件，如下：
先写公共的配置，如下：
开发配置，如下：
生产配置，如下：
在webpack.config.js中使用之，如下：
配置脚本，如下：
在webpack.config.js中就可以得到env，如下：
简写如下：
不能使用原生js合并，需要使用来合并，如下：
使用之，如下：
测试之，如下：
之前，在硬盘上打包，都会生成dist，下一次打包还会生成dist，但是之前dist下面的文件并不会自动删除，如果你想每一次打包都删除上次dist下面的文件，配置如下：
注意一点：如果源码没有变，打包后的app.xxxxxx.js也不会变，只有源码变了，才会生成新的文件。
接下来，讲webpack-html-plugin这个插件。看官网：
上午我们已经安装这了，并使用了。如下：
上面配置了template，是用来指定页面的位置，可以使用绝对路径，如下：
默认它把打包后js插入到了head标签中，打包查看如下：
配置把js文件插入到body结束标签之前，如下：
测试如下：
还可以做一些基本的配置，如下：
还需要在页面中title标签位置写如下代码：
重新打包，测试如下：
还可以配置一个小icon，制作一个icon，如下：
重新打包，测试之，如下：
是webpack内置的插件，如下：
使用之，如下：
再次打包，如下：
配置hander，如下：
在入口中写一点ES6+的代码如下：
打包，测试浏览器能不能识别，如下：
发现，谷歌浏览器可以识别。但是有的浏览器是不认识的。再一个更新的语法，如下：
在内存中打包，如果源码变了，会自动重新打包，如下：
也就是说，webapck对于ES6+中的一些语法，它也不能直接转化成ES5，不能转化成ES5，浏览器对ES5的兼容性是最好，我们需要使用loader，loader就是把webpack不能识别的模块，转化成webpack可以识别的模块。如下：
JS模块中有高级语法，高级语法，如何转化成低级语法，让webpack识别呢？
答：最最最最最厉害的就是babel。
要使用babel，就需要安装babel，如下：
安装之，如下：
配置配置，如下：
再次打包，如下：
ES6中的语法，非常多，你要转化语法，需要安装对应插件，如你要把箭头函数转化成普通函数，那你就需要安装一个箭头函数转普通函数的插件，如你要把let转化成var，你需要安装一把let转成var的插件。也就说如果项目中用到了非常多的ES6语法，都需要转化，那就可以安装500个插件，babel给我们封装了很多预设，预设是插件集合，也就是集合中包含了很多的插件，如有一个预设，它可以把ES6中的大部分语法，转化成ES5，这个预设叫@babel/preset-env。预设并不是转化所有语法，仅仅是大部分的，个别语法转化不了，需要单独安装插件。我们先去安装 预设，如下：
然后需要配置，如下：
再次打包，如下：
说明，你上面使用的预设不能打包装饰器，需要单独去安装对应的插件（打补丁），如下：
安装如下：
配置如下：
安装完后，打包如下：
后面我们需要学习一堆的loader，去转化不同的模块(使用loader来处理)。
- .js
- .vue vue-loader
- .jsx
- .ts
- .png
- .less
- .sass
- .css
- .json
- .....
后面我们也需要学习一堆的插件，插件是用来增强webpack。
react也是一个模块，如下：
看一下版本，如下 ：
安装之，还需要安装一个react-dom模块，如下：
创建一个App.jsx组件，如下：
在main.js中引入，并渲染，如下：
打包main.js，你要知道，main.js中引入了一个jsx模块，如下：
说明，webpack，默认情况下是不能处理jsx文件的，此时，就需要使用babel进行编译，说到babel就要想到预设和插件，此时，jsx就需要一个预设来处理，如下：
安装预设，如下：
进行配置，如下：
再进行打包，如下：
还需要配置一个loder，如下：
再次打包，如下：
重新查看访问之，如下：
到此，打包jsx（react中的组件）就OK了，你可以尝试打包一下vue文件，你就创建一个App.vue，尝试打包，100%打包不成功。因为webpack压根不认识.vue文件，你需要安装对应的loader和预设，使用loader加载你的.vue文件，使用预设去翻译你的vue代码。
先看一个问题，代码如下：
看一下控制台，如下：
如果想让代码的报错位置正确，需要配置一个devtool，如下：
不同的配置代表的含义是不一样的。配置如下：
此时报错的位置和控制台中就保持一样的了，如下：
在生产中，可以不去配置source-map，上线的也是打包后的代码，可以不配置，也可以配置 ：
在硬盘上打包，如下：
分析：
如何把某些包放到全局中，此时需要使用ProvidePlugin，如下：
配置之，如下：
动了配置文件，需要重新打包，再去访问之，如下：
打包时，我们不希望webpack去打包node_module，配置如下：
现在尝试去打包，如下：
分析之，如下：
你可以看一下，你之前，打包vue，生成的js文件，如下：
现在就需要把第三方包抽离出来，如下：
再次打包如下：
写一点样式，如下：
在入口文件中，引入css文件，如下：
不用想，webpack肯定不能加载css文件，肯定是需要一个loader进行加载的，测试如下：
此时，就需要安装对应的loader，如下：
对css模块处理，需要安装两个laoder，如下：
开始配置，如下：
看浏览器控制台：
在生产打包时，需要把css抽离出来，此时我们需要用到一个插件，这个插件中带了一个loader，安装一下：
之前安装过了，如下：
配置如下：
打包如下：
在内存中打包如下：
测试如下：
现在希望把打包后的样式放到css文件夹，并且加上hash值，解决缓存问题，如下：
打包如下：
测试如下 ：
也就是说，在开发时，样式，采用的是内部样式，在上线时，样式采用的是外部样式。
然后打包scss，创建scss文件，如下 ：
在入口文件中，引入，如下：
尝试打包，如下：
此时，就需要使用sass-loader来加载编译scss代码，安装如下：
配置如下：
看一下，是否可以处理scss代码，浏览器测试之，如下：
同理，如果是less也是一样的，需要使用less-loader来处理。
在webpack眼中，一切都是模块，图片当然也是模块。准备一张图片，如下：
在App组件中，使用图片，如下：
测试如下：
在webpack4中，有两个laoder可以处理，在wabpack5中这两个laoder就淘汰了，这两个laoder如下：
- url-loader
- file-loader
我们还是简单去演示一下，如何使用，安装之如下：
配置如下：
测试如下 ：
在硬盘上打包如下：
生成的文件如下：
使用url-loader再测试一下，url-loader比file-loader更强大，如下 ：
打包如下：
在内存上测试如下：
当时，url-loader也可以配置，配置成是事要打包成字符串。这个自行学习。参考代码如下：
{
test: /\.(png|jpg|svg|gif|jpeg|webp)$/, use: [
{
loader: 'url-loader',
options: {
// limit单位是字节 1个字节 = 8位
// 1KB = 1024个字节
// 1MB = 1024KB
limit: 1024 * 50, // 如果图片小于50kb，打包字符串，如果图片大于50kb，打包成图片
name: 'img/[name].[hash:8].[ext]'
}
}
]
},在webpack5中上面的两个laoder就淘汰了，对于图片的处理，webpack都内置好了，处理如下：
打包如下 ：
可以进一步优化如下：
打包完，测试后，如下：
eslint是用来进行代码检测。也非常重要，在很多公司，都是要求使用eslint的，如果代码写的不符合要求，有可能代码就提交到不到仓库。在很早之前，有一个laoder，叫eslint-loader来校验代码，现在这个laoder已经淘汰了。现在使用的是一个插件，如下：
安装之，如下:
还需要安装eslint，eslint里面包含了很多的校验规则，安装如下：
这个插件不能进行校验，这个插件是把eslint集成到webpack中的。代码校验是在开发时进行校验的，配置就需要配置到开发环境中，如下：
尝试打包一下，如下 ：
在浏览器中看效果如下：
上面的插件仅仅是把eslint集成到webpack中，对于eslint的配置文件，还需要单独配置，打开eslint的官网，如下：
创建eslint的配置文件，有多种方式，创建一个eslint的配置文件, 如下：
只要动了配置文件，都需要重启开发服务器，如下：
测试如下：
尝试添加一些规则，如下：
看浏览器，如下：
修改之如下：
再次测试之，如下：
注释掉刚才的规则，如下：
现在尝试不加分号，如下：
动了配置文件，需要重启服务器，测试如下 ：
eslint中都有哪些规则呢？如下：
https://blog.csdn.net/qq_51657072/article/details/124427270
再尝试使用一个，如下：
现在在代码中就写一个console，如下：
重启服务器，测试如下：
修改之，如下：
测试如下：
还需要知道，在控制台中也会给出提示，如下：
可以关闭规则，如下：
如果是警告提示，不弹出模态框，如下：
配置如下：
规则如下 ：
重启，测试如下：
对于react代码中的jsx的校验，eslint规则并不完善，有一个公司，推出一个校验包，叫eslint-config-arbnb，如下：
直接下载eslint-config-airbnb不好下载，需要把它内置的其它都下载下来，如下：
之前都下载完了，如下：
集成airbnb对react代码的检测，如下：
使用React写一个计数器，如下：
此时，再打包，会报大量的错误，如下：
如果不想让eslint检测我们的src下面所有的代码，可以创建一个.eslintignore的配置文件，如下：
在eslint中提供了一些注释，可以忽略对某一行或某一片代码的查检，如下：
遇到了错误，怎么办？
总结解决eslint后错的方式：
- 创建一个eslint的配置文件，修改rules，rules是自定义规则。
- 使用eslint注释，非常多，临时地忽略检测
- 在项目的根目录下面创建一个.eslintignore的文件，里面写src/*，可以忽略对src下面的所有的文件的检测
- 老老实实找到错误的位置，把代码写规范了，前提是需要熟悉公司中使用了哪些规则
最后说一下，对于ES6中新的语法检测，还有一个包，叫@babel/eslint-parser。需要安装：
配置如下：
创建vue脚手架创建项目，如下：
弹出vue脚手架中webpack的配置，如下：
配置如下：
使用之，如下：
效果如下：
参考地址：https://blog.csdn.net/qq_40412456/article/details/122334286
创建App.vue组件，如下：
在main.js中引入Vue，渲染Vue组件，如下：
尝试打包，如下：
安装依赖：
这些依赖之前都安装好，如下：
配置如下：
尝试打包，如下：
自行研究
自行研究
看八股文篇章