柏林家政网站重构项目（二）
*—-
第二部分***
一、html的模块化
1.在view文件夹下下建立一个layout文件夹放置公共模块，html-head.html
然后使用<%%>来引入html-head.html
<!DOCTYPE html>
<html>
<%=require("html-loader!./layout/html-head.html")%>
<body>
<div>
</div>
</body>
</html>前面在webpack.config.js中配置的一个html支持图片加载的要删除代码是：
{ test:/\.html$/,use:'html-withimg-loader'}不删除将无法支持<%%>（这部分我调试了好久）
二、核心部分：babel-core
首先是安装
npm install babel-core babel-loader babel-preset-env babel-preset-react -D配置如下：
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader'
},
exclude:/node_modules/ //排除不编译node_modules文件
}然后是加载图片，在HTML中加载图片需要改一处配置
{ test: /(\.jpg|\.png|\.jpeg|\.gif)$/, use:{loader:'file-loader',query:{name : '../assets/[hash].[ext]'}}},
//后面的query的意思是打包到dist文件下的assets文件夹下
//同时在压缩代码时保证html引入的正确性在html中引入图片是<img src="${ require('../image/a.jpg') }">
在css中引入图片,安装url-loader
npm install url-loader -D
配置：
{ test: /\.(jpg|png|jpeg|gif|woff|ttf|svg|eot|xttf|woff5)$/, loader: 'url-loader?limit=100&name=image/[name].[ext]'}三、开发利器 dev-server
安装 ：devserver：npm install webpack-dev-server -D
配置：
devServer:{
contentBase:"./dist",//选择服务器路径,即服务器根目录选择
host:'localhost',//服务器地址
port:"3000",//端口
inline:true//实时刷新
}
package.json中命令配置
"dev": "set WEBPACK_ENV=dev && webpack-dev-server --inline"