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

目錄

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

目錄結構以下：

postcss

PostCSS 是一個容許使用 JS 插件轉換樣式的工具。 這些插件能夠檢查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 編譯還沒有被瀏覽器普遍支持的先進的 CSS 語法，內聯圖片，以及其它不少優秀的功能。截止到目前，PostCSS 有 200 多個插件。[官方傳送門][3]

這裏就示範其中一個添加瀏覽器前綴的插件：autoprefixer

首先瀏覽器運行上節打包後的代碼，即bundles/index.html查看圖片樣式：

如今css3沒有加瀏覽器前綴，利用autoprefixer可輕鬆解決這一問題，不須要本身手動添加。
首先修改配置;
webpack.config.js:

// 省略
{
  test: /\.css$/,
  use: ['style-loader', {
        loader: 'css-loader',
        options: {
        // 開啓模塊化
        modules: true
    }
  }, 'postcss-loader']
}
// 省略

這樣css會先通過postcss-loader處理。
而後安裝插件：npm i postcss-loader autoprefixer -D

再到根目錄下新建postcss.config.js，並添加以下代碼：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

而後npm run build，運行打包後的代碼，這時應該自動加上前綴了

這些postcss的插件各自都有本身的配置，詳細使用可參考官網：https://github.com/postcss/au...
for example:

module.exports = {
    plugins: [
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 3 iOS versions"
            ]
        })
    ]
};

使用預處理器

這裏以less爲例：
修改配置webpack.config.js:

// 省略
{
  test: /\.less$/,
  use: ['style-loader', {
        loader: 'css-loader',
        options: {
        // 開啓模塊化
        modules: true
    }
  }, 'postcss-loader', 'less-loader']
}
// 省略

安裝依賴：npm i less-loader less -D

修改後綴，src/styles/index.less，
修改內容index.less：

@w: 350px;
@h: 300px;

.pic{
  width: @w;
  height: @h;
  transform: translateX(300px);
}

src/index.js中的引入也要改：

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

// 模塊化引入
import indexStyle from './styles/index.less';

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

npm run build,運行打包後的代碼，效果應該和以前同樣。

less一樣也有不少配置，官網傳送

下節：webpack-dev-server上（待更新）