摘要：從最簡單的到項目中的實踐。指令是平臺下，并且使用了來安裝包的依賴一基礎初始化項目會在項目目錄下創建文件安裝下面來寫最簡單的一個入門。

webpack4前言背景用途不多說，上來就干。從最簡單的demo到項目中的實踐。(指令是window 平臺下，并且使用了cnpm 來安裝包的依賴.)
一.基礎demo
1.初始化項目

npm init -y

會在項目目錄下創建package.json 文件.
2.安裝webpack webpack-cli

cnpm install webpack webpack-cli --save-dev

3.下面來寫最簡單的一個入門demo。創建src dist 兩個文件夾，分別用來放源碼和打包后的代碼

mkdir src
mkdir dist

在src 手動創建entry.js

document.getElementById("title").innerHTML="monkeykg"

在項目的根目錄創建webpack.config.js,內容如下

const path=require("path");
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,"./src/entry.js")
    ],
    output:{
        path:path.join(__dirname,"dist"),
        filename:"bundle.js"
    },
    // module:{},
    // plugins:[],
    // devServer:{}
}

為了簡化webpack 運行的指令輸入，可以在package.json文件的添加配置如下

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build":"npx webpack --config webpack.config.js"http://手動添加
  },

可以在命令行中運行了。。

npm run build

webpack最簡單的一個demo完成，在dist目錄下面會生成一個bundle.js文件，同時手動創建一個index.html在dist目錄下，內容如下

瀏覽器運行index.html,就可以看到打包文件的js已經生效，頁面上有 monkeykg 顯示。
附上項目的demo 的目錄結構

二.進階
1.多個入口
webpack.config.js修改如下

const path=require("path");
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,"./src/entry.js"),
        path.join(__dirname,"./src/entry1.js"),//添加一個入口文件
    ],
    output:{
        path:path.join(__dirname,"dist"),
        filename:"[name].js"http://出口文件
    },
    // module:{},
    // plugins:[],
    // devServer:{}
}

entry1.js文件的內容如下

document.getElementById("title").style.color="red";

刪除dist的bundle.js，然后運行npm run build，打包生成一個main.js文件。index.html修改引入script的路徑"./main.js" ,瀏覽器運行index.html,輸出紅色的 monkeykg
2.添加熱更新

cnpm install --save-dev webpack-dev-server

在webpack.config.js添加如下代碼（附圖）

const path=require("path");
const webpackDevServer=require("webpack-dev-server")
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,"./src/entry.js"),
        path.join(__dirname,"./src/entry1.js"),
    ],
    output:{
        path:path.join(__dirname,"dist"),
        filename:"[name].js"
    },
    // module:{},
    // plugins:[],
    devServer:{
        contentBase:path.join(__dirname,"dist"),
        host:"localhost",
        compress:true,
        port:8888
    }
}

package.json 添加如下

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

命令行輸入npm run server 然后再瀏覽器打開localhost:8888,就可以看到index.html 頁面，同時修改入口的 js代碼，會實時的刷新瀏覽器，實現了熱更新。

3.模塊化打包css，并且多帶帶輸出css文件
安裝包依賴 style-loader css-loader extract-text-webpack-plugin@next

cnpm install --save-dev style-loader css-loader extract-text-webpack-plugin@next

在src 新建index.css

body{
    background:red;
    color:white;
}

并且在extry.js中引入

import css form "./index.css"

webpck.config.js修改如下：

const path=require("path");
const webpackDevServer=require("webpack-dev-server");
const extractTextWebpackPlugin=require("extract-text-webpack-plugin");
module.exports={
    mode:"development",
    entry:[
        path.join(__dirname,"./src/entry.js"),
        path.join(__dirname,"./src/entry1.js"),
    ],
    output:{
        path:path.join(__dirname,"dist"),
        filename:"[name].js"
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader",
                    use: ["css-loader",]
                })
            }
        ]
    },
    plugins:[
        new extractTextWebpackPlugin({
            filename:"index.css"
        })
    ],
    devServer:{
        contentBase:path.join(__dirname,"dist"),
        host:"localhost",
        compress:true,
        port:8888
    }
}

刪除main.js，命令行運行 npm run build,完成打包
在dist目錄會多一個index.css文件