{ "name": "react-basics-review", "version": "1.0.0", "description": "a practise of react study ", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":"webpack-dev-server --inline" }, "repository": { "type": "git", "url": "git+https://github.com/suwu150/react-basics-review.git" }, "author": "jkwu", "license": "ISC", "bugs": { "url": "https://github.com/suwu150/react-basics-review/issues" }, "homepage": "https://github.com/suwu150/react-basics-review#readme", "devDependencies": { "babel-plugin-transform-object-rest-spread": "^6.23.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.5", "lodash": "^4.17.4", "mocha": "^3.5.0", "react": "^15.6.1", "style-loader": "^0.18.2", "webpack": "^3.5.5", "webpack-dev-server": "^2.7.1" }, "dependencies": { "lodash": "^4.17.4" } }
webpack配置文件修改为如下内容:
devServer中常用的配置对象属性如下：
* 1. contentBase：”./” // 本地服务器在哪个目录搭建页面，一般我们在当前目录即可；
* 2. historyApiFallback：true // 当我们搭建spa应用时非常有用，它使用的是HTML5 History Api，任意的跳转或404响应可以指向 index.html 页面；
* 3. inline：true // 用来支持dev-server自动刷新的配置，webpack有两种模式支持自动刷新，一种是iframe模式，一种是inline模式；使用iframe模式是不需要在devServer进行配置的，只需使用特定的URL格式访问即可；不过我们一般还是常用inline模式，在devServer中对inline设置为true后，当我们启动webpack-dev-server时仍要需要配置inline才能生效，这一点我们之后再说；
* 4. hot：true // 启动webpack热模块替换特性，这里也是坑最多的地方，不少博客都将hot设置了true，这里其实如果单单设置为true是不起作用,会报错误的,错误如下图所示:
这是因为在使用的过程中没有使用插件的原因,只需要将下面命令添加到配置文件即可:
plugins:[ new webpack.HotModuleReplacementPlugin(), ],
也就是调用webpack的热模块插件处理.
*5 .port：端口号(默认8080) ；
*6.其他配置信息
–quiet 控制台中不输出打包的信息
–compress 开启gzip压缩
–progress 显示打包的进度
–open 自动打开浏览器
var path = require('path'); const webpack = require ("webpack"); module.exports = { entry: path.join(__dirname, 'index'), output: { path: __dirname, filename: 'bundle.js', publicPath: "/assets/", }, module:{ loaders: [ { test: /\.css$/, loaders: ['style-loader', 'css-loader'] } ] }, plugins:[ new webpack.HotModuleReplacementPlugin(), ], devServer:{ //我们在这里对webpack-dev-server进行配置 contentBase: "./", historyApiFallback:true, inline:true, hot:true } };
index.html文件的内容修改为下面面格式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>身在山中不知山高</div> <script src="https://www.jb51.net/assets/bundle.js"></script> </body> </html>
也就是将路径进行修改,因为在webpack.config.json文件中进行了服务器路径的配置,修改了 publicPath: "/assets/",项,在命令行执行npm run start能看到服务器正常启动,然后我们去浏览器进行访问,如下所示结果:
至此,我们完成了webpack实时构建的配置,当我们进行修改某一样式文件或者js文件的时候,项目就会重新打包,并且自动刷新加载到浏览器中.
如下面链接提示:,进行实时构建的搭建webpack-dev-server实时搭建
同时该项目使用的代码在github地址如下:github地址