一、安裝和配置webpack
1、全局安裝webpack
這樣就安裝好了webpack，可以再全局通過webpack -v來查看是否安裝成功。
2、先創建項目目錄結構，根目錄是mywebpack。進入項目根目錄，執行：npm init，生成package.json文件，內容就是一堆json數據，基本就是在終端里輸入的信息。
3、進入項目根目錄局部安裝webpack，進入./mywebpack，執行：npm install webpack --save-dev，局部安裝webpack成功了，根目錄下會出現一個node_modules文件夾。
以后我們在根目錄下通過npm安裝的各種依賴包都會默認安裝到這個文件夾下面。
然后，webpack -v可以查看webpack版本；或進入node交互環境，require("webpack")，看能不能獲取到webpack
現在我們項目的webpack框架就准備好了，接下來我們要使用它來處理各種東西了。
4、進入根目錄，建兩個文件夾，分別為src和dist
（1）src文件夾：用來存放我們編寫的javascript代碼，可以簡單的理解為用JavaScript編寫的模塊。
（2）dist文件夾：用來存放供瀏覽器讀取的文件，這個是webpack打包成的文件。
在dist下建立一個index.html文件，寫入以下代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
這里引入的bundle.js 可以先不管，這個文件現在還沒有，這是用webpack打包后生成的文件
src下建一個index.js文件，寫入代碼：
document.write("It works.");
5、在根目錄新建一個webpack.config.js文件，然后開始配置：
const path = require('path'); module.exports={ //入口文件的配置項
entry:{ entry:'./src/index.js' }, //出口文件的配置項
output:{ //輸出的路徑，用了Node語法
path:path.resolve(__dirname,'dist'), //輸出的文件名稱
filename:'bundle.js' }, mode:"development",//注意最新版本必須加mode，否則會報錯 //模塊：例如解讀CSS,圖片如何轉換，壓縮
module:{}, //插件，用於生產模版和各項功能
plugins:[], //配置webpack開發服務功能
devServer:{} }
6、然后在終端輸入：webpack，進行打包，之后我們就可以在disc目錄下看到打包生產的bundle.js文件，並能成功運行index.html文件。
注意：上面的mode項在最新版本是必須得加的，否則會給你報下面這個錯誤
二、多入口、多出口配置
const path = require('path'); module.exports={ //入口文件的配置項
entry:{ entry:'./src/index.js', entry2:'./src/Greeter.js' }, //出口文件的配置項
output:{ //輸出的路徑，用了Node語法
path:path.resolve(__dirname,'dist'), //輸出的文件名稱
filename:'[name].js' }, mode:"development", //模塊：例如解讀CSS,圖片如何轉換，壓縮
module:{}, //插件，用於生產模版和各項功能
plugins:[], //配置webpack開發服務功能
devServer:{} }
在入口文件中，新增了一個entry.js的入口文件，這個文件需要手動建立，出口文件的filename，我們把原來的bundle.js修改成了[name].js
[name]的意思是根據入口文件的名稱，打包成相同的名稱，有幾個入口文件，就可以打包出幾個文件。
在終端輸入 webpack 進行打包
