可能也是因?yàn)樽罱容^閑，所以才有功夫來(lái)看了下外國(guó)的webpack文檔以及社區(qū)。
webpack官網(wǎng)
因?yàn)閣ebpack4和之前的版本有所區(qū)別所以我這里只是介紹下webpack4.x版本了。

• 首先，我們需要?jiǎng)?chuàng)建一個(gè)文件夾，我這里命名是ceshi3。

• 這個(gè)文件夾下，我創(chuàng)建一個(gè)src文件夾用來(lái)存放打包前的代碼。創(chuàng)建一個(gè)dist來(lái)存放打包之后的代碼。創(chuàng)建一個(gè)config來(lái)存放webpack配置代碼。

  
  
  創(chuàng)建文件夾
• 接下來(lái)我們通過(guò)npm 安裝 webpack、webpack-cli、webpack-dev-server這三個(gè)插件。
• 然后我們?cè)赾onfig文件夾下創(chuàng)建一個(gè)文件名為webpack.dev.js來(lái)配置webpack。我們先在src下創(chuàng)建一個(gè)main.js。讓這個(gè)js文件作為入口文件。
• 我們隨便在main.js文件中寫一個(gè)函數(shù)。然后我們開(kāi)始寫webpack.dev.js。首先我們引入node的path模塊，然后配置入口和mode以及出口，這三個(gè)是必須的。代碼如下：

const path = require("path");

module.exports = {
    entry: {
        main: "./src/main.js"
    },
    mode: "development",//development（開(kāi)發(fā)模式）和production（生產(chǎn)模式）
    output: {
        filename: "[name]-bundle.js",
        path: path.resolve(__dirname,"../dist"),
        publicPath: "/"
    }
};

然后我們后臺(tái)執(zhí)行

webpack  --config=config/webpack.dev.js

接下來(lái)我們就會(huì)發(fā)現(xiàn)打包成功，在dist文件夾中出現(xiàn)一個(gè)main-bundle.js

打包成功

其實(shí)塊我一般是為了方便起見(jiàn)，我會(huì)把后臺(tái)執(zhí)行的那行代碼寫到package.json文件中。

{
  "dependencies": {
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.7"
  },
  "scripts": {
    "build": "webpack --config=config/webpack.dev.js"
  }
}

這樣我們就可以直接在控制臺(tái)輸入

cnpm run build

這樣就可以了。