在(一)中，只是简单的搭建了一个webpack的架子，接下来使用web-dev-server 与 html-webpack-plugin 来完成html模板的自动生成，与热加载
1.web-dev-server 安装
npm install web-dev-server --save-dev
2.在webpack.config.js中添加devServer
devServer:{
contentBase : path.resolve(__dirname,'dist'), //配置要监听的目录，使用绝对路径
host:"localhost" ,//服务器地址
compress: true, //开启服务器压缩
port:8100 //端口
}
3.启用webpack-dev-server 命令
在package.json的scripts中添加如下代码
"scripts": {
"server": "webpack-dev-server"
}
因为webpack-dev-server没有全局安装，没办法直接在控制台使用这个命令，
这个时候就可以通过npm run server 来运行
4.访问localhost:8100 来查看效果
最新的webpack是默认支持热加载的，只要修改一个index.js就能不刷新页面看到效果了
5.html-webpack-plugin插件使用
npm install html-webpack-plugin --save-dev
这是一个根据html模板自动生成html的插件，因为每次打包出来的js都一个命名的话，浏览器会优先
加载缓存文件，导致不能用到最新的js,所以一般都会在js后面带上一个hash值，但是这样会产生一个
问题，每次打包之后，都要手动的修改<script src></script>中src的值；这个插件就可以帮我们快速
生成；
6.在webpack.config.js中添加配置
const HtmlPlugin = require('html-webpack-plugin');
plugins:[
new HtmlPlugin({
minify:{
removeAttributeQuotes:true //去除属性引号。。。
},
hash:true, //js缓存去除
template: './src/index.html'
})
]
在src中创建index.html模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
7. npm run server
查看localhost:8100 目录结构
截图.png
8. 完成webpack.config.js
const path = require("path");
const HtmlPlugin = require('html-webpack-plugin');
module.exports = {
entry:{
index:["./src/index.js"]
},
output:{
path:path.resolve(__dirname,"dist"),
filename:"bundle.js"
},
plugins:[
new HtmlPlugin({
minify:{
removeAttributeQuotes:true //去除属性引号。。。
},
hash:true, //js缓存去除
template: './src/index.html'
})
],
devServer:{
contentBase : path.resolve(__dirname,'dist'), //配置要监听的目录
host:"localhost" ,//服务器地址
compress: true, //开启服务器压缩
port:8100
}
}
最简单的架子已经搭建好了，包含了：html自动生成，项目热加载；
后面就开始搞react了！
github链接地址: https://github.com/zhujunwei/react_webpack
网友评论