webpack通過npm安裝, npm集成在Node.js中,所有需要先安裝Node.js。
本篇基于Windows進行實例演示
1. 安裝Node.js
到以下地址現在對應OS的版本 [https://nodejs.org/en/download/](https://nodejs.org/en/download/)
下載后雙擊安裝, 安裝完成, npm也就可以用了。
2. 創建項目路徑。
這里筆者將項目放置在 `D:\devworkspace\nodejs`目錄下, 建立一個空的項目目錄webpack-demo。
3. 使用npm初始化
```
cd D:\devworkspace\nodejs\webpack-demo
npm init -y
```
-y 參數的意思是yes, 即直接忽略所有問答,全部采用默認答案。如果不加該參數,則命令行會提示一系列需要交互的應答。
該命令執行完成會在項目路徑下產生package.json文件, 內容包括模塊名字、版本、描述等的JSON格式的數據。
```
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
```
4. 安裝webpack和webpack-cli
在項目路徑下,執行:
```
npm install webpack webpack-cli --save-dev
```
* webpack是模塊的內容。
* webpack-cli是webpack的工具命令行
* --save-dev 則會把信息記錄到 devDependencies , 不過不加該選項或是使用--save則會把信息記錄到 dependencies 中。
安裝完Node.js之后,在項目路徑下,執行:
```
npm install webpack webpack-cli --save-dev
```
以上執行完成會在項目路徑下創建
* package-lock.json, 文件
* node_modules, 模塊
```
node_modules\.bin\webpack
```
- 引入篇
- 基礎篇
- 快速入手
- 名詞解釋
- Vue語法
- Vue安裝
- Vue實例
- 模板語法
- 計算屬性和偵聽器
- Class與Style綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 進階篇
- 常用模塊
- 單文件組件
- 快速學會Vue Router路由
- Vue Route 進階使用
- Vuex 與狀態管理
- Axios
- Mock.js
- data數據顯示在頁面
- Vue生命周期
- Vue按需加載組件
- 國際化
- 頁面加載進度條 -NProgress
- 自定義主題顏色
- 開發篇
- Vue入門——創建并運行一個Vue項目
- Vue + Element UI 項目創建
- 使用Vue ui項目創建工具在網頁中創建Vue項目
- Vue項目創建入門實例
- Vue CLI
- 創建項目
- 使用Visual Studio Code 開發Vue項目
- 高級篇
- 組件深入
- Vue+Element
- Vue + ElementUI 主題顏色切換
- 工具篇
- 在線代碼編輯器
- 開發工具(IDE,集成開發環境)
- npm(JavaScript包管理工具)介紹
- Node.js(npm)在Windows下安裝
- webpack介紹
- webpack快速實例
- webpack
- 快速入門實例
- 安裝
- 概念
- Nodejs
- 基礎
- npm
- 命令參考
- 命令
- 模塊安裝
- Babel
- 問題解決篇
- ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version -marker
- Vue常見問題
- You are using the runtime-only build of Vue where the template compiler is not
- yarn 報unable to get local issuer certificate
- yarn There appears to be trouble with your network connection. Retrying
- Expected Boolean, got String with value "true".
- 項目篇
- 項目創建
- 項目設計
- 頁面
- 開發問題
- 后端
- Spring Boot + Activiti 工作流框架搭建之一
- Spring Boot + Activiti 工作流框架搭建之二
- 工作流
- Java流程框架
- Activiti
- 頁面風格
- green
- blue
- orange
- 參考篇
- 好的Git項目
- Vue的在線js
- 指令
- 開發說明
- JavaScript 高級
- export和import
- JS模塊化規范對比以及在Node.js的實現
- Storage
- ES2015
- scss
- CSS、Sass、SCSS