webpack 構建項目入門

標籤：安裝   查看   npm   報錯   目錄檔案   ini   運行   save   構建   

參考http://www.cnblogs.com/eyunhua/p/6398885.html

---------------------------------------------------------------------

已安裝node.js,利用npm輸入命令全域安裝（-g）

npm install webpack -g

　　安裝完後，輸入 webpack -v  查看當前webpack的版本號碼。

正式使用Webpack

     進入項目目錄，輸入命令：npm init，產生package.json檔案（可以安裝命令一步步操作 也可以自己建一個package.json檔案）

命令方式的話 按照小括弧 的提示輸入內容即可，沒有提示的可以不寫。

輸入完yes 可以看到在工程目錄下有了此package.json檔案。

非命令式 直接自己建立一個package.json，內容即

{  "name": "webpack",  "version": "1.0.0",  "description": "webpack\u001b[A\u001b[B test",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "devDependencies": {    "webpack": "^3.5.2"  }}

.輸入命令：npm install webpack --save-dev 為項目添加webpack依賴。

有個插曲，有報錯 （package.json工程名是webpack 而此工程的目錄檔案夾也是webpack，所以把package.json中的

 "name": "webpack" --》 "name": "webpack——project"

）

建立一個靜態檔案hello.js，裡麵包含一個hello函數和通過require引入world.js

word.js內容

function world() {   return {   };}

 

運行命令之前，hello.bundle.js不存在

運行命令：webpack hello.js hello.bundle.js，將hello.js編譯並打包到hello.bundle.js

Webpack 會分析入口檔案，解析包含依賴關係的各個檔案。這些檔案（模組）都打包到 bundle.js 。Webpack 會給每個模組分配一個唯一的 id 並通過這個 id 索引和訪問模組

webpack 構建項目入門