Webpack 把一切文件看作模塊，CSS 文件也不例外，要引入 main.css 需要像引入 JavaScript 文件那樣，修改入口文件 main.js 如下：

// 通過(guò) CommonJS 規(guī)范導(dǎo)入 CSS 模塊
require('./main.css');
// 通過(guò) CommonJS 規(guī)范導(dǎo)入 show 函數(shù)
const show = require('./show.js');
// 執(zhí)行 show 函數(shù)
show('Webpack');

但是這樣修改后去執(zhí)行 Webpack 構(gòu)建是會(huì)報(bào)錯(cuò)的，因?yàn)?Webpack 不原生支持解析 CSS 文件。要支持非 JavaScript 類型的文件，需要使用 Webpack 的 Loader 機(jī)制。Webpack的配置修改使用如下：

const path = require('path');

module.exports = {
  // JavaScript 執(zhí)行入口文件
  entry: './main.js',
  output: {
    // 把所有依賴的模塊合并輸出到一個(gè) bundle.js 文件
    filename: 'bundle.js',
    // 輸出文件都放到 dist 目錄下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        // 用正則去匹配要用該 loader 轉(zhuǎn)換的 CSS 文件
        test: /\.css$/,
        use: ['style-loader', 'css-loader?minimize'],
      }
    ]
  }
};

Loader 可以看作具有文件轉(zhuǎn)換功能的翻譯員，配置里的 module.rules 數(shù)組配置了一組規(guī)則，告訴 Webpack 在遇到哪些文件時(shí)使用哪些 Loader 去加載和轉(zhuǎn)換。 如上配置告訴 Webpack 在遇到以 .css 結(jié)尾的文件時(shí)先使用 css-loader 讀取 CSS 文件，再交給 style-loader 把 CSS 內(nèi)容注入到 JavaScript 里。 在配置 Loader 時(shí)需要注意的是：

• use 屬性的值需要是一個(gè)由 Loader 名稱組成的數(shù)組，Loader 的執(zhí)行順序是由后到前的；
• 每一個(gè) Loader 都可以通過(guò) URL querystring 的方式傳入?yún)?shù)，例如 css-loader?minimize 中的 minimize 告訴 css-loader 要開啟 CSS 壓縮。

在重新執(zhí)行 Webpack 構(gòu)建前要先安裝新引入的 Loader：

npm i -D style-loader css-loader

安裝成功后重新執(zhí)行構(gòu)建時(shí)，你會(huì)發(fā)現(xiàn) bundle.js 文件被更新了，里面注入了在 main.css 中寫的 CSS，而不是會(huì)額外生成一個(gè) CSS 文件。 但是重新刷新 index.html 網(wǎng)頁(yè)時(shí)將會(huì)發(fā)現(xiàn) Hello,Webpack 居中了，樣式生效了！ 也許你會(huì)對(duì)此感到奇怪，第一次看到 CSS 被寫在了 JavaScript 里！這其實(shí)都是 style-loader 的功勞，它的工作原理大概是把 CSS 內(nèi)容用 JavaScript 里的字符串存儲(chǔ)起來(lái)， 在網(wǎng)頁(yè)執(zhí)行 JavaScript 時(shí)通過(guò) DOM 操作動(dòng)態(tài)地往 HTML head 標(biāo)簽里插入 HTML style 標(biāo)簽。

給 Loader 傳入屬性的方式除了有 querystring 外，還可以通過(guò) Object 傳入，以上的 Loader 配置可以修改為如下：

use: [
  'style-loader', 
  {
    loader:'css-loader',
    options:{
      minimize:true, // 設(shè)置屬性報(bào)錯(cuò)，說(shuō)沒(méi)有這個(gè)屬性，具體原因不知道
    }
  }
]

除了在 webpack.config.js 配置文件中配置 Loader 外，還可以在源碼中指定用什么 Loader 去處理文件。 以加載 CSS 文件為例，修改上面例子中的 main.js 如下：

require('style-loader!css-loader?minimize!./main.css');

這樣就能指定對(duì) ./main.css 這個(gè)文件先采用 css-loader 在采用 style-loader 轉(zhuǎn)換。