1. 根目錄下下載以下模塊

npm i file-loader url-loader image-webpack-loader -D

2. 要操作的文件：

3. demo

• main.less

body {
  background: url(../../static/xiao.jpg);
}

• main.js

require('./less/main.less');

• webpack.config.js

// 因為webpack里面有些路徑配置, 必須是絕對路徑, 導入這個模塊是為了調用方法計算路徑
const path = require('path');  
const htmlWebapckPlugin = require('html-webpack-plugin');

// 配置文件要求我們必須導出一個配置對象
module.exports = {

    // 入口
    entry: path.resolve(__dirname, './src/main.js'),

    // 輸出
    output: {
        // 路徑
        path: path.resolve(__dirname, './dist'),
        // 打包后js文件名
        filename: 'bundle_[chunkhash:8].js'
    },

    //  插件配置
    plugins: [
        new htmlWebapckPlugin({
            template: './src/index.html',   // 要處理的html
            filename: 'index.html',         // 處理后的html名稱
            inject: 'body',                 // 自動注入js到什么地方
            minify:{ // 壓縮優化HTML頁面
                collapseWhitespace:true, // 合并空白字符
                removeComments:true, // 移除注釋
                removeAttributeQuotes:true // 移除屬性上的引號
            }
        })
    ],

    // loader的作用是為了讓webpack可以打包其他類型的模塊
    module: {

        // 配置loader, 該配置選項是必須的
        rules: [    
            // 打包url文件
            {
                test: /\.(png|jpg|gif|jpeg|svg)$/,
                use: [
                    // 默認配置全部打包進來
                    // 'url-loader'

                    // 指定小于10kb的圖片才轉為base64編碼打包
                    {loader: 'url-loader', options: {limit: 10240}}
                ]
            }
        ]
    }
};

• 在根目錄執行webpack

webpack