1.安裝之前步驟新建好專案檔案，新增加dist 資料夾用來放置打包後的檔案，style資料夾用來放置css，js，less等檔案。

2.新建一個webpack.config.js檔案用來寫webpack配置檔案。

配置程式碼：

//webpack 1.0 語法
/*module.exports = {
    entry:'./src/script/main.js',
    output:{
        path:'./dist/js',
        filename:'bundle.js'
    }
}
*/
//webpck 3.0 語法
//方法一
const path = require
 
("path")

module.exports={

  entry:path.join(__dirname,"src/script/main.js"),

  output:{

    filename:"bundle.js",

    path:path.join(__dirname,"dist")
  }

}
//方法二
/*var path =require("path");

module.exports = {

    entry:'./src/script/main.js',

    output: {
        path:path.resolve(__dirname,'./dist/js'),

        filename:'bundle.js'
    }

}*/
 

用webpack 1.0的語法會報錯：

打包成功後dist資料夾下會出現js資料夾，資料夾內有生成的bundle.js檔案。

3,.當配置檔案不用webpack.config.js這個名字，改成webpck.dev.config.js後，打包會報錯.

這時候需要在命令列中指定對應的配置檔案：

webpack --config webpack.dev.config.js
#webpack --config [指定的配置檔案的檔名]

4.如果需要在配置中增加引數，可以在package.json檔案的的scripts下新增對應的引數，然後配合npm的命令列則可以實現webpack的一些相關命令。

然後執行npm run webpack

{
  "name": "wpt",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"//新增webpack的命令列
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.11",
    "style-loader": "^0.20.3",
    "webpack": "^3.0.0"
  },
  "dependencies": {
    "babel-loader": "^7.1.4"
  },
  "description": ""
}

出現以下問題是因為–display-reasons少了個s

最終結果：