第一步：用 npm 包的管理工具管理起來

指令：npm init -y

結果：會在專案的根目錄多出一個 package.json 配置檔案

第二步：建立專案的基本結構

第三步：藉助 webpack-dev-server 工具實現自動打包功能，並啟動熱更新

step 1 ：安裝 webpack-dev-server 工具

指令：cnpm i webpack-dev-server -D

指令：cnpm i webpack -D (依賴項)

step 2：建立 webpack.config.js,並配置如下內容：

//由於 webpack 是基於Node進行構建的，所有 webpack 的配置檔案中，任何合法的Node程式碼都是支援的
var path=require('path')

//當以命令列執行 webpack 或 webpack-dev-server 的時候，工具會發現，沒有提供打包的 入口 和 出口 檔案，此時，它會檢查專案根目錄中的配置檔案，並讀取這個檔案，就可以拿到匯出的這個配置物件，然後根據這個物件，進行打包構建
module.exports={
    entry:path.join(__dirname,'./src/main.js'),//webpack 打包 輸入 路徑
    output:{
        path:path.join(__dirname,'./dist'),//webpack 打包 輸出 路徑
        filename:'bundle.js'
    },
    mode:'development'
}
 

step3: 啟動熱更新實時顯示

在 webpack.config.js 匯入 webpack 包

var webpack=require('webpack')

在 webpack.config.js 中新增 配置節點

devServer:{
        //這是配置 webpack-dev-server 命令引數的第二種形式，相對來說，
        //這種方式麻煩一些 package.json中的配置： "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot",
        open:true,//自動開啟瀏覽器
        host:'127.0.0.1',
        port:4000,//設定啟動時候的執行埠
        contentBase:'src',//指定託管的根目錄
        hot:true,//啟用熱點更新 的第 1 步
        overlay:{//在頁面上顯示錯誤資訊
            errors:true,
        }

    },
    plugins:[//配置外掛節點
        new webpack.HotModuleReplacementPlugin(), //new 一個熱更新的模組物件 這是啟用熱更新的第 3 步
        new webpack.NoEmitOnErrorsPlugin(),//熱更相關外掛
    ],
 

在 package.json 中 物件 “scripts”==>"dev"節點

第四步：藉助 html-webpack-plugin 工具實現頁面 或 bundle.js 記憶體託管功能

step1:安裝工具

指令：npm i html-webpack-plugin -D

step2:匯入包

在 webpack.config.js 中匯入包

var htmlWebpackPlugin=require('html-webpack-plugin')

在 webpack.config.js 中 plugins 屬性中 例項化 包物件

plugins:[//配置外掛節點
        new webpack.HotModuleReplacementPlugin(), //new 一個熱更新的模組物件 這是啟用熱更新的第 3 步
        new webpack.NoEmitOnErrorsPlugin(),//熱更相關外掛
        new htmlWebpackPlugin({//指定快取的末班檔案路徑
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],

第五步：安裝以及配置常用的 xxx-loader 載入器

step 1: .css樣式表支援

指令：cnpm i style-loader css-loader -D

配置：在 webpack.config.js 檔案中配置以下節點

 module:{//配置所有第三方 loader 模組的
            rules:[
                {test:/\.css$/,use:['style-loader','css-loader']}
            ]
    },

step 2: .less樣式表支援

指令：cnpm i less-loader -D

配置：