建立基本的webpack 4.X專案

1. 執行npm init -y快速初始化專案。在專案生成package.json檔案。
2. 在專案根目錄下建立src原始碼目錄和dist產品目錄。
3. 在src目錄下建立index.html和index.js檔案。
4. 使用cnpm安裝webpack，執行cnpm i webpack webpack-cli -D
   • 全域性執行npm i cnpm -g
5. 在專案根目錄建立webpack.config.js檔案。
6. webpack 4.X 提供了約定大於配置的概念，目的是為了儘量減少配置檔案的體積。
   • 預設約定了：
   • 打包的入口是：src-->index.js
   • 打包的輸出檔案是dist-->main.js

            7. cnpm i webpack-dev-server -D  配置依賴到本地，在package.json 檔案中新增配置  "dev":“webpack-dev-server --open

                    webpack-dev-server  資料自動同步

                    --open 自動開啟瀏覽器

                    --port  8080 指定埠號

                    --hot

                    --host 127.0.0.1 指定IP/域名

                    --progress

                    --compress  走網路時壓縮資料 

用一下國內的良心映象。你會發現再執行 npm install webpack --save-dev 會很快的安裝完畢。安裝完成之後，你會發現，專案中多了一個 node_modules資料夾,裡面有一個 .bin和webpack資料夾。

此時我們開啟終端，輸入 webpack會提示 webpak不是內部命令。不用怕，因為這個執行檔案在你的專案node_modules\.bin

下面，只要將這個路徑配入 環境變數的 path中去 ，就可以愉快的使用 webpack了！

npm run dev 時 提示 

'webpack-dev-server' 不是內部或外部命令，也不是可執行的程式

或批處理檔案。

解決辦法：通過npm下載【開發伺服器】外掛， 命令：npm install webpack-dev-server --save

webpack-dev-server


'webpack-dev-server' 不是內部或外部命令，也不是可執行的程式
或批處理檔案。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.


npm ERR! A complete log of this run can be found in:
npm ERR!     D:\dev\nodejs\node_cache\_logs\2018-05-23T13_35_56_938Z-debug.log