本節(jié)知識點(diǎn)

• 重點(diǎn)講解 : html-withimg-loader

(1) 沒有全局安裝webpack，那應(yīng)該怎么辦

• 在處理之前要說明一點(diǎn)就是要是只是本地安裝webpack沒有全局安裝。那該怎么辦

找到package.json文件的script選項。在下面加入

"scripts":{
 "server" : "webpack-dev-server --open",
 "build" : "webpack"
}

配置完成后可以在控制臺輸入npm run build即可

(2) 如何把圖片放到指定的文件夾下面

只需要配置我們的url-loader選項就可以了,這樣輸出的結(jié)果就是存到images文件夾下面

    {
                test:/\.(jpg|png|gif)/,
                use:[
                    {
                        loader:"url-loader",
                        options:{
                            limit:5000,
                            outputPath:"images/"
                        }
                    }
                ]
            }

(3) html-withimg-loader

• 他解決的問題就是html 文件中引入<img>標(biāo)簽問題

• 安裝

npm install html-withimg-loader --save

因為頁面會用到所以不用--save-dev

配置loader

{
     test:/\.(html|htm)$/i,
     use:['html-withimg-loader']
}

然后在從新打包，這樣你就會發(fā)現(xiàn)。HTML文件中的圖片也被打包了.