Vue學習筆記6——Webpack 案例講解
專案地址：
https://github.com/masterzz/webpack-demos
一、環境準備
由於npm國外映象太慢，用cnpm代替npm處理，安裝cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
首先，全域性安裝webpack
npm i -g webpack webpack-dev-server 這裡會遇到第一個坑 需要通過@確定版本 npm i -g [email protected] [email protected] 為了加快安裝速度，可以先安裝cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org 之後可以用cnpm代替npm進行操作 注意這個webpack-dev-server是用來做自動打包編譯的工具 -g 表示安裝到全域性，使用了這個引數之後，可以當做命令列工具使用 對於webpack-dev-server再說明一點: webpack-dev-server 幫我們打包生成的 bundle.js 檔案，並沒有存放到 實際的 物理磁碟上；而是，直接託管到了 電腦的記憶體中，所以，我們在 專案根目錄中，根本找不到 這個打包好的 bundle.js; 之後進入到如下目錄 cd webpack-demos
下載module
npm install進入到相應demo，並啟動
cd demo01npm run dev二、Webpack講解
1，基本說明
Webpack is a front-end tool to build JavaScript module scripts for browsers.
webpack是一個前端工具，用來給瀏覽器建立js模組的指令碼。
它和Browserify很像，但功能強大得多
Webpack needs a configuration file called webpack.config.js
Webpack需要一個配置檔案webpack.config.js
來看看這個檔案的結構：
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};這個檔案裡的module.exports 是node.js 的語法，所以說webpack是基於node構建的，entry是入口，output是出口
如果沒有這個檔案，可以這麼寫：webpack file file
第一個file就是entry，第二個file就是output
After having webpack.config.js, you can invoke Webpack without any arguments.
配置好這個檔案之後，不用引數就可以啟動webpack（啟動萬之後，它會按照entry和output輸出相關內容）：
$ webpack其實比較麻煩就在這一步，經常會讓你裝一個webpack-cli的東西。如果安裝webpack時加了版本資訊，這個坑可以過掉。這是因為webpack到了新版本（4）它的cli和服務是要分開安裝的。
2，命令列引數及json配置
Some command-line options you should know.
你該知道的一些命令列引數（選項）：
webpack– building for developmentwebpack -p– building for production (minification 壓縮版)webpack --watch– for continuous incremental buildingwebpack -d– including source mapswebpack --colors– making building output pretty
You could customize scripts field in your package.json file as following.
你可以定製指令碼欄位，在package.json檔案：
// package.json
{
// ...
"scripts": {
"dev": "webpack-dev-server --devtool eval --progress --colors",
"deploy": "NODE_ENV=production webpack -p"
},
// ...
}三、案例講解
1，demo1 Entry file
Entry file is a file which Webpack reads to build bundle.js.
For example, main.js is an entry file.
這個案例比較簡單，在demo1裡直接輸入webpack，它會在bundle.js裡生成相關程式碼。（當然可以直接npm run dev）
演示的核心部分就是這個entryfile，通過它可以規定從什麼檔案生成到什麼檔案。
webpack的用處（如果有呼叫其他js可以看得更加明顯）：
1. webpack 能夠處理 JS 檔案的互相依賴關係；
2. webpack 能夠處理JS的相容問題，把 高階的、瀏覽器不是別的語法，轉為 低階的，瀏覽器能正常識別的語法
// main.js
document.write('<h1>Hello World</h1>');index.html
<html>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>Webpack follows webpack.config.js to build bundle.js.
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};Launch the server, visit http://127.0.0.1:8080 .
$ cd demo01
$ npm run dev
2，demo2 Multiple entry files