webpack4系列教程（五）：處理項目中的資源文件（二）

1. 在項目中使用 less 

在 src/assets/ 下新建 common.less ：

body{
  background: #fafafa;
  padding: 20px;
}

在 main.js 中引入 common.less ：

import './assets/style/common.less'

安裝 less-loader：

npm i less-loader -D

添加 rules：

     {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }

打包之後，在瀏覽器打開 dist/index.html，less文件中的樣式已經通過 style 標籤載入了：

​

2. 使用MiniCssExtractPlugin

我們之前的樣式代碼都是通過 style 標籤載入的，那麼如何通過 link 引入CSS文件的方式實現呢？

這就需要使用一個插件，在webpack3中通常使用ExtractTextWebpackPlugin，但是在webpack4中已經不再支持ExtractTextWebpackPlugin的正式版，而測試版本又不夠穩定，因此我們使用MiniCssExtractPlugin替代。首先安裝：

npm install --save-dev mini-css-extract-plugin

在webpack.config.js 中引入並添加 plugins ：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

new MiniCssExtractPlugin({
      filename: "[name].css"
    }),

 修改 CSS 和 less 的 rules：

{
        test: /.css$/,
        use: [
          // 'style-loader',
          {
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader'
        ]
      },
      {
        test: /.less$/,
        use: [
          // 'style-loader',
          {
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader',
          'less-loader'
        ]
      }

npm run build 之後，可見head中引入了一個 main.css 文件：

​

也正是我們在 common.less 和 modal.css 中的代碼

​

3. postcss-loader

postcss-loader 可以幫助我們處理CSS，如自動添加瀏覽器前綴。

npm i -D postcss-loader autoprefixer

在根目錄下創建 postcss.config.js：

const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprefixer({
      browsers: ['last 5 version']
    })
  ]
}

修改 css 和 less 的 rules：

{
        test: /\.css$/,
        use: [
          // 'style-loader',
          {
            loader: MiniCssExtractPlugin.loader
          },
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          // 'style-loader',
          {
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      }

在 modal.css中加入：

.flex{
    display: flex;
}

打包之後打開 main.css，可見瀏覽器前綴已經加上了：

​

---

本人才疏學淺，不當之處歡迎批評指正