webpack.config.js中代碼

    mode:'development',
    //開發(fā)服務(wù)器devServer，用來自動化
    //特點：只會在內(nèi)存中編譯打包，不會有任何輸出，不輸出build文件。。。
    //需要安裝包：npm i webpack-dev-server
    //啟動devServer指令，npx webpack-dev-server
    
    devServer:{
        //我要運行的目錄,不是原代碼,
        contentBase:resolve(__dirname,'build'),
        //啟動zGip壓縮，更小更快
        compress:true,
        //端口號
        port:3000,
        //自動打開瀏覽器
        open:true
    }

頁面需要刷新才更新。
注意版本

image.png

代碼如下

//webpack配置文件，配置如何進行打包
//5部分，entry，output，loader，plugins，mode
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports  = {
    entry:'./src/index.js',
    output:{
        filename:'out.js',
        path:resolve(__dirname,'build'),
        publicPath: './'//devServer上如果沒配置，就會找到這里
    },
    module:{
        rules:[
            {
               test:/\.css$/,
               use:[
                   'style-loader',
                   'css-loader'
               ]
            },
            {
               test:/\.scss$/,
               use:[
                   'style-loader',
                   'css-loader',
                   'sass-loader'//基于node-sass
               ]
            },
            {
                test:/\.less$/,
                use:[//use使用數(shù)組就是用多個loader處理
                    'style-loader',
                    'css-loader',
                    'less-loader'//基于less
                ]
            },
            //webpack發(fā)現(xiàn)頁面中多次引用同一張圖片，只打包一次這張圖片
            {//處理圖片 處理樣式中的圖片用url-loader
                test:/\.(jpg|png|gif)$/,
                //url-loader是依賴file-loader的，需要下載兩個包
                loader:'url-loader',//只用一個loader處理，可以不用use，直接用loader，loader上的配置在options選項中
                options:{
                    //當(dāng)打包的圖片小于8*1024時候，會轉(zhuǎn)成base64位圖片
                    //優(yōu)點減少頁面請求數(shù)量，減少服務(wù)器壓力
                    //缺點體積增大，文件請求速度變慢
                    //輸出的圖片只會是>8kb的圖片
                    limit: 8*1024,//我們通常會對8-12kb以下圖片進行base64位處理
                    name:'[hash:10].[ext]',//不想讓base64的圖片名字太長，hash名字取10位+.+原來的后綴（ext）
                    esModule:false
                }
            },
            {//處理html中的img圖片    
                test: /\.html$/,
                loader:'html-withimg-loader'    
            }
            ,
            {//處理其他資源，例如字體,除了html、js、css以外的資源
                //如果使用exclude，一定要排除的全面，否則各種報錯
                exclude:/\.(html|css|js|scss|less|jpg|png|gif)$/,//exclude是排除  test是檢測，都是正則
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            },
        ]
    },
    plugins:[

        //功能：默認會創(chuàng)建一個空的html，自動引入打包輸出的所有js、css資源
        //需要有html，所有需要傳入配置template，找對應(yīng)的文件
        //原h(huán)tml模板頁，不需要引入打包的js、css
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development',
    //開發(fā)服務(wù)器devServer，用來自動化
    //特點：只會在內(nèi)存中編譯打包，不會有任何輸出，不輸出build文件。。。
    //啟動devServer指令，npx webpack-dev-server需要包：webpack-dev-server
    //Cannot find module 'webpack-cli/bin/config-yargs'
    //原因ebpack的版本與webpack-dev-server的版本不兼容。
    devServer:{
        //我要運行的目錄,不是原代碼,
        contentBase:resolve(__dirname,'build'),
        //啟動zGip壓縮，更小更快
        compress:true,
        //端口號
        port:3000,
        //自動打開瀏覽器
        open:true
    }
}