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配置复制代码