### 名詞
* bundle, 打包之后生成的文件, 翻譯是: 包,束
* chunk, 代碼塊, 翻譯:大塊。
多個chunk合在一起就是bundle。
### 快速實例
1. 安裝Node.js
2. 安裝webpack
3. 創建項目目錄和編寫代碼 ,
這里的項目名字是webpack, 該目錄下的src目錄存放源碼。
webpack\src
- hello.js , 作為被引用的子模塊文件。定義一個hello()的方法。
- index.js, 導入hello模塊,并調用hello()函數。
4. 配置webpack.config.js
這里以index.js為入口文件進行打包,打包到dist\bundle.js文件中。
```
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
```
* entry, 入口,配置需要打包的入口文件
* output, 打包后的路徑和文件名配置
5. 在命令行執行webpack命令打包, 命令執行完成,會在項目路徑下產生dist\bundle.js。該文件的內容基本是看不懂了。
6. 使用打包后的文件,進行驗證。
在項目目錄下創建index.html文件,內容如下:
```
<!doctype html>
<html>
<head>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
```
使用瀏覽器打開該文件既可以看到效果了。
### package
```
npm -y init
```
產生 package.json 文件, 該文件是npm的模塊描述文件。
```
npm run test
npm run dev
```
npm run script執行的時候會創建一個Shell,這個shell 將當前目錄的可執行依賴目錄(node_modules/.bin)添加到環境變量path中,執行之后恢復原樣。會直接找到node_modules/.bin對應的腳本,而不需要加上路徑。
- 引入篇
- 基礎篇
- 快速入手
- 名詞解釋
- 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