自看杂记——webpack笔记

1.webpack的初步使用和使用配置文件简化打包
前提：
npm i webpack
npm i webpack-cli
npm init初始化项目，使用npm管理项目中的依赖包
npm i jquery
npx webpack ./src/main.js -o ./dist/bundle.js --mode development
如果想通过npx webpack来实现打包，设置webpack.config.js如下所示，最后输入npx webpack

2.使用webpack-dev-server来实现自动打包 编译的功能

解决方式：见大佬博客
事情总是不是一帆风顺的，后面又出现了错误：
Error: Cannot find module ‘webpack-cli/bin/config-yargs’
解决方式：
运行npm run dev: webpack-dev-server --inline，出现报错的话，应该是webpack-dev-server的版本不兼容，进行降版本操作： npm install webpack-cli@3 --save-dev
最后的版本信息如下：

成功运行：

随着项目的改变，ctrl+s保存后，实时监听打包：

但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中，并没有存放到实际的物理磁盘上，我们可以认为webpack-dev-server把打包好的文件，以一种虚拟的形式，托管到了项目的根目录中，虽然看不到它，但是可以认为和dits、src、node_modules平级，叫做bundle.js。
把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快。
这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，此时引用不到bundle.js文件，需要修改index.html中script的src属性为:<script src="../bundle.js"></script>
为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录： “dev”: “webpack-dev-server --contentBase src”
同时修改index页面中script的src属性为<script src="bundle.js"></script>
1）配置dev-server命令参数的第一种形式：在package.json中

2）配置dev-server命令参数的第二种形式：在webpack.config.js中。第二种形式比较麻烦，一般采用第一种

3.使用html-webpack-plugin插件配置启动页面
由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐使用html-webpack-plugin插件配置启动页面.

4.使用webpack打包css文件




注意：webpack处理第三方文件类型的过程：
1.发现这个要处理的文件不是JS文件，然后去配置文件中查找有没有对应的第三方loader规则
2.如果能找到对应的规则，就会调用对应的loader处理这种文件类型
3.在调用loader的时候，从后往前调用，即上图中css-loader调用后给style-loader
4.当最后一个loader调用完毕会把处理的结果直接交给webpack进行打包合并，最终输出到bundle.js中去

5.使用webpack打包less文件




因为less也是样式，所以第三方loader也需要style-loader和css-loader。

6.使用webpack打包scss文件以及处理css中的url路径问题


按照蓝色框框写报404错误如下，改成绿色框框，图片可以正确加载出来




最后显示结果如下：

7.使用webpack来使用bootstrap
网址：https://www.bootcss.com/





结果：

8.使用babel处理高级语法