有什么用？
Webpack 是一個前端資源的打包工具，它可以將js、image、css等資源當成一個模塊進行打包。
webpack是一個打包工具，類似於maven，有一個配置文件package.json 好比maven的pom.xml 你寫好依賴，一個命令他幫你下載好需要的模塊。
為什么需要打包？
- 將許多碎小文件打包成一個整體，減少單頁面內的衍生請求次數，提高網站效率。
- 將ES6的高級語法進行轉換編譯，以兼容老版本的瀏覽器。
- 將代碼打包的同時進行混淆，提高代碼的安全性。
下載模塊有4種方式？
npm install moduleName # 安裝模塊到項目目錄下 npm install -g moduleName # -g 的意思是將模塊安裝到全局，具體安裝到磁盤哪個位置，要看 npm config prefix 的位置。 npm install --save moduleName # --save 的意思是將模塊安裝到項目目錄下，並在package文件的dependencies節點寫入依賴。 npm install --save-dev moduleName # --save-dev 的意思是將模塊安裝到項目目錄下，並在package文件的devDependencies節點寫入依賴。
devDependencies 節點下的模塊是我們在開發時需要用的，比如項目中使用的 gulp ，壓縮css、js的模塊。這些模塊在我們的項目部署后是不需要的，所以我們可以使用 -save-dev 的形式安裝。像 express 這些模塊是項目運行必備的，應該安裝在 dependencies 節點下，所以我們應該使用 -save 的形式安裝。
四個核心概念
學習Webpack，你需要先理解四個**核心概念**：
-
入口(entry)
webpack打包的啟點，可以有一個或多個，一般是js文件。webpack會從啟點文件開始，尋找啟點直接或間接依賴的其它所有的依賴，包括JS、CSS、圖片資源等，作為將來打包的原始數據
-
輸出(output)
出口一般包含兩個屬性：path和filename。用來告訴webpack打包的目標文件夾，以及文件的名稱。目的地也可以有多個。
-
加載器（loader）
webpack本身只識別Js文件，如果要加載非JS文件，必須指定一些額外的加載器（loader），例如css-loader。然后將這些文件轉為webpack能處理的有效模塊，最后利用webpack的打包能力去處理。
-
插件(plugins)
插件可以擴展webpack的功能，讓webpack不僅僅是完成打包，甚至各種更復雜的功能，或者是對打包功能進行優化、壓縮，提高效率。
安裝
webpack支持全局安裝和本地安裝，官方推薦是本地安裝，我們按照官方的來。
輸入命令：npm install webpack webpack-cli --save-dev
編寫webpack配置
接下來，我們編寫一個webpack的配置，來指定一些打包的配置項。配置文件的名稱，默認就是webpack.config.js，我們放到hello-vue的根目錄：
配置文件中就是要指定上面說的四個核心概念，入口、出口、加載器、插件。
不過，加載器和插件是可選的。我們先編寫入口和出口
入口entry
webpack打包的啟點，可以有一個或多個，一般是js文件。現在思考一下我們有沒有一個入口？貌似沒有，我們所有的東西都集中在index.html，不是一個js，那怎么辦？
我們新建一個js，把index.html中的部分內容進行集中，然后在index.html中引用這個js不就OK了！
然后把原來index.html中的js代碼全部移動到main.js中
// 使用es6的語法導入js模塊 import Vue from '../node_modules/vue/dist/vue'; import VueRouter from '../node_modules/vue-router/dist/vue-router' import loginForm from './js/login' import registerForm from './js/register' Vue.use(VueRouter) // 創建VueRouter對象 const router = new VueRouter({ routes:[ // 編寫多個路由規則 { path:"/login", // 請求路徑 component:loginForm // 組件名稱 }, {path:"/register",component:registerForm}, ] }) var vm = new Vue({ el:"#app", components:{// 引用登錄和注冊組件 loginForm, registerForm }, router })
-
原來的index.html中引入了很多其它js，在這里我們使用es6的import語法進行導入。
注意，要使用import，就需要在login.js和register.js中添加export導出語句：
const loginForm = { template:` <div> <h2>登錄頁</h2> 用戶名：<input type="text"><br/> 密碼：<input type="password"><br/> </div> ` } export default loginForm;
-
register.js:
const registerForm = { template:` <div> <h2>注冊頁</h2> 用戶名：<input type="text"><br/> 密碼：<input type="password"><br/> 確認密碼：<input type="password"><br/> </div> ` } export default registerForm;
-
vue-router使用模塊話加載后，必須增加一句：Vue.use(VueRouter)
這樣，main.js就成了我們整個配置的入口了。
我們在webpack.config.js中添加以下內容：
module.exports={ entry:'./src/main.js', //指定打包的入口文件 output:{ // path: 輸出的目錄，__dirname是相對於webpack.config.js配置文件的絕對路徑 path : __dirname+'/dist', filename:'build.js' //輸出的js文件名 } }
執行打包
在控制台輸入以下命令：
npx webpack --config webpack.config.js
打包CSS
編寫css文件
我們來編寫一段CSS代碼，對index的樣式做一些美化：
內容：
#app a{ display: inline-block; width: 150px; line-height: 30px; background-color: dodgerblue; color: white; font-size: 16px; text-decoration: none; } #app a:hover{ background-color: whitesmoke; color: dodgerblue; } #app div{ width: 300px; height: 150px; } #app{ width: 305px; border: 1px solid dodgerblue; }
安裝加載器
前面說過，webpack默認只支持js加載。要加載CSS文件，必須安裝加載器：
命令：
npm install style-loader css-loader --save-dev
在main.js引入css文件
因為入口在main.js，因此css文件也要在這里引入。依然使用ES6 的模塊語法：
import './css/main.css'
在webpack.config.js添加加載器
module.exports = { entry: './src/main.js', //指定打包的入口文件 output: { path: __dirname + '/dist', // 注意：__dirname表示webpack.config.js所在目錄的絕對路徑 filename: 'build.js' //輸出文件 }, module: { rules: [ { test: /\.css$/, // 通過正則表達式匹配所有以.css后綴的文件 use: [ // 要使用的加載器，這兩個順序一定不要亂 'style-loader', 'css-loader' ] } ] } }
重新打包
再次輸入打包指令：npx webpack --config webpack.config.js
效果：
script腳本
我們每次使用npm安裝，都會在package.json中留下痕跡，事實上，package.json中不僅可以記錄安裝的內容，還可編寫腳本，讓我們運行命令更加快捷。
我們可以把webpack的命令編入其中：
以后，如果要打包，就可以直接輸入：npm run build即可。
npm run：執行npm腳本，后面跟的是腳本的名稱build
打包HTML
之前的打包過程中，除了HTML文件外的其它文件都被打包了，當在線上部署時，我們還得自己復制HTML到dist，然后手動添加生成的js到HTML中，這非常不友好。
webpack中的一個插件：html-webpack-plugin，可以解決這個問題。
1）安裝插件：npm install --save-dev html-webpack-plugin
需要在webpack.config.js中添加插件：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js', //指定打包的入口文件
output: {
path: __dirname + '/dist', // 注意：__dirname表示webpack.config.js所在目錄的絕對路徑
filename: 'build.js' //輸出文件
},
module: {
rules: [
{
test: /\.css$/, // 通過正則表達式匹配所有以.css后綴的文件
use: [ // 要使用的加載器，這兩個順序一定不要亂
'style-loader',
'css-loader'
]
}
]
},
plugins:[
new HtmlWebpackPlugin({
title: '首頁', //生成的頁面標題<head><title>首頁</title></head>
filename: 'index.html', // dist目錄下生成的文件名
template: './src/index.html' // 我們原來的index.html，作為模板
})
]
}
2）將原來HTML中的引入js代碼刪除：
3）再次打包：npm run build
查看dist目錄：
打開index.html，發現已經自動添加了當前目錄下的build.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--router-link來指定跳轉的路徑-->
<span><router-link to="/login">登錄</router-link></span>
<span><router-link to="/register">注冊</router-link></span>
<div>
<!--vue-router的錨點-->
<router-view></router-view>
</div>
</div>
<script type="text/javascript" src="build.js"></script></body>
</html>
熱更新的web服務
剛才的案例中，每次修改任何js或css內容，都必須重新打包，非常麻煩。
webpack給我們提供了一個插件，可以幫我們運行一個web服務，加載頁面內容，並且修改js后不需要重新加載就能看到最新結果：
1）安裝插件：
npm install webpack-dev-server --save-dev
2）添加啟動腳本
在package.json中配置script
"scripts": { "dev": "webpack-dev-server --inline --hot --open --port 8080 --host 127.0.0.1" },
--inline：自動刷新
--hot：熱加載
--port：指定端口
--open：自動在默認瀏覽器打開
--host：可以指定服務器的 ip，不指定則為127.0.0.1
3）運行腳本：
npm run dev
4）效果：
