前提電腦有安裝node.js（自帶npm）!

在dos命令框中：

全域性安裝：npm install [email protected] -g

本地安裝：npm install --save-dev [email protected]

打包成bundle.js命令：webpack xx.js bundle.js

監測檔案（發生改變生成另外一個檔案）：webpack --watch ./src/app.js  ./dist/app.bundle.js

壓縮命令(用於生成環境)：webpack -p ./src/app.js  ./dist/app.bundle.js  //將scr目錄下的app.js 壓縮 生成 dist目錄下的 app.bundle.js檔案

初始化：npm init

css樣式處理：
       1.安裝：npm install css-loader style-loader

       2.require("!style-loader!css-loader!./css檔案路徑/style.css") 沒有配置的

       3.在webpack中配置了css,直接在js中：require("css檔案路徑");

webpack.config.js配置：

配置webpack.config.js 直接在dos命令輸入 webpack 執行

載入 第三方庫jquery：npm install jquery --save-dev  然後再 show.js 中 var $=require("jquery"); $("div").text("第三方庫");

服務端環境安裝：

           3版本的webpack 和webpack-dev-server 2版本相容，3版本以上的server不相容

            npm install [email protected]

            更改埠號：在webpack.config.js 中新增 devServer:{port:8091}
            在package.json中配置 ：
                                         "scripts": {
                                                      "start":"webpack-dev-server --entry .c/js/one.js --output-filename ./distndle.js",
                                                    "build":"webpack --watch"
                                         },

//package.json 裡面不可以有註釋
{
  "name": "webpackvue",
  "version": "1.0.0",
  "description": "",
  "main": "show.js",
  "scripts": {
    "start":"webpack-dev-server --entry .c/js/one.js --output-filename ./distndle.js",
    "build":"webpack --watch"
  },
  "author": "yh",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^1.0.0",
    "style-loader": "^0.23.1"
  },
  "devDependencies": {
    "jquery": "^3.3.1",
    "webpack-dev-server": "^2.9.4"
  }
}

開啟2個DOS命令視窗，一個先輸入：npm run build   讓它重新編譯一下

                                      在一個輸入：npm start    執行後會出現一個帶有埠號的網址  去瀏覽器上開啟即可

                                      最後在one.js 或者相關聯one.js檔案的其它css/js/html中就可以 隨意更改 直接重新整理瀏覽器就可以了 不用手動去編譯了