如何通過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 中