webpack打包css，img，html文件

yarn init -y
yarn add webpack webpack-cli
// 命令行输入
npx webpack --entry ./src/main.js --output-path ./dist 

1. 文件目录

2. 新建index.html文件

3. 新建index.css文件

4. 新建main.js

5. 新建add.js文件

6. 新建zanlan.config.js

7. package.json

8. yarn add css-loader style-loader

9. css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中

10. 如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader；

11. 上面这些代码是最基本的例子，打开html文件，展示结果为

12. 处理less样式的 yarn add less less-loader,可以npx less ./src/css/component.less > component.css,但是在webpack中用需要装less-loader

13. 新建less.less文件，导入到main.js，在index.html文件新建boss的div

14. loader链式调用，是从后往前逆序的

15. zanlan.config.js

16. 不同浏览器，css样式存在兼容性写法，browserlist的配置包共享出不同版本浏览器列表，方便其他包去统一使用（单独的.browserlistrc文件，或者package.json内部配置,创建vue项目时候有给选择）
    

17. browserlist包是如何查询的

18. postcss是一个通过JavaScript来转换样式的工具；postcss的使用，yarn add postcss postcss-cli postcss-loader,为了想在命令行上使用命令需要额外安装postcss-cli，为了使得webpack能使用postcss，于是需要额外安装postcss-loader

19. 点击链接，可查询一些添加css属性的样式

20. postcss需要借助于postcss对应的插件,例如autoprefixer

21. yarn add autoprefixer

22. npx postcss --use autoprefixer -o end.css ./src/test.css 命令行输出

23. 自动给css样式添加基于配置.browserlist的兼容代码，对于一般的css代码，使用autoprefixer足以做兼容处理，但是color: #12345678;,颜色8位数，有些浏览器不识别，那么需要转换为rgba格式，这种转换autoprefixer做不到

24. 这里有个新的包yarn add postcss-preset-env去替代它，配置文件如下

25. 上面图片展示的配置加了一个属性importLoaders，这是因为默认情况下，在css内用@import导入另外一个css文件，他是不被前面的loader解析的，如果前面的loader解析就要写上前n个loader处理

26. 很明显一个问题，就是less和css写的postcss-loader的参数配置重复了，如果想单独提取到公共的位置，则在根目录下新建postcss.config.js文件，内容为module.exports = { plugins: [ 'postcss-preset-env' ] }，这样配置文件就可以简写啦

27. 处理图片yarn add file-loader

28. 在目标打包js文件下加载图片

29. 基于上面的配置和使用照片，最终打包后的代码为

30. 有个bug，在css使用背景图片，打包后，还是不展示，这是因为file-loader使用esmodule规范的，我们需要配置参数关闭一下，如图所示

31. 如果想让小照片转换为base64格式，则需要用url-loader替换file-loader

32. 其配置改为如图所示

33. webpack5之前，加载资源需要一些loader，比如url-loader

34. webpack5，使用资源模块类型 （asset module type），来替代上面的loader

35. asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现；

36. asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现；

37. asset/source 导出资源的源代码。之前通过使用 raw-loader 实现；

38. asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现

39. 从阿里图标库中下载了几个字体图标，在js中引入图标，并且添加一个i元素用于显示字体图标

40. 综合上面的配置如图所示

41. 认识plugins

42. 每次打包之前，删除之前的旧包，yarn add clean-webpack-plugin，配置如下图所示，有个测试技巧就是在旧打包文件内新增一个文件，然后打包，看是否存在

43. 我们的HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的，在进行项目部署的时，必然也是需要有对应的入口文件index.html，所以我们也需要对index.html进行打包处理；yarn add html-webpack-plugin

44. 例如vue框架，public下的index.html，这里稍微有点区别，就是htmlWebpackPlugin.options.title，这里读取的是HtmlWebpackPlugin里面配置的title参数

45. 基于template的html模板有<link rel="icon" href="<%= BASE_URL %>favicon.ico">，生成html文件,打包会报BASE_URL 错误

46. 上面问题解决办法是，设置DefinePlugin，这个是webpack自带的函数，如下配置

47. 上面结果生成的新html文件，内部可能有引入的资源，需要将资源文件复制一下

48. yarn add copy-webpack-plugin复制文件