webpack环境搭建使用
?
1、安裝：
首先要安裝 Node.js， Node.js 自帶了軟件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建議使用最新版 Node.js。
?
用 npm 安裝 Webpack：$ npm install webpack -g
?
此時(shí) Webpack 已經(jīng)安裝到了全局環(huán)境下，可以通過命令行 webpack -h 試試。
?
通常我們會(huì)將 Webpack 安裝到項(xiàng)目的依賴中，這樣就可以使用項(xiàng)目本地版本的 Webpack。
?
# 進(jìn)入項(xiàng)目目錄
# 確定已經(jīng)有 package.json，沒有就通過 npm init 創(chuàng)建
# 安裝 webpack 依賴
$ npm install webpack —save-dev
?
Webpack 目前有兩個(gè)主版本，一個(gè)是在 master 主干的穩(wěn)定版，一個(gè)是在 webpack-2 分支的測(cè)試版，測(cè)試版擁有一些實(shí)驗(yàn)性功能并且和穩(wěn)定版不兼容，在正式項(xiàng)目中應(yīng)該使用穩(wěn)定版。
?
# 查看 webpack 版本信息
$ npm info webpack
?
# 安裝指定版本的 webpack
$ npm install webpack@1.12.x --save-dev
如果需要使用 Webpack 開發(fā)工具，要單獨(dú)安裝：
?
$ npm install webpack-dev-server —save-dev
?
?
?
2、使用webpack
首先創(chuàng)建一個(gè)靜態(tài)頁面 index.html 和一個(gè) JS 入口文件 require.js：
?
<!-- index.html -->
<html>
<head>
? <meta charset="utf-8">
</head>
<body>
? <script src="bundle.js"></script>
</body>
</html>
?
?
// require.js里邊隨意編輯點(diǎn)內(nèi)容
document.write('這是我的第一個(gè)webpack例子.’)
?
然后編譯 require.js 并打包到 bundle.js：//bundle.js是大包編譯新生成的一個(gè)js
?
$ webpack require.js bundle.js
?
打包過程會(huì)顯示日志：
?
Hash: e964f90ec65eb2c29bb9
Version: webpack 2.3.2
Time: 54ms
? ? Asset ? ? Size? Chunks ? ? ? ? ? ? Chunk Names
bundle.js? 1.42 kB ? ? ? 0? [emitted]? main
?? [0] ./require.js 27 bytes {0} [built]
?
用瀏覽器打開 index.html 將會(huì)看到 這是我的第一個(gè)webpack例子. 。
?
接下來添加一個(gè)模塊 module.js 并修改入口 require.js：
?
// module.js
module.exports = '這個(gè)是來自 module.js.'
// require.js
document.write('這是我的第一個(gè)webpack例子.’)
document.write(require('./module.js')) // 添加模塊
?
重新打包 webpack require.js bundle.js 后刷新頁面看到變化 ‘這是我的第一個(gè)webpack例子.這個(gè)是來自 module.js.’
?
Hash: 279c7601d5d08396e751
Version: webpack 2.3.2
Time: 63ms
? ? Asset ? ? Size? Chunks ? ? ? ? ? ? Chunk Names
bundle.js? 1.57 kB ? ? ? 0? [emitted]? main
?? [0] ./require.js 66 bytes {0} [built]
?? [1] ./module.js 43 bytes {0} [built]
?
Webpack 會(huì)分析入口文件，解析包含依賴關(guān)系的各個(gè)文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會(huì)給每個(gè)模塊分配一個(gè)唯一的 id 并通過這個(gè) id 索引和訪問模塊。在頁面啟動(dòng)時(shí)，會(huì)先執(zhí)行 require.js 中的代碼，其它模塊會(huì)在運(yùn)行 require 的時(shí)候再執(zhí)行。
?
?
//自動(dòng)編譯監(jiān)聽
當(dāng)項(xiàng)目逐漸變大，webpack 的編譯時(shí)間會(huì)變長，可以通過參數(shù)讓編譯的輸出內(nèi)容帶有進(jìn)度和顏色。
?
$ webpack --progress --colors
如果不想每次修改模塊后都重新編譯，那么可以啟動(dòng)監(jiān)聽模式。開啟監(jiān)聽模式后，沒有變化的模塊會(huì)在編譯后緩存到內(nèi)存中，而不會(huì)每次都被重新編譯，所以監(jiān)聽模式的整體速度是很快的。
?
$ webpack --progress --colors —watch //修改保存后自動(dòng)編譯
?
當(dāng)然，使用 webpack-dev-server 開發(fā)服務(wù)是一個(gè)更好的選擇。它將在 localhost:8080 啟動(dòng)一個(gè) express 靜態(tài)資源 web 服務(wù)器，并且會(huì)以監(jiān)聽模式自動(dòng)運(yùn)行 webpack，在瀏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以瀏覽項(xiàng)目中的頁面和編譯后的資源輸出，并且通過一個(gè) socket.io 服務(wù)實(shí)時(shí)監(jiān)聽它們的變化并自動(dòng)刷新頁面。
?
# 安裝
$ npm install webpack-dev-server -g
?
# 運(yùn)行
$ webpack-dev-server --progress --colors
轉(zhuǎn)載于:https://www.cnblogs.com/jhwjanice/p/6646943.html
總結(jié)
以上是生活随笔為你收集整理的webpack环境搭建使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： #在android studio中维护日
- 下一篇： 机器学习面试问题2