如何通过webpack对css进行打包

安装样式的loader

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

url-loader是对象file-loader的上层封装，使用时需要配合file-loader使用。

配置loader

//webpack.config.js
module.exports = {
  module: {
    rules: [ //所以的loader配置都放到这里
      {
        test: /\.css$/i,  //正则匹配，$为以什么结尾，此处以css结尾，^为以什么开头
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

css-loader只负责加载css模块，但没办法将加载的样式映入到页面，而style-loader可以把css-loader加载的样式动态的添加到 head 里面的 style 中