webpack快速入門（三）：資源管理

上一章說了基本的webpack是用，包括命令行打包，npm腳本打包等基礎的東西。

這篇說一下webpack的資源管理，包括（圖片，字體，數據），首先調整一下項目結構成：

webpack-demo |- package.json |- webpack.config.js |- /dist |- bundle.js |- index.html |- /src |- index.js |- /node_modules
沒有的文件自行新建一個，那個node_modules是自動生成的，這個可不要手工新建

使用webpack加載css文件：
爲了在js模塊中加載css，咱們首先須要安裝兩個模塊：

npm install --save-dev style-loader css-loader

在webpack-demo目錄執行上述命令，會安裝style-loader和css-loader模塊

一個用來加載css文件，一個用來在頁面head中插入內嵌樣式。

修改webpack.config.js，修改後的文件內容以下：

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,
        'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

相比上一篇的配置，增長了module配置，簡要說明一下。

rules定義規則，test是一個正則。此處的正則表示匹配以.css結尾的文件

use指定使用的loader，loader就是加載器了，你要在webpack中管理各類資源，包括css

就必須有相對應的資源加載器。此處的loader指定了兩個加載器，咱們以前已經用命令安裝到本地了

接着在src目錄新建一個style.css文件，文件內容以下：

.hello {
  color: red;
}

很少說，這個不會看不懂吧。。。

修改src目錄下的index.js文件，導入咱們的css，內容以下：

import _ from 'lodash';
import './style.css';

function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');
    return element;
}
document.body.appendChild(component());

相比以前的js文件，這裏增長了兩行內容：

import語句用來導入咱們寫的css樣式，element.classList.add用來給元素添加樣式

修改完成。保存文件，執行以下命令：

npm run build

而後在瀏覽器中打開index.html，看看div中的字體是否是變成了紅色。這說明咱們的樣式生效了。

 

使用webpack加載圖片：

接着再來看看webpack如何加載圖片資源，首先修改webpack.config.js，在rules組裏添加以下內容：

{
    test: /\.(png|svg|jpg|gif)$/,
    use: [
        'file-loader'
    ]
}

正則用來匹配圖片文件名後綴，加載圖片使用file-loader

固然，咱們要使用file-loader，確定要先安裝，因此修改完了別忘了控制檯執行：

npm install --save-dev file-loader

接着在src目錄添加一張圖片，圖片後綴要和正則的能匹配上。。。隨便放什麼，隨你喜歡就好

再修改src目錄的index.js文件，修改後的內容以下：

import _ from 'lodash';
import './style.css';
import Icon from './icon.png';

function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');
    var myIcon = new Image();
    myIcon.src = Icon;
    element.appendChild(myIcon);
    return element;
}
document.body.appendChild(component());

在這裏導入了圖片，並建立了image對象加入到頁面中。

再來修改一下src目錄下的style.css文件，修改後的內容以下：

.hello {
    color: red;
    background: url('./icon.png');
}

再次執行命令：

npm run build

打包完成後打開html文件，應該能夠看到div的背景圖片了。

官網關於資源管理的介紹中還說了字體和xml數據的示例，我的以爲若是你不作

富文本編輯器須要自帶字體的前端需求並很少，因此不作介紹了

並且使用上來講和加載圖片基本差很少。有須要的看下官網介紹吧