webpack筆記二管理資源

時間 2019-12-08

標籤 webpack 筆記管理資源简体版

原文原文鏈接

webpack筆記二管理資源

webpack最出色的功能之一就是除了引入JavaScript，還能夠經過loader引入任何其它類型的文件。javascript

加載CSS

爲了在JavaScript模塊中import一個CSS文件，須要安裝style-loader和css-loader：css

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

webpack.config.jsjava

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']
            }
        ]
    }
};

在src目錄下新建style.css文件，並增長樣式。
而後在src/index.js中引入樣式文件：webpack

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());

最後執行npm run build後查看頁面能夠看到對應的效果。git

加載圖像

使用file-loader。github

npm install --save-dev file-loader

webpack.config.jsweb

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

src/index.jsnpm

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

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

document.body.appendChild(component());

加載fonts字體

file-loader以及url-loader能夠接收並加載任何文件，而後將其輸出到構建目錄。bash

webpack.config.jsapp

module.exports = {
    ...
    module: {
        rules: [
            ...    
            {  
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            }
        ]
    }
};

在src目錄下增長my-font.ttf字體文件後，樣式文件：

src/style.css

@font-face {
    font-family: 'MyFont';
    src: url('./my-font.ttf');
    font-weight: 600;
    font-style: normal;
}
.hello {
    color: red;
    background: url('./icon.png');
    font-family: 'MyFont';
    font-size: 24px;
}

打包後能夠看到，字體被應用：

加載數據

webpack能夠加載如JSON文件，CSV、TSV和XML。
JSON文件能夠直接導入，無須loader。而CSV、TSV能夠使用csv-loader，XML使用xml-loader。

webpack.config.js

module.exports = {
    ...
    module: {
        rules: [
            ...    
            {
                test: /\.(csv|tsv)$/,
                use: ['csv-loader']
            },
            {
                test: /\.xml$/,
                use: ['xml-loader']
            }
        ]
    }
};

src/index.js

...
import Data from './data.xml';

console.log(Data);

data.xml

<?xml version="1.0" encoding="UTF-8"?>
<note>
    <to>Mary</to>
    <from>John</from>
    <heading>Reminder</heading>
    <body>Call Cindy on Tuesday</body>
</note>

全局資源

無需依賴於含有所有資源的/assets目錄，而是將資源與代碼組合在一塊兒使用。
這種配置方式會使你的代碼更具有可移植性。

|– /components
 |  |– /my-component
 |  |  |– index.jsx
 |  |  |– index.css
 |  |  |– icon.svg
 |  |  |– img.png

The end... Last updated by: Jehorn, April 24, 2019, 3:23 PM
demo源碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

webpack筆記二 管理資源

webpack筆記二 管理資源

加載CSS

加載圖像

加載fonts字體

加載數據

全局資源

webpack筆記二管理資源

webpack筆記二管理資源