loader

webpack 本身只能處理 js / json 類型的文件。至于不能處理的其他代碼文件，一般交由 loader 去處理。比如：

less-loader 用來處理 less 文件，css-loader 用來處理 css 文件。

引入樣式

在之前的目錄里增加 index.less 文件。此時項目目錄如下：

webpack-demo
├─ src
│  ├─ index.js
│  ├─ index.less
│  └─ math.js
├─ package-lock.json
├─ package.json
└─ webpack.config.js

給index.less添加一點樣式代碼，并在index.js中引入index.less:

// index.less
html,
body {
  background-color: blue;
}

// index.js
import add from './math.js';
import './index.less'; // 新增代碼

console.log(add(1, 2));

然后我們npx webpack打包，則會報錯如下：

前面說過，webpack 只能處理 js / json 文件。如果有其他不能處理的文件類型，交由 loader 處理。

處理 less 文件

1. 相關(guān) loader 介紹

css 常用 loader 有less-loader,css-loader,style-loader。它們的作用如下：

less-loader: 負責處理 less 文件，將 less 轉(zhuǎn)換為 css

css-loader: 負責處理 css 文件

style-loader: 負責將 css-loader 處理后的內(nèi)容插入到 html 中

2. 安裝相關(guān) loader

npm i style-loader css-loader less-loader -D

3. loader 配置

loader 本質(zhì)上是一個函數(shù)。安裝后，直接使用即可。我們修改一下webpack.config.js的配置:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};

loader 的配置在 module.rules 里，test 用來正則匹配項目中的文件，use 用來使用 loader。
需要注意的是，loader 的運行順序是從后往前。也就是說，我們的 less 文件從后到前依次被less-loader,css-loader,style-loader處理。

使用npx webpack命令打包，然后打開dist目錄下的index.html。我們能夠看到，頁面背景變成了藍色。我們的 less 代碼生效了。

處理 js 文件

我們使用 babel-loader 進行 js 文件的處理?？赡苡腥艘獑枺皇钦f webpack 能夠處理 js 文件嗎, 為什么還要再處理?

其實，webpack 對 js 的處理僅限于模塊化的處理。至于 ES6 降級之類的能力，webpack 本身是不具備的。為了兼容一些低版本的瀏覽器，我們使用 babel-loader 處理 js 文件。

1. babel-loader 介紹

babel-loader 基于 Babel，允許我們使用 Babel 和 webpack 轉(zhuǎn)譯 js 文件。
使用 Babel 需要安裝兩個依賴，@babel/core和@babel/preset-env。

• @babel/core: 使用 Babel 進行轉(zhuǎn)碼的核心包
• @babel/preset-env: 一組插件預(yù)設(shè)，允許我們使用最新的 JavaScript

2. 安裝

npm install -D babel-loader @babel/core @babel/preset-env

3. 配置

有兩種配置方式:

• 直接在 options 里配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        ]
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};

• 也可以配置在 babel.config.js 里

首先, 刪除webpack.config.js babel-loader 相關(guān)的 options:

// ...
{
  test: /\.js$/,
  use: ['babel-loader']
},
// ...

然后, 在根目錄下新建babel.config.js。 此時項目的目錄結(jié)構(gòu)如下：

webpack-demo
├─ src
│  ├─ index.js
│  ├─ index.less
│  └─ math.js
├─ babel.config.js
├─ package-lock.json
├─ package.json
└─ webpack.config.js

接著在babel.config.js里增加內(nèi)容：

module.exports = {
  presets: ['@babel/preset-env']
};

推薦單獨配置的方式，這樣即使后續(xù)配置比較多，看起來也非常清晰。

配置完 babel-loader，打包并查看一下 bundle 里的內(nèi)容。會發(fā)現(xiàn)之前的箭頭函數(shù)已經(jīng)被轉(zhuǎn)譯成 ES5 的 function 了。

總結(jié)

1. webpack 本身只能處理 js / json 類型的文件。至于不能處理的其他代碼文件，一般交由 loader 去處理。
2. loader 本質(zhì)上是一個函數(shù)。安裝后，直接使用即可。
3. 處理 css 相關(guān)的 loader:

• less-loader: 負責處理 less 文件，將 less 轉(zhuǎn)換為 css

• css-loader: 負責處理 css 文件

• style-loader: 負責將 css-loader 處理后的內(nèi)容插入到 html 中

4. babel-loader

參考資料：

webpack 官方文檔