Webpack多頁面實現公共頭部尾部和分離生產環境

在平常開發中，常常會遇到這種相似頭部和尾部，多個頁面的擁有相同的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配置複製代碼