搭建webpack_demo1專案，使其執行起來
webpack的強大就不介紹了，我們直接動手做起來，我們從零開始一步步搭建一個多頁面的系統，多參考webpack中文文件
cmd命令：
mkdir webpack_demo1 #建立資料夾
cd webpack_demo1 #進入資料夾
npm install -g webpack #全域性安裝webpack
npm init #初始化
npm install --save-dev webpack #安裝webpack包
可以安裝淘寶映象 $ npm install -g cnpm –registry=https://registry.npm.taobao.org 上面的npm就可以寫成cnpm
demo1的目錄：
|——node_modules
├─dist # 打包後的檔案
| ├─greeter.js #就放了一句話
| |──main.js #入口檔案
├─src #當前專案的原始碼
| ├─greeter.js #就放了一句話
| |──main.js #入口檔案
|——webpack.config.js #webpack配置檔案
|——package.json #依賴包
1、建專案目錄並完成第一次打包
進入上我們建立的webpack_demo1目錄，建立兩個資料夾，分別是src資料夾和dist資料夾：
src資料夾：用來存放我們編寫的javascript程式碼，可以簡單的理解為用JavaScript編寫的模組。
dist資料夾：用來存放供瀏覽器讀取的檔案，這個是webpack打包成的檔案。
可以理解成src是原始碼檔案，dist是我們編譯打包好的檔案；一個用於開發環境，一個用於生產環境。
在dist檔案下手動建立一個index.html檔案，並寫入下面的程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack_demo1</title>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>在src資料夾下建立main.js和greeter.js，編寫我們的JavaScript程式碼，main.js是我們的入口檔案。
在main.js檔案裡寫:
const greeter=require(`./greeter.js`);
document.getElementById(`root`).innerHTML = greeter();
在greeter.js檔案裡寫:
module.export = function(){
return `第一個webpack demo`;
};
- 第一次打包
在終端下 寫命令：webpack “entry file” “destination for bundled file”
entery file: 入口檔案的路徑，這裡就是src/main.js
destination for bundled file: 填寫打包後存放的路徑，這裡就是dist/bundle.js
所以終端寫：webpack src/entry.js dist/bundle.js(webpack非全域性安裝執行：node_modules/.bin/webpack src/main.js dist/bundle.js)
成功後，在dist資料夾下會出現一個bundle.js
2、通過配置檔案來使用Webpack打包
在根目錄下新建一個名為webpack.config.js的檔案，
標準的webpack配置模板：
module.exports={
entry:{}, //配置入口檔案的地址,可以是單一入口，也可以是多入口。
output:{}, //配置出口檔案的地址,在webpack2.X版本後，支援多出口配置。
module:{},//配置模組：主要是解析CSS和圖片轉換壓縮等功能。
plugins:[],//配置外掛，用於生產模版和各項功能
devServer:{} //配置webpack開發服務功能
}
我們在其中寫入如下所示的簡單配置程式碼: 入口檔案路徑/打包後檔案的存放路徑:
const webpack = require(`webpack`);
const path = require(`path`);
module.exports = {
entry: __dirname + "/src/main.js",//已多次提及的唯一入口檔案
output: {
path: __dirname + "/dist",//打包後的檔案存放的地方
filename: "bundle.js"//打包後輸出檔案的檔名
},
module:{},
plugins:[],
devServer:{}
};
//__dirname”是node.js中的一個全域性變數，它指向當前執行指令碼所在的目錄。
- 第二次打包 （先刪掉dist中已有的bundle.js）
在終端下 寫命令：webpack（wepack非全域性安裝執行：node_modules/.bin/webpack）
成功後，在dist資料夾下會出現一個bundle.js
3、更快捷的執行打包
在命令列中輸入命令”node_modules/.bin/webpack”這樣的操作是比較煩人的，不過值得慶幸的是npm可以引導任務執行，
對npm進行配置後可以在命令列中使用簡單的npm start命令來替代上面略微繁瑣的命令：
在package.json中對scripts物件新增一條下命令："start": "wepack"
注意：package.json中的script會安裝一定順序尋找命令對應位置，本地的node_modules/.bin路徑就在這個尋找清單中，所以無論是全域性還是區域性安裝的Webpack，都不需要寫前面那指明詳細的路徑了。
- 第三次打包：（先刪掉dist中已有的bundle.js）
在命令列中輸入：npm start
成功後，在dist資料夾下會出現一個bundle.js
使用webpack構建本地伺服器
讓瀏覽器監聽你的程式碼的修改，並自動重新整理顯示修改後的結果：
在終端輸入：npm install --save-dev webpack-dev-server
在package.json中對scripts物件新增一條下命令用以開啟本地伺服器： "server": "webpack-dev-server --open"
在webpack.config.js中新增devServer:
devServer:{
contentBase:path.resolve(__dirname,`dist`), //設定基本目錄結構,本地伺服器所載入的頁面所在的目錄
host:`localhost`,//伺服器的IP地址，可以使用IP也可以使用localhost
inline: true,//實時重新整理
compress:true,//服務端壓縮是否開啟，一般設定為開啟，
historyApiFallback: true,//不跳轉
port:1818 //配置服務埠號，建議不使用80，很容易被佔用，這裡使用了1818
}
在頁面上已經可以看到一句話了” 第一個webpack demo “;
關於入口和出口配置的寫法及其解釋
entry入口：
單入口有以下寫法：
entry: __dirname + "/src/main.js",
entry: `./src/main.js`,
多入口有以下寫法：
entry:{
index: `./src/main.js`,
selectList:`./src/***.js`
},
output出口：
output: {
path: __dirname + "/dist",//打包後的檔案存放的地方
// path:path.resolve(__dirname,`dist`),
filename: "bundle.js"//打包後輸出檔案的檔名
//filename:`[name].js`
// filename:`js/[name].js`
// filename:`js/[name].bundle-[chunkhash:8].js`
},
filename: "[name].js"
filename: "[name]-[hash].js"
打包檔名： main.js
main-6672c04f6c9672410a61.js
filename:`js/[name].js`:
打包目錄是：|——dist
| |——js
| | |——main.js
filename:`js/[name].bundle-[chunkhash:8].js` :
打包目錄是：|——dist
| |——js
| | |——main.bundle-d0dea2df.js
[name]：是根據入口檔案的名稱，打包成相同的名稱，有幾個入口檔案，就可以打包出幾個檔案。
[chunkhash:8]: 數字和字母組成的8位雜湊值
__dirname：是node.js中的一個全域性變數，它指向當前執行指令碼所在的目錄，列印出來是：webpackwebpack_demo1
path:使用Node內建的path模組，並在它前面加上__dirname這個全域性變數。
可以防止不同作業系統之間的檔案路徑問題，並且可以使用相對路徑按照預期工作。
建議使用：filename:`js/[name].bundle-[chunkhash:8].js`:
可以通過命中快取，以降低網路流量，使網站載入速度更快，
然而，如果我們在部署新版本時不更改資源的檔名，瀏覽器可能會認為它沒有被更新，
就會使用它的快取版本。由於快取的存在，當你需要獲取新的程式碼時，就會顯得很棘手。 關於快取：看文件