Webpack热加载和React（其中有关于include和exclude的路径问题）
看了几个React配合webpack的教程，大部分都因为版本问题过时了。终于找到了一个不错的教程。记录下其中的知识点。
首先万分感谢这个教程的制作者。少走了许多弯路，正在学习webpack的小伙伴可以来看看，版本的坑暂时没有！！！！ 2017_7_6又加了一个非常有用的教程
链接如下：webpack-react之webpack篇 --上
链接2如下: webpack+react
- 关于热加载；webpack-dev-server的作用能够保证实时刷新的作用，但它有两种形式，一种是全体刷新，一种是局部刷新，（貌似所谓的热替换直接的意思就是局部刷新？？）在很大的项目中，我们所希望的自然是局部刷新。而在 package.json中这样配置.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --devtool eval-source-map --progress --content-base ./build",
"build": "webpack"
}
之后当启动服务器之后我们要在路径中加上 localhost:xxxx/webpack-dev-server 其中xxxx为端口号，可选范围内随意。之后我们就可以通过谷歌的调试插件看到局部更新的效果了。
- webpack相关
- 关于改名，我们先把webpack.config.js改名成为webpack.dev.config.js，之后在命令行中输入webpack.dev.config.js之后就可以用这个名字启动了，不过此时用webpack已经无效了。
如果想要完全使用这个名字并且用webpack命令启动的话，需要在npm里面的package.json中修改scripts，加入"webpack":"webpack --config webpack.config.js(这里的名字想怎么改就怎么改) --progress --display --colors" - 关于不确定的输出文件名字，比如我们不使用bundle.js而使用
filename:'[name]-[chunkhash].js'，根据教程，使用html-webpack-plugin来达成我们的目的。
- 首先npm install html-webpack-plugin --save-dev
- 之后在webpack.config.js中引入
const htmlWebpackPlugin=require('html-webpack-plusin');，然后我们在output后面加上plugins；[new htmlWebpackPlugin()],之后可以发现我们的插件已经生效，html已经生成了引用。不过在这个时候，它是自动生成的html文件.
源代码仅供参考： https://github.com/dirstart/webpack-learn/tree/for_blog_1/practice/two
如果我们继续在其中添加
const path=require('path');
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/script/main.js',
output:{
// filename:'bundle.js',
filename:'[name]-[chunkhash].js',
path:path.resolve(__dirname,'./dist/js')
},
plugins:[
new htmlWebpackPlugin({
template:'index.html'
})
]
}
添加了template后的作用是，让输出的html以我们template上下文中html为蓝本输出index.html
3.webpack中添加loader的方法有三种，一种是直接在require中添加，比如
require('style-loader!css-loader!./style.css');webpack --module-bind 'css=style!css'这种方法是在命令行中添加- 写在配置文件中
module:{
loaders:[{
test:/\.js$/,
loader:'babel-loader',
query:{
presets:["es2015"]
}
}]
}
另外，关于loader的串联，我们在require文件中只要写"!"就好了，但是我们在配置文件中的模块中需要这样写
{
test:/\.css$/,
loader:["style-loader","css-loader"]
}
注意，模块名要写全，不能直接写style，不然报警了
另外还有其他的写法，下图来自官方文档==========》
{
module: {
loaders: [
{ test: /\.jade$/, loader: "jade" },
// => "jade" loader is used for ".jade" files
{ test: /\.css$/, loader: "style!css" },
// => "style" and "css" loader is used for ".css" files
// Alternative syntax:
{ test: /\.css$/, loaders: ["style", "css"] },
]
}
}
4.关于webpack是如何出html模板文件的呢？主要还是采用loader的机制。我通过下面几张截图来大概阐释一下。同时我感觉这跟Vue，React等有相似的地方。
---首先，这是index.html里面的东西
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
----这是app.js里面的构建，其实就是将我们的Layer挂载在div#app中
import Layer from './components/layer/layer.js';
import './css/common.css';
const App=function(){
var dom=document.getElementById('#app');
var layer=new Layer()
dom.innerHTML=layer.tpl;
}
new App();
-----这个是我们所挂载的东西
import tpl from './layer.html';
import './layer.less';
function layer(){
return {
name:'layer',
tpl:tpl
}
}
export default layer;
---之后采用html-loader来读取这个文件。直接用html-loader这种情况是指不用任何模板的时候。
除此之外，还有使用其他模板来编译html的，比如说ejs，pug(jade)
下图文件为layer.tpl，当然，也可以取名为.ejs格式的，之后从js中import进去，用document.getElementById之后挂载上去
<div class="layer">
<div>this is <%= name %> layer</div>
<% for (var i=0;i<arr.length;i++){ %>
<%=arr[i]%>
<% } %>
</div>
在webpack的loader之中这样写
{
test:/\.tpl$/,
loader:'ejs-loader'
}
Babel相关
1.因为之前总是使用babel-core，babel-loader安装，就会发现常常又少了东西.这个问题待更吧。
2.为什么babel打包的那么慢呢？问题出在loader上，因为loader是非常耗时的东西。我们可以通过过滤掉一些不用编译的文件来提高速度。其实主要就是用include和exclude来包含或者排除范围。示范如下：
module:{
loaders:[{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/,
query:{
presets:["es2015"]
}
}]
}
!!但是问题来了，其实这样的速度提升并不明显，用include才能明显地提升速度
module:{
loaders:[{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/,
include:/src/,
query:{
presets:["es2015"]
}
}]
}
关于包含和排除的文件，也可以调用path的resolve来实现，当我们使用path.resolve(__dirname,'xx')的时候，我们可以发现，我们的速度变得更快了。
var path=require('path');
// var htmlWebpackPlugin=require('html-webpack-plugin');
// console.log("现在的路径是"+path.resolve(__dirname,'/the_last_webpack/app/'));
//如果是 path.resolve(__dirname,'/app/');
//它会输入 ==> E:/app
module.exports={
entry:"./app/main.js",
output:{
path:path.resolve(__dirname,'./build/'),
filename:'bundle.js'
},
module:{
loaders:
[{
test:/\.html$/,
loader:'html-loader'
},{
test:/\.(js|jsx)$/,
loader:"babel-loader",
// exclude:path.resolve(__dirname,'/the_last_webpack/node_modules/'),
exclude:/node_modules/,
//我的上面和下面都是对的，再下方也是对的，但是，为什么path.resolve(__dirname,/app/)是错的？
// include:/app/, 这样也是对的
include:path.resolve(__dirname,'app'),
// include:path.resolve(__dirname,'/app/main.js'),
query:{
presets:["react","es2015"]
}
}]
}
// plugins:[
// new htmlWebpackPlugin({
// filename:'index.html',
// filename:'index.html'
// })
// ]
}
Webpack热加载和React（其中有关于include和exclude的路径问题）的更多相关文章
- 使用webpack热加载，开发多页面web应用
我们一般使用webpack热加载开发SPA应用,但工作中难免会遇到一些多页面的demo或项目. 故参考 kingvid-chan 的代码,搭了一个使用HRM开发多页面web应用的脚手架,刚好也进一步学 ...
- webpack热加载：修改文件自动刷新浏览器并更新
概述 之前用react脚手架,觉得那种修改了能立即自动刷新浏览器并更新的功能实在非常人性化,所以想在开发其它项目的时候能用上.于是查了一些资料记录在此,供以后开发时参考,相信对其他人也有用. 其实代码 ...
- （译文）开始学习Webpack-应用TypeScript，配置热加载和Source Map
项目初始化:采用TypeScript 我们的版本是: $ node --version v8.5.0 $ npm --version 5.5.1 npm版本升级了,因为npm最近带来了新特性,本地会生 ...
- webpack2+node+react+babel实现热加载(hmr)
前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack2中的热替换相比较1更加简洁. 1. 先看效果 2.目录结构 3.项目目录结构文件描述 bin 执行 ...
- webpack3+node+react+babel实现热加载(hmr)
前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack3中的热替换相比较1更加简洁. 1. 先看效果 Demo地址 https://github.com/ ...
- webpack 教程 那些事儿03－webpack两大精华插件，热加载
本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制 文章目录 1. html-webpack-plugin插件的使用 2. webpack-dev-middleware 插件登场 ...
- webpack无法热加载（__webpack_hmr 502）
最近本地开发项目代码一直无法热加载,于是就抽空想办法解决 我们线上的地址是:https://aitest.ichuanyi.com/ai-admin/#/ 其实ai-admin是线上的一个目录 所以 ...
- webpack+express实现“热更新”和“热加载”(webpack3.6以前的做法)
“热更新”:对应的是 'webpack-dev-middleware' 中间件 “热加载”:对应的是 'webpack-hot-middleware' 中间件 为了使用这两个中间件,必须修改“webp ...
- react热加载失败
react热加载失败 原因:路径名字大小写错误, 不是全部加载失败,有的时候可以用,有的时候不可以 热加载插件:webpack-dev-server
随机推荐
- 倍增模板orz
#include<iostream> #include<cstdio> #include<cstdlib> #include<algorithm> #i ...
- 1057 Stack (30)（30 分）
Stack is one of the most fundamental data structures, which is based on the principle of Last In Fir ...
- Codechef Union on Tree
Codechef Union on Tree https://www.codechef.com/problems/BTREE 简要题意: 给你一棵树,\(Q\)次询问,每次给出一个点集和每个点的\(r ...
- 训练集、测试集loss容易出现的问题总结
train loss 不断下降,test loss不断下降:说明网络仍在学习; train loss 不断下降,test loss趋于不变:说明网络过拟合; train loss 趋于不变,test ...
- zabbix发送邮件
1.zabbix服务器上已安装postfix邮件服务,如果没安装用yum安装sendmail也可以(简单) 2.vim /etc/mail.rc 在此配置中加上用户名及密码等,即可用这个账号发送邮件 ...
- loadrunner的四个主要部件
1.VUser Generator :性能脚本开发 2.Controller :提供多线程并发操作 3.Analysis :结果分析 4.Load Generator :负载生成器 ***负载生成器完 ...
- springmvc chrome jsonviewer 一起请求 重复提提交 controller重复执行 2次执行
情况一: springmvc chrome jsonviewer 一起请求 重复提提交 controller重复执行 2次执行 Chrome浏览器地址栏访问接口url,重复请求问题解决 不论刷新还 ...
- Java之网络编程UDP和TCP
注*部分转来的 第1章 网络通信协议 通过计算机网络可以使多台计算机实现连接,位于同一个网络中的计算机在进行连接和通信时需要遵守一定的规则,这就好比在道路中行驶的汽车一定要遵守交通规则一样.在计算机网 ...
- BZOJ4085: [Sdoi2015]音质检测
BZOJ4085: [Sdoi2015]音质检测 由于这题太毒了,导致可能会被某些人卡评测,于是成了一道权限题... 本蒟蒻表示没钱氪金... 但是可以去洛谷/Vijos搞搞事... 但是洛谷上只能评 ...
- mongodb切换到admin
127.0.0.1:后面是端口,/admin是切换到管理员权限 cd C:\Program Files\MongoDB\Server\3.0\bin mongo.exe 127.0.0.1:27017 ...