webpack核心概念_（第三章）_使用loader打包静态资源（样式篇-下）

比眉伴天荒 2022-01-07 05:51 232阅读 0赞

补充样式打包：  
**1.css-loader常用的配置**  
如果要配置css-loader，那么就不能写字符串了，而要写一个对象

{
            test: /\.scss$/,
            use: [
              'style-loader', 
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 2
                }
              }, 
              'sass-loader',
              'postcss-loader'
            ]
          }

在options配置importLoaders属性，这个配置参数的含义是在scss文件中通过import这种方式引入的scss文件，在引入之前也要去走前面的两个loader，也就是postcss-loader和sass-loader,这样的话就会保证无论是在js文件中直接去引入scss文件，还是在scss文件中再去引入scss文件，都会依次从下到上执行所有的loader，不会有任何问题。  
**2.css打包模块化**  
我们在js文件中引入的scss样式，会有影响到另外一个文件的css样式  
比如说我们在index.js中引入scss文件

import './index.scss'
    import createImage from './createdImage'
    createImage ()

我们在createImage.js文件中写入

import image from './image.jpg'
    function createdImage () {
      var img = new Image();
      img.src = image
      img.classList.add('image')
      var root = document.getElementById('root')
      root.append(img)
    }
    export default createdImage

然后运行，发现网页上可以渲染出index.scss的样式，在index.js中引入的样式可以影响到createdImage.js的样式，也就是这样引入的样式是全局的，这样引入很容易产生问题，容易全局污染，所以就出现了css module的概念  
**模块化css**  
模块化css指的是只在这个模块内有效，我们要在webpack.comfig.js中css-loader的配置项中加上modules属性

{
                loader: 'css-loader',
                options: {
                  importLoaders: 2,
                  modules: true
                }
              },

意思是开启css的模块化打包  
引入也要变更：`import style from './index.scss'`  
这时运行我们发现，改引入样式已经影响不了createdImage.js的样式了，只有在createdImage.js引入该样式才能生效，添加样式的方式也要改为`style.类名`的形式

import style from './index.scss'
    import image from './image.jpg'
    function createdImage () {
      var img = new Image();
      img.src = image
      img.classList.add(style.image)
      var root = document.getElementById('root')
      root.append(img)
    }
    export default createdImage

可以运行成功  
当我们配置了css nodule 这个属性的时候，我们就可以在代码里写import from这种语法了，这种语法带来的好处，当前这个文件或者模块里的样式和其他文件的样式不会有任何耦合和冲突，这样的话我们写样式就非常的独立。  
**3.如何使用webpack打包字体文件**  
在iconfont下载图标到本地。解压之后得到的文件  
![在这里插入图片描述][2019062516532031.png]  
iconfont.js 没用可以删除掉  
如何打包字体文件？  
我们把iconfont.ttf、iconfont.eot、iconfont.svg、iconfont.woff四个字体文件放在src目录下新建的一个font文件夹，iconfont.css写的是字体的声明，把它放在src目录下，首先修改字体文件的引用地址，改为`.font/字体文件名`  
![在这里插入图片描述][20190625175143199.png]  
在iconfont.scss中提供给我们一些 class，我们就可以用这些图标了  
![在这里插入图片描述][20190625171934450.png]  
使用方法：

import './iconfont.scss'
    var root = document.getElementById('root')
    root.innerHTML = '<div class="iconfont iconfood-hotdog">热狗</div>'

但是这个时候运行项目会报错，原因是webpack并不能识别eot、ttf这种结尾的字体文件该怎么打包，所以针对这种字体文件，也要在webpack的配置，使用file-loader即可

{
            test: /\.(eot|ttf|svg|woff)$/,
            use: {
              loader: 'file-loader'
            }
          },

其实我们只需要借助file-loader从src目录下移到dist目录下即可  
这时网页上就可以正常显示iconfont的图标了  
![在这里插入图片描述][20190625174034476.png]  
webpack打包字体文件就完成了

官网学习： DOCUMENTATION---->GUIDES----->Asset Management  
DOCUMENTATION---->LOADERS-----> sass-loader、css-loader、style-loader、postcss-loader，对样式的打包有全面的认识。

[2019062516532031.png]: /images/20211227/3f58de6ec6a24a84a58a4a0844afdccf.png
[20190625175143199.png]: /images/20211227/a3effcb58fc544b8a266fd27269dc1e5.png
[20190625171934450.png]: /images/20211227/1d0fea94550c46c98770456f4076e1eb.png
[20190625174034476.png]: /images/20211227/c3d51839e40442489109c5d414119f2f.png