1. 創(chuàng)建一個(gè)文件夾作為項(xiàng)目的根目錄，打開cmd（最好是已管理員的身份運(yùn)行，避免出現(xiàn)讀寫權(quán)限的問題）。
   進(jìn)入項(xiàng)目根目錄，運(yùn)行以下幾行命令：

    npm init -y
    npm install webpack --save-dev
    npm install webpack-cli --save-dev
   

2. 創(chuàng)建目錄和文件：/src 指的是source，我們編輯代碼的地方；/dist 指的是 distribution，是放置壓縮和優(yōu)化后的代碼，并最終顯示在瀏覽器上。

   
   
   目錄視圖

3. 修改package.json，增加private屬性，刪除main。這是為了防止你的代碼被意外發(fā)布。

   
   
   圖例

4. index.html 中引入 main.js

   
   
   圖示

5. 在根目錄創(chuàng)建 webpack.config.js

   
   
   圖示
   
   

   將下面的代碼貼進(jìn)去：

const path = require('path');

module.exports = {
 entry: './src/index.js',
 output: {
   filename: 'main.js',
   path: path.resolve(__dirname, 'dist')
 }
};

6. 在package.json中加入 "build": "webpack"
   

   圖示

7. cmd 中運(yùn)行 npm run build，main.js 就生成啦!
   

   成功

配置 webpack-dev-server，使用熱替換

1. 安裝
   npm install --save-dev webpack-dev-server
2. 修改 webpack.config.js

module.exports = {
    devServer: {
        contentBase: './dist'
    }
}

3. 在package.json scripts 添加 start

"start": "webpack-dev-server --open"

4. 啟用 HMR，打開webpack.config.js，devServer 增加 hot: true， 增加 plugins 部分

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: './dist',
        hot: true
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    mode: 'production'
};

5. cmd 中運(yùn)行 npm start就可以了?，F(xiàn)在修改代碼可以直接在瀏覽器中看到了，無需再次手動編譯。