上一篇文章我們講了多頁面js的打包，本篇文章我們繼續(xù)scss的打包。

首先，我們css編寫采用的是sass，所以我們先來安裝sass-loader以及可以用到的依賴

$ npm install sass-loader node-sass css-loader style-loader --save-dev
安裝完loaders，下面在webpack.config.js中加入如下代碼

rules: [
  {
    test: /.scss$/,
    use: extractPlugin.extract({
      fallback: "style-loader",
      use: [{
          loader: "css-loader"
      }, {
          loader: "sass-loader",
          options: {
              includePaths:[__dirname+"/src/css/app",__dirname+"/src/css/base"]
          }
      }]
    })
  }
]

然后我們需要通過extract-text-webpack-plugin插件來提取并輸出成多帶帶的css

$ npm install --save-dev extract-text-webpack-plugin 
在webpack.config.js中引用

const path = require("path")
const webpack = require("webpack") //to access built-in plugins
const fs = require("fs")
const extractPlugin = require("extract-text-webpack-plugin")
function getEntry() {
    let jsPath = path.resolve(__dirname, "src/js/app")
    let dirs = fs.readdirSync(jsPath)
    let matchs = [], files = {}
    dirs.forEach(function (item) {
        matchs = item.match(/(.+).js$/);
        if (matchs) {
            files[matchs[1]] = path.resolve(__dirname, "src/js/app", item)
        }
    })
    return files
}
const extractSass = new extractPlugin({
    filename: "[name]/[name].css"
})
module.exports = {
    entry: getEntry(),
    output: {
      path: path.join(__dirname, "src/dist/"), //文件輸出目錄
      publicPath: "http://www.workspace.com/webpack-demo/src/dist/",       
       //此處要特別注意，比較明顯的是css中的圖片路徑，跟這個設置有關，編譯完后可以看下編譯后的css中圖片路徑你就明白了。
      filename: "[name]/[name].js",        //根據(jù)入口文件輸出的對應多個文件名
    },
    module: {
        loaders: [
          {
              test: /.js/,
              loader: "babel-loader",
              include: __dirname + "/src/js"
          }
        ],
        rules: [
          {
            test: /.scss$/,
            use: extractPlugin.extract({
              fallback: "style-loader",
              //resolve-url-loader may be chained before sass-loader if necessary
              use: [{
                  loader: "css-loader"
              }, {
                  loader: "sass-loader",
                  options: {
                      includePaths: [__dirname+"/src/css/app",__dirname+"/src/css/base"]
                  }
              }]
            })
          },
          {
            test: /.(png|gif|jpe?g|svg)$/,
            loader: "url-loader",
            query: {
              limit: 10000
            }
          }
        ]
    },
    plugins: [
        //js文件的壓縮
        new webpack.optimize.UglifyJsPlugin({
             compress: {
                 warnings: false
             }
        }),
        extractSass
    ]
}

你會發(fā)現(xiàn)loader中多了一個loader

這個url-loader是處理圖片文件的，在應用之前我們要安裝相關依賴

$ npm install --save-dev url-loader file-loader

你會發(fā)現(xiàn)limit，這里的規(guī)則是：如果圖片size小于10k時把圖片準換成base64嵌入到url中

index.scss內(nèi)容如下

@import "../base/base.scss";
$base-font-size: 72;
$base-color:#F5A623;
body{
  color:$base-color;
}
.logo{
  background-image: url("../../asset/logo.jpeg");
}
.error{
  background-image: url("../../asset/404.png");
}

index.js內(nèi)容

import Header from "../module/header"
import "../../css/app/index.scss"
window.onload = function(){
  document.querySelector(".main").innerHTML += Header.html
}

index.html內(nèi)容如下

    
    
    
    
    
    
    
    


  

  
  

      welcome webpack demo
  
  

準備完畢，下面我們開始打包

首先看一下打包前的目錄

$ npm run dev

下面看一下打包后文件夾變化