node.js+webpack項目安裝簡易流程,及遇到的小坑

安裝過程

1.首先要安裝 Node.js, Node.js 自帶了軟件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持,建議使用最新版 Node.js。
2.用 npm 安裝 Webpack:
這裏我們使用的是將webpack安裝到項目依賴中,這樣就可以使用項目本地版本的 Webpack。

# 進入項目目錄
# 確定已經有 package.json,沒有就通過 npm init 創建
# 安裝 webpack 依賴
$ npm install webpack --save-dev

也可以將webpack安裝到全局模式下:

$ npm install webpack -g

可以通過命令行 webpack -h 試

  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

使用

首先創建一個靜態頁面 index.html 和一個 JS 入口文件 entry.js:

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>
// entry.js
document.write('It works.')

然後編譯 entry.js 並打包到 bundle.js:

$ webpack entry.js bundle.js
$ webpack entry.js bundle.js 遇到錯誤

提示錯誤:

bash:webpack:command not found

產生錯誤原因:
  打包時指定了入口文件後,webpack將自動識別所依賴的其它文件,不過需要注意的是如果你的webpack 不是全局安裝的那麼當你在終端使用此命令時需要額外指定其在node_modules中的地址
修改方法:

node_modules/.bin/webpack entry.js bundle.js

打包運行

打包過程會顯示日誌:

Hash: e964f90ec65eb2c29bb9
Version: webpack 1.12.2
Time: 54ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./entry.js 27 bytes {0} [built]

用瀏覽器打開 index.html 將會看到 It works. 。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章