1. 載入 樣式檔案 .css

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

2.webpack 加入module 配置

//提供目錄
const path = require('path');

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

3. 頁面引入css檔案

function component() {
    var element = document.createElement('div');
  
    // Lodash（目前通過一個 script 指令碼引入）對於執行這一行是必需的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('webpack-TextColor');

    return element;
  }
  
  document.body.appendChild(component());
 

4. 圖片載入：

npm install --save-dev file-loader

5. 在webpack.config.json配置

 module: {
        /* 載入css */
        rules: [
            {
                test : /\.css$/,
                use: ['style-loader' ,'css-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            }
        ]
    }
 

6. 在css檔案和js檔案中應用方式

 .webpack-TextColor {
    color :red;
    width: 100px;
    height: 200px;
    background-size:100px 200px;
    background: url('./image/a.png');
 }

import Icon from './image/a.png';

7. 其他的字型檔案，或者 json ,xml 等處理類似