webpack2完整踩坑教程(三),本文基于NODEJS环境,nodejs的安装参考线上的流程:https://nodejs.org/en/ 。
Webpack的核心哲学思想1.一切都是模块——就像JS文件可以视作“模块”一样,其他所有的一切(CSS,图片,html)都可以被视作模块,通过require加载。。2.模块加载器会把所有的模块最终打包生成一个巨大的“bundle.js”文件,并且会一直不停进行加载!所以Webpack通过大量的特性去分割你的代码,生成多个“bundle”片段,并且异步地加载项目的不同部分。
三.Webpack-dev-server
Webpack的加载器有两个接口重要的接口:
webpack cli ——默认接口(和webpack一起安装了,就是npm run build,生产版本所使用的)Webpack-dev-server ——通过cli和配置文件(webpack.config.js)的配置项来控制webpack的打包动作,一般为开发版本所用
1.安装webpack-dev-server : npm install webpack-dev-server –save-dev2.创建webpack.config.js文件,并添加基本配置
var path = require('path'); // 导入路径包module.exports={entry:'./src/index.js',//入口文件output:{path:path.join(__dirname,'dist'),// 指定打包之后的文件夹publicPath:'/dist/',// 指定资源文件引用的目录filename:'bundle.js'// 指定打包为一个文件 bundle.js}}
打包所需的路径都已在webpack.config.js配置后,package.json的build则去掉路径,并添加webpack-dev-server启动:”dev”:”webpack-dev-server”
..."scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "rimraf dist && webpack --watch","dev": "webpack-dev-server"},...
运行npm run dev启动webpack-dev-server进行打包,在浏览器输入localhost:8080直接打开,没毛病。修改messages.json的内容,保存,可以看到浏览器实时更新了数据。
在实际开发中,我们往往有以下需求:
1、每次修改代码后,webpack可以自动重新打包,webpack-dev-server有两个用于自动刷新模式:iframe和inline2、浏览器可以响应代码变化并自动刷新(hot)
·iframe页面被嵌套在一个iframe下,代码发生改动后,iframe会重新加载使用此模式无需额外配置,只需访问http://localhost:8080/webpack-dev-server/index.html即可,显然webpack-dev-server默认的模式就是iframe。
·inline为整个页面提供了“Live reloading”功能。webpack官方提供的一个小型Express服务器。
·hot提供了“模块热重载”功能,它会尝试仅仅更新组件被改变的部分(而不是整个页面)。会尝试先去通过 HMR 更新然后可能尝试刷新整个页面。只需要加上一个 webpack/hot/dev-server entry point,并且在 dev-server 调用时加上参数 –hot。如果我们把inline和hot这两个选项都写上,那么当文件被改动时,webpack-dev-server会先尝试HMR,如果这不管用,它就会重新加载整个页面。
hot(HMR)和inline使用有两种方式:CLI和Node.js Api
1>CLI方式比较简单,只需修改package.json中scripts配置,添加 –inline –hot
“dev”: “webpack-dev-server –inline –hot”
2>Node.js Api方式
1.在主目录下,新建dev-server.js文件
var WebpackDevServer=require('webpack-dev-server');var webpack=require('webpack');var config=require('./webpack.config');var path=require('path');var compiler=webpack(config);var server=new WebpackDevServer(compiler,{//创建服务器实例hot:true,//HMR配置filename:config.output.filename,publicPath:config.output.publicPath,//必填stats:{colors:true}});server.listen(8080,'localhost',function(){});
2.修改webpack.config.js配置
var path=require('path');// 导入路径包var webpack=require('webpack');module.exports={entry:[//入口文件'./src/index.js','webpack/hot/dev-server',//调用热重载 hot'webpack-dev-server/client?http://localhost:8080'//添加webpack-dev-server客户端],plugins:[new webpack.HotModuleReplacementPlugin()//全局开启热代码替换],output:{path:path.join(__dirname,'dist'),// 指定打包之后的文件夹publicPath:'/dist/',// 指定资源文件引用的目录filename:'bundle.js'// 指定打包为一个文件 bundle.js}}
3.在index.js最底下添加hot调用
if(module.hot){//启用热重载 module.hot.accept();}
4.修改package.json启动方式
..."scripts": {"build": "rimraf dist && webpack --watch","dev": "node dev-server.js"},...
5.运行npm run dev ,在浏览器输入localhost:8080查看,然后尝试修改index.js或messages.json的数据,保存,再看浏览器,是不是自动刷新了?
就爱阅读www.92to.com网友整理上传,为您提供最全的知识大全,期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2017/03-30/19688288.html