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