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
随机推荐
- 每天一个linux命令（13）：more命令
版权声明更新:2017-05-17博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 本文介绍了Linux下面的mv命令. 2. ...
- Bootstrap日期/日历插件Datepicker 时间加标记
由于工作需要,项目中使用了Bootstrap日期/日历插件Datepicker,根据需求需要在其中添加日期标记,实现效果图如下: 特此记录此次解决方案: 1.首先分析了功能的DOM元素(如下图),可以 ...
- 非系统数据文件损坏，rman备份恢复
实验前提:已经做好备份. SQL> col file_name for a50select file_id,file_name from dba_data_files; FILE_ID FILE ...
- Operating System-Thread(4) 线程的调度激活机制（Scheduler Activations）
本文主要介绍线程的调度激活机制(Scheduler Activations),主要内容: 调度激活机制简介 上行调用(upcall) 中断处理(Interrupt) 一. 调度激活机制简介 上一篇文章 ...
- PTA实验作业-01
一.PTA实验作业 本周要求挑3道题目写设计思路.调试过程.设计思路用伪代码描述.题目选做要求: 顺序表选择一题(6-2,6-3,7-1选一题),代码必须用顺序结构抽象数据类型封装 单链表选择一题(6 ...
- 【转】 Pro Android学习笔记（六六）：安全和权限（3）：Provider权限
目录(?)[-] 访问其他应用的content provider Provider的读写权限 Provider的URI权限 Provider的granting 全局granting 部分URI的gra ...
- js遍历for,forEach, for in,for of
ECMAScript5(es5)有三种for循环 简单for for in forEach ECMAScript6(es6)新增 for of 简单for for是循环的基础语法,也是最常用的循环结构 ...
- Python 图像识别入门篇
一.安装Python依赖 pip install pytesseract pyocr pillow Image pip安装:https://www.cnblogs.com/Javame/p/10918 ...
- [Gym 101334E]Exploring Pyramids(区间dp)
题意:给定一个先序遍历序列,问符合条件的树的种类数 解题关键:枚举分割点进行dp,若符合条件一定为回文序列,可分治做,采用记忆化搜索的方法. 转移方程:$dp[i][j] = \sum {dp[i + ...
- 【总结整理】overflow: auto/hidden;清除自己
.top-nav{ font-size: 12px; font-weight: bold; list-style-type: none; border-bottom: 8px solid #DC4E1 ...