webpack 使用Loader 打包静态资源 - 样式2

前面我们介绍啦样式文件的打包。下面是webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'imgs/',
          limit: 20480
        }
      }
    }, {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'bundle')
  }
}

下面，我们介绍样式的一些配置。

首先介绍一下 css-loader 里面常用的配置项。importLoaders 配置项的值设为2 。如果不设置这个值，那么，在scss 文件中 通过 下面代码引入的scss 文件，在loader 打包的时候可能就直接走css-loader, style-loader。如果配置了importLoaders 值为2，那引入的文件会先走postcss-loader,sass-loader,css-loader,style-loader 。

@import 'xxx.scss'

  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'imgs/',
          limit: 20480
        }
      }
    }, {
      test: /\.scss$/,
      use: ['style-loader', {
              loader: 'css-loader',
              options: {
                importLoaders: 2
              }
            },
            'sass-loader',
            'postcss-loader']
    }]
  },

下面，我们讲一讲css 打包的模块化。

我们将index.js 中的显示图片部分拷贝到另外一个文件 createZh.js 中。如下。

import gz from './gz.png';

function createZh() {
  var img = new Image();
  img.src = gz;
  img.classList.add('pic');

  var root = document.getElementById("root");
  root.append(img);
}

export default createZh;

然后在index.js 中引入createZh 如下。

import gz from './gz.png';
import './index.scss';
import createZh from './createZh';

createZh();

var img = new Image();
img.src = gz;
img.classList.add('pic');

var root = document.getElementById("root");
root.append(img);

这时候我们发现index.css 作用在了createZh 模块中的元素了。这样子，index.scss 就是全局样式了。这样很多时候就会产生问题。很可能会产生样式冲突。这就引入了css module 。即模块化css, css 仅对本组件有效。

实现css 模块化，首先要在webpack.config.js 中设置css-loader 的 module 配置项，如下。

  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'imgs/',
          limit: 20480
        }
      }
    }, {
      test: /\.scss$/,
      use: ['style-loader', {
              loader: 'css-loader',
              options: {
                importLoaders: 2,
                modules: true
              }
            },
            'sass-loader',
            'postcss-loader']
    }]
  },

然后使用css 的地方改成这样

import gz from './gz.png';
import style from './index.scss';
import createZh from './createZh';

createZh();

var img = new Image();
img.src = gz;
img.classList.add(style.pic);

var root = document.getElementById("root");
root.append(img);

打包，这就好了。

最后，我们再讲讲如何使用webpack 打包字体文件。

扫描二维码关注公众号，回复： 5518982 查看本文章

首先我们去下载好字体文件。

然后把这四个文件，拷贝到src 目录下的font目录下。然后把下载文件中的 iconfront.css 文件内容，拷贝到index.scss 中。当然，文件中的url 要改一下路径。如下。

@font-face {font-family: "iconfont";
  src: url('./font/iconfont.eot?t=1552204950734'); /* IE9 */
  src: url('./font/iconfont.eot?t=1552204950734#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANoAAsAAAAAB2wAAAMZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqCLIIaATYCJAMQCwoABCAFhG0HRBuIBsiemjxpZKCAolB4FgAYIIK3sc95u3sAqADl5SxLREUQXyBb1SqNEo1oKhQb8Q916SUK0EaoEHGRHL9k+0nGAgBsD1O7MW1tAJlscw3Y8fv/fy7Hd5X4/HaWy61prTHsqBdgHFBge2KUnWCBlCA3TC9poC7eJ1BvWDaPldbuIeCncJcF4kESOPCrxBSFFWuF6o69RbxVpTa9Ts/hTfL5+M/wI6nK3Ic2r1pMUP8LLkSzK+A0z/NqOw/YITJmgELcdPrOoCw3A6k3v/EyB9SqlfgFJ78p/H/o4MKk95dHSDJRzW1sBLMon/kFAUbwKxkj8auwQYYXYq91R4Ut4Bk2DLaFkPuDg1ztni67smN7usMx5PDj+08zb9YOu+mqPbpz17XA4dNMh2dnkA3Lts0JoxvnhAubth7kf7iGud3Dnc6hDkdKlIlFONSY27jt0IHQoRs27z8YVvpjQS3nb5QOGr3lVNtqUqmcgKadGH5yYshhBzryPTTmEzBzPunaPbF+8o3Lk7q/hU6K14vX7x6d+QsKPJ7f/kYn8nEiHIdEQUAclp+oW41uf0Uhv4oSkMQ45FfD3uUVW7P6bk+p7439IHMn5s9pIRWe/9C8pDBkoPof8h317+4+jW+p/u0XWMDPo683wmiFF0yn3ypt6NdPT+wrFuvaS9FcQNmBYuQmMgn1npOXXqLdqy2UrsmNhFpdBSQ1hiCrNYIUwwxUaTAL1WrNQ71pbYcbdFAhUeowZQGA0OoUJM2+QNbqBVIML6FKt89QrTUQ1NuP4DMbjIUU0KQSTicm3D8FSzyzU9+pB6TNg4hgWDm1zCbGYUTVpCQuyM2vF9uInahbbNAmCoW6TjFVmQ23gseI1cqwrDIz4fVcUdflyrw82vWiXJ7ZIMAyFcHRESZYvykwCY+xo9FwXUDj/YMQAoMVRx1QNbbDECqNND5WIFf+BKRNsk9SvcozmokEhXQ6CqNUjA3WCjyE1csxmNw9y4zg6XKJCzKySnloEJ0q5R6v2J7wCNRzN5ZIkaNEldpHEmcXwq0+lLOLhuSjMUMzGAAAAAA=') format('woff2'),
  url('./font/iconfont.ttf?t=1552204950734') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./font/iconfont.svg?t=1552204950734#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-xiangxia:before {
  content: "\e600";
}

.icon-fanhui:before {
  content: "\e624";
}

.icon-sousuo:before {
  content: "\e632";
}

然后我们在index.js 中使用，如下。

import './index.scss';
var root = document.getElementById("root");

root.innerHTML = '<div class="iconfont icon-xiangxia">abc</div>';

这时候，打包，会报错。

因为引入了字体文件，所有需要在配置项中说明，如何打包字体文件。

如下是webpack.config.js 

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'imgs/',
          limit: 20480
        }
      }
    }, {
      test: /\.scss$/,
      use: ['style-loader', {
              loader: 'css-loader',
              options: {
                importLoaders: 2,
                // modules: true
              }
            },
            'sass-loader',
            'postcss-loader']
    }, {
      test: /\.(eot|ttf|svg)$/,
      use: {
        loader: 'file-loader'
      }
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'bundle')
  }
}

然后，打包就好。