一步一步帶你掌握webpack(二）——資產管理

概述

webpack本身只能處理js,本文我們來看看webpack如何通過loader,來處理css,imgae等，還是接著(一)中的專案 程式碼地址：github.com/fanxuewen/w…

一、處理CSS

我們在Src下面新建一個style.css檔案並新增內容，然後在src/index.js引入style.css並修改index.js並執行 npm run build,會發現報錯了，並且報錯資訊提示我們缺少合適的loader。如下所示

//src/style.css
.hello{
    font-size: 24px;
    font-weight: 800;
    color: red;
}
複製程式碼

//src/index.js
import  _ from 'lodash'
+ import './style.css'

function component(){
    let element =document.createElement('div');
    element.innerHTML=_.join(['Hello','webpack'],',');
+    element.classList.add('hello');
    return element;
}
document.body.appendChild(component());
複製程式碼

既然報錯了，我們來安裝兩個css loader npm install style-loader css-loader -D ,(css-loader是用來轉換css,style-loader是用來把轉換後的css插入到index.html>head>style裡面), 安裝完成之後我們還需要在webpack.config.js的module節點裡面配置一下，並且loader的執行順序是從後向前執行，因此我們需要把style-loader放前面，css-loader放後面

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
 +   module: {
 +       rules: [{
 +          test: /\.css$/,
 +          use: [
 +               'style-loader',
 +                'css-loader'
 +           ]
 +       }
 +       ]
 +  }
};
複製程式碼

上面的意思是webpack在打包的時候當遇到以.css結尾的檔案時先用css-loader出理一下，然後再用style-loader處理完成上面步驟之後我們再來執行npm run build發現執行成功了，開啟index.html結果如下所示

現在css可以用了，我們來看看如何使用scss。在src資料夾下新增index.scss並新增內容如下， 在src/index.js引入index.scss，並修改src/index.js 再次執行npm run build又報錯了

//src/index.scss
body{
    background: black;
    .scss{
        font-size: 24px;
        font-weight: 800;
        color: red;
    }
}

複製程式碼

//src/index.js
import  _ from 'lodash'
import './style.css'
import './index.scss'

function component(id,className){
    let element =document.createElement(id);
    element.innerHTML=_.join(['Hello','webpack'],',');
    element.classList.add(className);
    return element;
}
document.body.appendChild(component('div','hello'));
document.body.appendChild(component('div','scss'));
複製程式碼

這時我們需要安裝 npm install node-sass sass-loader -D,並在webpack.config.js中進行配置,這是我們的程式又可以歡快的跑了

 module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
     +   {
     +       test: /\.scss$/,
     +      use: [
     +          'style-loader',
     +          'css-loader',
     +           'sass-loader'
     +      ]
     +  }
        ]
    }
複製程式碼

二、處理image

webpack處理圖片既可以用file-loader也可以用url-loader，參照官網我們這裡用file-loader
安裝npm i file-loader -D 後在webpack.config.js中配置如下

 module: {
        rules: [
            {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.scss$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]
        },
    +  {
    +      test:/\.(png|svg|jpg|gif)$/,
    +      use:['file-loader']
    +  }
        ]
    }
複製程式碼

在網上隨便找一張png圖片改名為icon.png放到src資料夾下
修改src/index.js 和src/style.css分別如下所示：

//src/index.js
import _ from 'lodash'
import './style.css'
import './index.scss'
+ import Icon from './icon.png'

function component(id, className) {
    let element = document.createElement(id);
    element.innerHTML = _.join(['Hello', 'webpack'], ',');
    element.classList.add(className);
  + if (className == 'scss') {
  +     var myIcon = new Image();
  +     myIcon.src = Icon;
  +     element.appendChild(myIcon);
  + }
    return element;
}
document.body.appendChild(component('div', 'hello'));
document.body.appendChild(component('div', 'scss'));
複製程式碼

//src/style.css
 .hello{
        font-size: 24px;
        font-weight: 800;
        color: red;
     +   background: url('./icon.png');
  }

複製程式碼

執行npm run build我們的圖片就出來了，這裡的原理是當你import Icon from './icon.png'時，圖片會被處理並新增到你的輸出目錄，Icon這個變數就是處理之後圖片的Url.對於這樣的background: url('./icon.png')圖片使用方式，css-loader的處理方式也類似

三、處理其他

像處理字型 xml,csv等資源。處理方式都類似，我這裡就不再贅敘了....