Webpack没有自动编译对React文件中代码的更改
Webpack not compiling changes to code in React file automatically
我最近开始尝试将React与Webpack一起使用,以便在发生更改时自动编译更改。然而,尽管我在谷歌上搜索得很满意,但我似乎找不到为什么它不起作用。
app.js
import React from 'react'
import ReactDOM from 'react-dom'
import {Router, Route, Link} from 'react-router'
import ProductList from './products'
class Main extends React.Component {
constructor(props){
let products = [];
super(props);
this.state = {
name: "Harry"
};
}
render(){
return(
<Storefront name={this.state.name} />
);
}
}
var a = 10;
let Storefront = (props) =>
<div className="container">
<h4>Welcome to the React Store Front, {props.name}!</h4>
<Link to="/products">View Products</Link>
</div>;
ReactDOM.render(
<Router>
<Route path="/" component={Main}/>
<Route path="/products" component={ProductList}/>
</Router>,
document.getElementById("app")
);
package.json
{
"name": "static",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"history": "^1.13.1",
"react-router": "^1.0.2"
},
"devDependencies": {
"babel-core": "^6.3.17",
"babel-loader": "^6.2.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"scripts": {
"dev": "webpack-dev-server --inline --hot --progress --colors --port 8090",
"test": "echo '"Error: no test specified'" && exit 1"
},
"author": "",
"license": "ISC",
"private": true
}
webpack.config.js
module.exports = {
context: __dirname,
entry: ['webpack/hot/dev-server', './app.js'],
output: {
filename: "app.js",
path: __dirname + "/dist"
},
module: {
loaders: [
{
test: /'.js$/,
exclude: /node_modules/,
loaders: ["babel-loader?presets[]=react,presets[]=es2015"]
},
{
test: /'.jsx$/,
loaders: ['babel-loader?presets[]=react,presets[]=es2015']
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
watch: true
};
您必须使用webpack-hot-middleware
NPM链接是NPM
如果你想举例,那么你可以使用react路由器举例react路由器
我使用了和我的webpack.config文件
/* eslint-disable no-var */
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-hot-middleware/client',
'./scripts/index'
],
devtool: 'eval-source-map',
output: {
path: __dirname,
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /'.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'scripts')
}]
}
};
相关文章:
- 从桌面读取python文件时高亮显示代码
- 如何在读取XLS/XLSX本地文件时,使用IE的javascript代码启用未标记为安全的ActiveX控件
- 通过命令行/批处理文件打开页面时,将javascript代码注入Google Chrome
- webpack代码拆分了handlerbs文件——结果是文件很大
- 在CodeIgniter视图中将Javascript或jQuery代码作为PHP文件编写可以吗
- 如何在Google chrome安全首选项文件中创建扩展安全哈希代码
- 在同一命名空间中保留两个独立的javascript文件/代码段
- 从缩小的文件中提取单个 javascript 文件代码
- 在运行时添加复选框并将其保存在 HTML 文件代码中
- 类型错误:在对象 [对象对象] 中找不到函数范围到对象.(第 4 行,文件“代码”)
- 要求JS在加载/解析依赖项之前执行文件代码
- 缺少).(第6行文件“代码”)
- TypeError:无法读取属性“”;值“;从未定义.(第9行,文件“代码”)
- 每日脚本错误报告-ReferenceError:“;errorHandling_;未定义.(第X行,文件“代码”)
- TypeError:无法读取属性“”;namedValues;从未定义.(第9行,文件“代码”)
- '属性列表后缺少}.(文件“代码”的第3行);
- 更新Collada(.从A-Frame或JS中获取文件代码
- typescript如何在没有引用typescript文件代码的情况下生成单个javascript文件
- 从终端运行文件代码(启动本地网站)
- '失踪 ;在语句之前.(第 2 行,文件“代码”)“错误