本文介绍了webpack实现热更新(实施同步刷新),分享给大家,希望对大家有帮助。
实现热更新,首先,安装一系列的节点命令,如果嫌麻烦,你可以直接看解决方案二,相对来说比较简单。
<强> 1,webpack命令安装
npm安装webpack - g
npm init
npm init -//可以创建默认的package.json
npm安装webpack——save-dev
npm安装路径fs html-webpack-plugin extract-text-webpack-plugin autoprefixer webpack-dev-server——save-dev
npm安装css-loader style-loader——save-dev//样式文件,我们需要两种加载程序,css-loader和style-loader, css-loader会遍历css文件,找到所有的url(…)并且处理.style-loader会把所有的样式插入到你页面的一个样式标签中。
之前
webpack使用命令:(知道有这个东西就行,这里不做过多介绍)
webpack——配置XXX。js//使用另一份配置文件(比如webpack.config2.js)来打包
webpack——看//监听变动并自动打包
webpack - p//压缩混淆脚本,这个非常非常重要!
webpack - d//生成地图映射文件,告知哪些模块被最终打包到哪里了
之前
其中的- p是很重要的参数,曾经一个未压缩的700 kb的文件,压缩后直接降到180 kb(主要是样式这块一句就独占一行脚本,导致未压缩脚本变得很大)。
<强> 2,webpack支持es6转码安装
//安装转码规则
npm安装babel-core babel-loader babel-preset-es2015 babel-preset-React babel-preset-stage-0 -save-dev
<强> 3,webpack + es6 +反应安装命令:
npm安装反应react-dom react-router react-hot-loader css-loader jsx-loader——save-dev//react-hot-loader是一款非常好用的反应热插拔的加载插件,通过它可以实现修改,运行同步的效果,配合webpack-dev-server使用更佳!
之前
附注:
css加载不出来的时候或者报错的时候(模块没有找到错误:错误:不能解决模块“风格”在D: \ workspace \ HBuilder React_Probject \ webPack-demo1 \ webpck \ app)
执行这两个命令:
美元npm我style-loader - d
美元npm我css-loader - d
之前
只要你按照命令安装,即可实现,接下来我附加上我的实现代码:需要几个文件:
<强> 1,package.json文件
在package.json文件中为脚本添加,方便使用命令:
最终package.json文件如下
"脚本":{
“开始”:“节点dev-serve.js”
},
最终package.json文件如下:
{
“名称”:“深蓝”,
“描述”:“反应js工具组件”,
“版本”:“1.1.1”,
“关键词”:[
“react-component”,
“react-utils”,
“效用”反应
),
"脚本":{
“开始”:“节点dev-serve.js”
}，
" src ": " src ",
“测试”:“测试”,
“距离”:“距离”,
:“mainInput ReactUtils”,
“mainOutput”:“主要”,
“依赖”:{
“异步”:“^ 0.9.0”,
“骨干”:“^ 1.1.2”,
“引导”:“^ 3.2.0”,
:“es6-promise ^ 1.0.0”,
“通量”:“^ 2.0.1”,
:“font-awesome ^ 4.2.0”,
“驼峰”:“0.0.1”,
“jquery”:“^ 2.1.1”,
“jquery.ui。小部件”:“^ 1.10.3”,
:“json5 ^ 0.2.0”,
“少”:“^ 1.7.5”,
:“less-loader ^ 0.7.7”,
:“lodash ^ 2.4.1”,
“时刻”:“^ 2.8.3”,
:“normalizr ^ 0.1.2”,
q:“^ 1.0.1”,
:“react-hot-loader ^ 0.4.5”,
:“rimraf ^ 2.2.8”,
“路线”:“^ 1.2.0”,
“搞”:“^ 0.18.2”,
:“codemirror 3.20.0”
}，
“库”:{
“类型”:“git”,
“url”:“git + ssh://git@github.com/sahusoftcom/react-utils.git”
}，
" devDependencies ": {
:“autoprefixer ^ 6.6.1”,
:“babel-core ^ 6.21.0”,
:“babel-loader ^ 6.2.10”,
:“babel-preset-es2015 ^ 6.18.0”,
:“babel-preset-react ^ 6.16.0”,
:“css-loader ^ 0.6.12”,
:“extract-text-webpack-plugin ^ 1.0.1”,
“fs”:“0.0.1-security”,
“吞咽”:“^ 3.8.8”,
:“gulp-concat ^测试盒框”,
:“gulp-jshint ^ 1.8.4”,
:“gulp-rename ^ 1.2.0”,
:“gulp-sass ^ 0.7.3”,
:“gulp-uglify ^ 1.0.1”,
:“gulp-util ^ 3.0.1”,
:“html-webpack-plugin ^ 2.26.0”,
:“jshint-loader ~ 0.6.0”,
:“jsx-loader ^ 0.11.2”,
“业力”:“~ 0.10.9”,
:“karma-chrome-launcher ~ 0.1.2”,
:“karma-firefox-launcher ~ 0.1.3”,
:“karma-jasmine ~ 0.1.5”,
:“karma-phantomjs-launcher ~ 0.1.1”,
:“karma-script-launcher ~ 0.1.0”,
:“karma-webpack-plugin ~ 1.0.0”,
“路径”:“^ 0.12.7”,
:“postcss-loader ^ 1.2.1”,
“反应”:“^ 15.4.2”,
:“react-dom ^ 15.4.2”,
:“react-hot-loader ^ 0.4.5”,
:“react-router ^ 3.0.0”,
:“style-loader ^ 0.6.5”,
:“url-loader ~ 0.5.4”,
:“webpack ^ 1.14.0”,
:“webpack-dev-server ^ 1.16.2”
}，
“虫子”:{
“url”:“https://github.com/sahusoftcom/react-utils/issues”
}，
“主页”:“https://github.com/sahusoftcom/react-utils readme”,
“主要”:“app.js”,
“作者”:“深蓝”,
“许可证”:“ISC”
}
