標籤：alt 沒有 put -- tle 版本 瀏覽器 require type
基於Windows作業系統下搭建webpack的運行環境，這裡採用npm環境，node.js官網下載最新版本的，
這裡忽略下載和安裝，然後直接運行 Node 環境，如所示。
檢查一下，node版本和npm工具的版本確保是最新的，這裡並不是最新版本的，
如果版本都是最新的，那麼就可以來直接搭建webpack一個小demo案例。
1、在F盤中建立一個檔案夾webpack
2、在檔案夾中建立index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>webpack demo</title></head><body> <script src="bundle.js"></script></body></html>
3、建立index.js
alert("webpack運行成功");
4、建立webpack.config.js
module.exports = { entry: ‘./index.js‘, output:{ filename:‘./bundle.js‘ }}
5、在檔案夾空白處 shift + 右鍵 ，選中在此處開啟命令視窗
6、在命令列中輸入 npm init 設定你的項目資訊。（這裡直接 Enter到結束或者輸入命令 npm init -y） 這裡推薦使用 npm init -y
7、在命令列中輸入 npm install webpack --save-dev （局部安裝--推薦） 也可以全域安裝 npm install webpack --g
8、在命令列中輸入 webpack ,看到就可以開啟我們的index.html頁面， 可以看到彈出 “webpack運行成功”。
9、如果我們想引入JQuery,那麼就在命令列中輸入 npm install jquery --save
10、引入JQuery後，index.js添加並使用
alert("webpack運行成功");var $ = require("jquery");alert($);
11、在命令列中輸入 webpack ,重新整理頁面就可以看到彈出的資訊。
從上面可以看出，只要你修改一次就要在控制台中輸入一次webpack命令，那麼有沒有能夠替代他的高效命令工具呢，答案是有的，就是用webpack-dev-server服務，
只要在命令列輸入 npm install webpack-dev-server --save-dev 進行安裝。
12、安裝好後,就可以使用了，在命令列中輸入 webpack-dev- server服務啟動後會有提示本地訪問路徑一般是http://localhost:8080/ ，根據提示在瀏覽器中輸入http://localhost:8080/index.html 就 可以訪問到頁面，然後修改一下index.js 裡面的代碼，這樣儲存好後 ，頁面就能自動重新整理。
注意：如果在使用 webpack-dev- server 的同時，有其他軟體已經使用了8080連接埠的話，可以在 “node_modules\webpack-dev-server\bin“ 找到 webpack-dev-server.js
開啟後找到如進行修改
webpack簡單教程(1)--從零開始搭建一個webpack小例子
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
