webpack4【guides说明3】

接下来就是webpack资源管理了

webpack配置如何加载css，图片，字体，本地数据，全局资源等

我这里就只摘取一些通用的处理了

 

webpack引入css

以上增加的配置是为了让webpack支持引入css文件，这里就有前文说的webpack loader了，webpack loader是webpack系统里面一个很重要的概念。除此外，别忘了安装这两个loader——style-loader和css-loader

npm install --save-dev style-loader css-loader

配置很直接，test用来匹配什么文件，use用来指示匹配到的文件用什么loader，至于多个loader如此处，为什么style-loader在css-loader前，后面再解释了，目前照着配置使用就可以了。 

 

webpack使用正则来判断 哪些文件它需要用哪个loader去处理。在本例中，任何以.css结尾的文件都会被传递给style-loader和css-loader处理。

 

这样让你可以在某一js文件（模块）中引入css文件了，当该模块（一段js）运行的时候，一个style标签将会被动态插入到head头里去 的。

 

如下示范

关键点我圈出来了，特别注意一下 import "color.css"这段，接着打包

发生了错误，不能解析color.css,这也是一个可能会遇见的问题，放在后面说。目前修改成相对路径形式（以./..开头的）再打包

打包成了，刷新chrome浏览器相应html页面，发现颜色变红了，head中被插入了一个style，而style的内容就是color.css中的内容

 

重新更改下color.css,添加2没有使用的样式类，观察打包结果，可以发现css中没有使用到的css也会被添加到新生产的style标签中去

 

总结一下webpack处理css方式：

1.添加css处理相关配置

2.在模块中引入css

3模块在将来某个时间被执行，原引入css文件样式内容会被动态插入到html中去

那么怎样将css动态插入到html中去的呢，让我们来简单一撇，在打包后的main.js文件中搜索一下，bg-red,找到如下相关代码，

具体详情不在此分析了，后面有空再整理。不过可以预见到的是，css文件很大，那么引入该css文件的模块被打包后，生成的打包文件，同样会包含这部分，如果冗余css太多，并且引入css文件太多，会造成打包文件内含多余的用来动态插入css的内容。

 

webpack引入图片

安装file-loader

 

接下来就开始引入图片了，并使用它

打包后，点击前，点击后

以上即为webpack中如何引用图片的一个例子，还有一些情况如

1.html中使用img

2.html中使用background-img

3.js动态插入img，或者有背景图片的元素

就不在这里展示了。

 

来看看文档中如何描述的吧：

接下来，import MyImage from './my-image.png'，在打包的时候，图片就会被处理添加到output目录，最后MyImage变量将会包含图片处理后的url。 同样使用css-loader的时候，当遇见url('./my-image.png')的时候会有个相似处理，该loader会识别到这是一个本地文件，然后替换地址为处理后的url地址。同样，html-loader会处理文档内类似<img src="./my-img.png />"的部分

 

webpack引入字体，csv略

 

webpack引入本地json文件

引入json文件是webpack自带的，因此不需要修改配置以及安装某个loader了，直接import就可以使用

 

忽略掉文件乱码，发现其实webpack开发中使用json文件，处理那些假数据，写死的数据还挺方便的。