前言:

1. 之前所學(xué)些的,每次都需要手動(dòng)的打包,
2. 如果現(xiàn)在修改了開發(fā)代碼以后,頁面不會(huì)有任何變化,
3. 原因在于,頁面顯示的內(nèi)容是打包后的文件內(nèi)容

因此我們需要搭建一個(gè)開發(fā)環(huán)境, webpack提供了一個(gè)devServer幫我們搭建開發(fā)環(huán)境

1. devServer認(rèn)識(shí)理解

1.1 為什么需要devServer

1. 在開發(fā)是,可能隨時(shí)需要調(diào)整代碼內(nèi)容
2. 因此我們希望我們調(diào)整的內(nèi)容可以實(shí)時(shí)的顯示在頁面上,有利于開發(fā)調(diào)試
3. 當(dāng)一切都開發(fā)完畢了以后在最終打包上線

1.2 對于devServer的理解

1. devServer是webpack提供的一個(gè)開發(fā)服務(wù)器,
2. devServer會(huì)自動(dòng)化構(gòu)建:自動(dòng)編譯,自動(dòng)打開瀏覽器,自動(dòng)刷新瀏覽器
3. devServer的特點(diǎn)是在內(nèi)存中編譯打包,不會(huì)生成任何打包文件,
4. 因此當(dāng)關(guān)閉devServer時(shí),會(huì)自動(dòng)清理內(nèi)存,在開發(fā)階段非常有用

2. 配置devServer

devServer需要通過webpack-dev-server運(yùn)行,所以我們需要下載這個(gè)包

2.1 下載webpack-dev-server

$ yarn add webpack-dev-server -D

2.2 配置devServer

代碼如下:

const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path")

module.exports = {
    entry: "./src/main.js",
    output: {
        filename:"bundle.js",
        path:resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:["style-loader","css-loader"]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        })
    ],
    mode:"development",

    // devServer配置
    devServer:{
        // 項(xiàng)目構(gòu)建后的路徑
        contentBase: resolve(__dirname,"dist"),
        // 啟動(dòng)gzip壓縮
        compress:true,

        // 端口號(hào)
        port: 3000,
        // 自動(dòng)打開瀏覽器
        open:true
    }
}

2.3 配置運(yùn)行腳本

在package.json

{
    ...
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "dev": "webpack-dev-server"
    },
    ...
}

一切就緒以后,就可以用在控制臺(tái),通過npm run dev來啟動(dòng)devServer了

一但服務(wù)啟動(dòng)成功,我們在開發(fā)區(qū)域?qū)懙娜魏蝺?nèi)容都會(huì)實(shí)時(shí)編譯到瀏覽器上

3. 首先是將前面所學(xué)的內(nèi)容全部配置

webpack配置代碼如下

// 引入依賴
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path")

// webpack 配置
module.exports = {
    // 入口
    entry: "./src/main.js",
    // 出口
    output: {
        filename:"bundle.js",
        path: resolve(__dirname,"dist"),
    },
    // loader配置
    module: {
        rules:[
            // css 
            { 
                test: /\.css$/,
                use:["style-loader","css-loader"]
            },
            // less
            { 
                test: /\.less$/,
                use:["style-loader","css-loader","less-loader"]
            },
            // 樣式圖片
            { 
                test: /\.(png|jpg|gif)$/,
                loader:"url-loader", 
                 // url-loader是在file-loader的基礎(chǔ)上封裝
                // 可以處理為base64圖片
                options:{
                    limit: 8 * 1027,
                    name: "[hash:8].[ext]",
                    esModule:false
                }
            },
            // html 中img 引入圖片
            { 
                test: /\.html$/,
                loader:"html-loader",
            },

            // 其他資源
            { 
                exclude: /\.(html|css|less|js|png|jpg|gif)$/,
                loader:"file-loader",
                options: {
                    name: "[hash:8].[ext]"
                }
            }
        ]
    },
    // plugin 配置
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode:"development",
    // 開發(fā)環(huán)境
    devServer:{
        contentBase: resolve(__dirname,"dist"),
        compress: true,
        port: 3000,
        open: true
    }

}

4. 配置不同文件的目錄

4.1 說明

配置不同輸出目錄說明:

1. 通過上面配置成功打包的結(jié)果來看, 使用沒有問題

2. 此時(shí)打包的目錄都在同一個(gè)文件中,這樣非常不好

3. 開發(fā)時(shí)常將不同的文件放在不同的目錄中,打包時(shí),也希望不同的文件打包到不同的目錄中

4.2 配置輸出目錄

因此我們需要在配置不同文件打包的loader時(shí)配置不同的出口目錄

配置圖片輸出的路徑

{ 
    test: /\.(png|jpg|gif)$/,
    loader:"url-loader", 
    options:{
        limit: 8 * 1027,
        name: "[hash:8].[ext]",
        // 配出圖片輸出的路徑
        outputPath: "imgs"
    }
}