一、前段工程化與webpakc
Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。
從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態文件，減少了頁面的請求。
webpack的主要使用場景是單頁面富應用（spa）。spa通常是由一個html文件和一堆按需加載的js組成，如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>webpack app</title>
<link rel="stylesheet" href="dist/main.css">
</head>
</html>
<body>
<div id="app"></div>
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>
export和import是用來導出和導入模塊的。一個模塊就是一個js文件，它擁有獨立的作用域，裏面定義的變量外部是無法獲取的。如將一個配置文件作爲模塊導出：
//config.js
var Config = {
version:'1.0.0'
};
export {Config};
或
//config.js
export var Config = {
version:'1.0.0'
};
其他類型（函數、數組、常量等）也可以導出，比如導出一個函數
//add.js
export function add(a,b){
return a + b;
}
模塊導出後，需要使用模塊的文件使用import 再導入，就可以用這個文件模塊。
//main.js
import{config} from ‘./config’;
import{ add } from './add.js';
console.log(Config);//{version : '1.0.0'}
console.log(add(1,1));// 2
如何使用npm安裝了一些庫，在webpack中直接導入，如：
import Vuefrom 'vue';
import $ from 'jquery';
二、webpack 基礎配置
- 安裝webpack 與 webpack-dev-server
創建目錄
npm init //初始化配置
npm install webpack --save-dev //本地局部安裝webpack
npm install webpack-dev -server – save-dev //安裝 webpack-dev-server, 可以在開發環境提供很多服務，比如啓動服務器，更新、接口代理等
2、就是一個js 文件而已
首先在目錄demo 下創建一個js 文件 webpack.config.js,並初始化內容；
var config = {
}；
module.exports = config;
Webpack中最重要的兩個必選項就是說入口(Entyr)和出口(Output)。入口的作用是webpack從哪裏開始尋找依賴，並編譯。出口是配置編譯後的文件存儲位置和文件名。