webpack4.29.x成神之路（七） 使用loader之打包樣式上

目錄

上節：使用loader之打包圖片

目錄結構以下：

本節使用webpack處理樣式，先在src下添加樣式文件並引入到index.js中：
新建src/styles/index.css並添加以下內容:

.pic{
  width: 350px;
  height: 300px;
  transform: translateX(300px);
}

修改src/index.js:

import pic from './images/cover.png';
import './styles/index.css';

window.addEventListener('DOMContentLoaded', function() {
  const root = document.getElementById('root');
  const img = new Image();
  img.src = pic;
  img.classList.add('pic');
  root.appendChild(img);
});

修改webpack.config.js，配置css相關loader
webpack.config.js:

// 省略依賴
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash:8].js',
    path: resolve(__dirname, 'bundles')
  },
  module: {
    rules: [{
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: [{
        loader: 'url-loader',
        options: {
          // 當圖片大於801k時，交給file-loader處理
          limit: 801920,

          // 打包後的文件名
          name: '[name].[hash:8].[ext]',

          // 打包路徑
          outputPath: 'images/'
        }
      }]
    }, {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin()
  ]
};

修改完後目錄以下：

而後安裝相關loader:
npm i style-loader css-loader -D
而後 npm run build

此時css就會通過依次通過css-loader > style-loader處理，loader的處理順序都是從後向前

打包成功後運行 bundles/index.html，能夠看到樣式生效：

CSS模塊化

剛纔在index.js中引入css的方式是：
import './styles/index.css';
這種寫法實際上是全局生效的，也就是說index.js中若是依賴了其它js，那這些js均可以直接使用index.css中的樣式。
下面改爲模塊化的引入方式：
src/index.js:

import pic from './images/cover.png';


// import './styles/index.css';  全局生效

// 改成模塊化引入
import indexStyle from './styles/index.css';

window.addEventListener('DOMContentLoaded', function() {
  const root = document.getElementById('root');
  const img = new Image();
  img.src = pic;
  // img.classList.add('pic');
  img.classList.add(indexStyle.pic);
  root.appendChild(img);
});

而後還要再css-loader的選項中開啓模塊化：
webpack.config.js:

module: {
    rules: [{
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: [{
        loader: 'url-loader',
        options: {
          // 當圖片大於801k時，交給file-loader處理
          limit: 801920,

          // 打包後的文件名
          name: '[name].[hash:8].[ext]',

          // 打包路徑
          outputPath: 'images/'
        }
      }]
    }, {
      test: /\.css$/,
      use: ['style-loader', {
        loader: 'css-loader',
        options: {
          // 開啓模塊化
          modules: true
        }
      }]
    }]
  },

而後再次打包：npm run build, 運行bundles/index.html效果應該和以前同樣。

下節：使用loader之打包樣式下