在日常開發中，經常會遇到這種類似頭部和尾部，多個頁面的擁有相同的HTML結構，如果每個頁面都新增這種一樣的程式碼，會讓檔案顯得臃腫，且後期維護成本也很大。因此，我們可以將這些共用的HTML抽取出來形成類似元件的形式，在頁面中直接引入就可以

gulp實現共用HTML

參考這裡 不推薦，因為無法實時編譯。

用Webpack的ejs模板實現HTML共用:

專案結構:

線上瀏覽github.czero.cn/webpackcomm…

Github原始碼,歡迎star

安裝

npm install ejs-loader 
npm install ejs-render-loader
npm install ejs-html-loader
複製程式碼

在webpack.config.js的loader裡面新增

{
	test: /\.ejs$/,
	loader: 'ejs-html-loader',			     
},
複製程式碼

把.html字尾名改為.ejs

然後再HTMLWebpackPlugin裡面指定template為

template: 'ejs-render-loader!index.ejs',
複製程式碼

建立公共html放在common資料夾中，這個demo是共用header和footer，然後建立header.html和footer.html

common/header.html

<header class="header_tab inlink-flex">
	<a href="index.html"><div class="tabItem tabIndex">首頁</div></a>
	<a href="second.html"><div class="tabItem tabSecond">第二頁</div></a>
	<a href="three.html"><div class="tabItem tabThree">第三頁</div></a>
</header>
複製程式碼

common/footer.html

<footer>
	這是共用的尾部程式碼
</footer>
複製程式碼

在.ejs裡面引入公共頁面的頭部和尾部

index.ejs

<% include common/header.html %>
<div>這是首頁</div>
<% include common/footer.html %>
複製程式碼

second.js

<% include common/header.html %>
	<div>這是第二頁</div>
<% include common/footer.html %>
複製程式碼

這樣就可以實現html共用的問題了。

• 但是還有個情況就是，npm run dev除錯程式碼的時候.ejs檔案裡面引用的img路徑會找不到。

解決方法是在webpack.config.js裡面新增 CopyWebpackPlugin，把img資料夾拷貝到生產環境

在webpack.config.js中引入外掛

var CopyWebpackPlugin = require('copy-webpack-plugin');
複製程式碼

在module.exports 中 plugins：

new CopyWebpackPlugin([{
     from: 'runtime/images/*'
}])
複製程式碼

開發環境和生產環境分離

將開發環境和生產環境分離，可以提高程式碼的可讀性和可維護性在不同環境聲宣告不同的除錯方式，執行和打包的速度也不一樣

比方說在開發環境中，我們可以不使用

babel,ExtractTextPlugin,UglifyJSPlugin,postcss等
複製程式碼

一些loader和外掛的使用，因為這樣可以加快我們的編譯速度，減少等待的時間，提高開發效率。

在生產環境中，我們需要對檔案進行壓縮，去除空白和註釋，新增css字尾，在js檔案中新增宣告註釋，將css分離，將es6轉化成es5，提高相容性等等。

##方法:

在package.json檔案中

"scripts": {
    "build": "webpack --optimize-minimize",
    "dev": "webpack-dev-server --config webpack.dev.config.js --open",
    "start": "npm run dev"
  },
複製程式碼

在script宣告中，指定dev執行的是webpack的

npm run dev

執行webpack.dev.config.js配置
複製程式碼

當執行

 npm run build
 
 執行webpack.config.js配置複製程式碼