webpack處理url資源的配置

webpack處理url資源的配置

1.安裝 npm i url-loader -D

2.修改webpack.config.js

const path = require('path');
// 啓用熱更新的 第2步
const webpack = require('webpack')
//導入html插件
//只要是插件,都一定要放到plugins節點中去
const htmlWebpackPlugin = require('html-webpack-plugin')
// 這個配置文件，起始就是一個 JS 文件，通過 Node 中的模塊操作，向外暴露了一個 配置對象
module.exports = {
    entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪個文件
    output: { // 輸出文件相關的配置
        path: path.join(__dirname, './dist'), // 指定 打包好的文件，輸出到哪個目錄中去
        filename: 'bundle.js' // 這是指定 輸出的文件的名稱
    },
    //配置dev-server第二種形式
    devServer: {
        open: true,//自動打開瀏覽器
        port:3000,//啓動時候的端口
        contentBase:'src',//指定託管的根目錄
        hot:true //啓用熱更新
    },
    plugins:[
        //第三步
        new webpack.HotModuleReplacementPlugin(), //new一個熱更新的模塊
        new htmlWebpackPlugin({//創建一個在內存中生成html頁面插件

            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'               //指定生成頁面的名稱

        })
    ],
    module:{//這個是第三方的加載器
        rules:[//正則的文件匹配規則
            {test:/\.css$/,use:['style-loader','css-loader']},
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置處理 .less 文件的第三方 loader 規則
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置處理 .scss 文件的 第三方 loader 規則
            // 規則 limit給定的是圖片的大小 如果我們給定圖片的大小大於等於我們給定的limit 則不會被轉爲base64編碼
            //反之會被轉換name=[hash:8]-[name].[ext] 前面加hash值區分圖片 名字原樣輸出
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1000&name=[hash:8]-[name].[ext]' } // 配置圖片路徑loader
        ]
    }

}

3.index.css

.box{
    width: 200px;
    height: 120px;
    /*默認情況下,無法處理url地址,無論是圖片還是字體庫*/
    background:url("../images/beijing.jpg");
    background-size:cover ;
}