建立基本的 webpack 4.X 專案
建立基本的webpack 4.X
專案
- 執行
npm init -y
快速初始化專案。在專案生成package.json
檔案。 - 在專案根目錄下建立
src
原始碼目錄和dist
產品目錄。 - 在
src
目錄下建立index.html
和index.js
檔案。 - 使用
cnpm
安裝webpack
,執行cnpm i webpack webpack-cli -D
- 全域性執行
npm i cnpm -g
- 全域性執行
- 在專案根目錄建立
webpack.config.js
檔案。 - 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