1.webpack入門程序
入門程序總結:webpack可以將js分模塊開發，開發完成對各模塊代碼打包成一個統一的文件
1.1webpack開發過程
1.1.1)定義一個分模塊的js文件
1.1.2)定義一個主模塊的js文件main.js(名稱任意)
1、在此文件中會引用分模塊js
2、引用vue.min.js（它也一個分模塊）
3、將html頁面中構建vue實例的代碼放在main.js中。
1.2webpack命令打包js文件
1.2.1)webpack main.js build.js ，這段指令表示將main.js打包輸出爲 build.js文件
執行完成，觀察程序目錄是否出現build.js。
1.2.2)在html中引用build.js
2.webpack-dev-server
webpack-dev-server開發服務器，它的功能可以實現熱加載 並且自動刷新瀏覽器。
2.1webpack-dev-server的安裝,下載依賴
執行以下命令:安裝依賴包
cnpm install [email protected] [email protected] [email protected] --save-dev
2.2webpack-dev-server的安裝,修改配置文件
在package.json中配置script
{
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 5008"
},
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
2.3創建webpack.config.js
2.3.1)配置模板文件,去除script,插件會自動引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF‐8">
<title>hello vue</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">
<span v-text="name"></span>
</a>
<input type="text" v-model="num1">+
<input type="text" v-model="num2">=
<span v-text="result"></span>
<button v-on:click="change">計算</button>
</div>
</body>
</html>
2.3.2)創建webpack.config.js 文件
//引用html-webpack-plugin插件，作用是根據html模板在內存生成html文件，它的工作原理是根據模板文件在內存中生成一個index.html文件。
var htmlwp = require('html-webpack-plugin');
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目錄的絕對路徑
filename:'build.js' //輸出文件
},
devtool: 'eval-source-map',
plugins:[
new htmlwp({
title: '首頁', //生成的頁面標題<head><title>首頁</title></head>
filename: 'index.html', //webpack-dev-server在內存中生成的文件名稱，自動將build注入到這個頁面底部，才能實現自動刷新功能
template: 'vue_02.html' //根據vue_02.html這個模板來生成(這個文件請程序員自己生成)
})
]
}
2.4啓動測試
2.5debug調試
2.5.1)配置文件加
devtool: 'eval-source-map',
2.5.2)js文件裏面加
debugger