demo13 webpack經過postcss-loader加工css和scss

1.關於 postcss-loader 和 postcss

postcss: postcss 有一個插件體系，postcss 能夠經過選擇相應的插件對 css 進行轉換和處理。 好比能夠經過 Autoprefixer 插件來處理 css 的前綴，以實現瀏覽器的兼容性。

postcss-loader: webpack 經過 postcss-loader 來調用 postcss

關於 PostCss 的文檔：

英文文檔: github.com/postcss/pos…

中文文檔: github.com/postcss/pos…

2.webpack 如何配置 postcss

在 postcss-loader 的 options 中配置 postcss

{
        loader: 'postcss-loader',
        options: {
          ident: "postcss",
          plugins: [
            require("autoprefixer") /* postcss 調用 autoprefixer 插件*/
          ]
        }
      }
複製代碼

經過配置文件 postcss.config.js

module.exports = {
      parser: 'postcss',
      plugins: {
        'autoprefixer': {}
      }
    }
複製代碼

3.安裝相關依賴

npm install -D css-loader style-loader
npm install -D postcss-loader postcss autoprefixer
複製代碼

4.目錄結構

// -- 表明目錄， - 表明文件

--demo13
    --src
      -app.js
      -style1.css
      -style2.css
    -index.html
    -postcss.config.js
    -webpack.config.js
複製代碼

5.編寫 postcss.config.js 配置文件

webpack.config.js

module.exports = {
  parser: 'postcss',
  plugins: {
    'autoprefixer': {}
  }
}
複製代碼

6.編寫 webpack 配置文件

webpack.config.js

const path = require("path");

module.exports = {
  mode: 'development',
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包後資源文件的引用會基於此路徑
    path: path.resolve(__dirname, "dist"), // 打包後的輸出目錄
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // 以<style>標籤形式引用css
        use: [
          {
            loader: "style-loader",
            options: {
              singleton: true // 處理爲單個style標籤,註釋掉試試看?
            }
          },
          'css-loader',
          {
            loader: 'postcss-loader',
            // 配置在postcss.config.js
            // options: {
            // ident: "postcss",
            // plugins: [
            // require("autoprefixer") /*postcss調用autoprefixer插件*/
            // ]
            // }
          }
        ]

      }
    ],
    // rules: [
    // {
    // test: /\.css$/,
    // // 以<link>標籤形式引用css
    // use: [
    // "style-loader/url",
    // {
    // loader: "file-loader",
    // options: {
    // name: '[name].[hash].css'
    // }
    // },
    // {
    // loader: 'postcss-loader',
    // // 配置在postcss.config.js
    // // options: {
    // // plugins: [
    // // require("autoprefixer") /*postcss調用autoprefixer插件*/
    // // ]
    // // }
    // }
    // ]

    // }
    // ]

  }
};
複製代碼

7.執行打包命令

(默認你已經安裝了全局 webpack 以及 webpack-cli )

webpack
複製代碼

8.驗證打包結果

transform 樣式被添加了相應的前綴。

transform: all 1s;
--------》
-webkit-transform: all 1s;
        transform: all 1s;
複製代碼

9.源碼地址

demo 代碼地址: github.com/SimpleCodeC…

倉庫代碼地址(及目錄): github.com/SimpleCodeC…