webpack入門——安裝與Demo

安裝    參考地址

npm install --save-dev webpack

npm install --save。如果你在安裝一個用於開發環境目的的 package 時（例如，linter, 測試庫等），你應該使用 npm install --save-dev

查看webpack和node的版本：

webpack -v  //如果webpack是 v4+ 版本，你還需要安裝 CLI        npm install --save-dev webpack-cli

node -v

 

Demo  參考地址

1.在命令行中，(ctrl + R ——>cmd)創建webpack項目文件

mkdir webpack_demo

cd webpack_demo  //切換到項目目錄

npm init    //若沒有webpack_demo文件夾中沒有package.json，就執行這個命令，一路回車，最後一個輸入'y',生成該文件

2.新建文件夾src、dist，在dist下新建index.html，src下新建index.js

index.js中內容：document.getElementById('title').innerHTML="hello!!";

執行npx webpack命令，生成打包文件main.js，出現下方提示表示打包成功(Node 8.2/npm 5.2.0 以上版本提供的 npx 命令)

在瀏覽器中查看，可以用插件live-server

安裝命令：npm install --g live-server

live-server  //自動在瀏覽器中運行html,頁面輸出‘hello!!’表示打包正確