基于打包工具Webpack进行项目开发实例(2)

{ "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是不起作用,会报错误的,错误如下图所示:

基于打包工具Webpack进行项目开发实例

 

这是因为在使用的过程中没有使用插件的原因,只需要将下面命令添加到配置文件即可:

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进行项目开发实例

 

至此,我们完成了webpack实时构建的配置,当我们进行修改某一样式文件或者js文件的时候,项目就会重新打包,并且自动刷新加载到浏览器中.

如下面链接提示:,进行实时构建的搭建webpack-dev-server实时搭建

同时该项目使用的代码在github地址如下:github地址

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/74b9f95e963111aa6479998e6505b1c0.html