极客观点
项目管理
HarmonyOS
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
我的人Hello World!!!<br />
</div>
);
}
}
export default App;index.html
<!DOCTYPE html><html>
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body></html>main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app')) package.json
{
"dependencies": {
"babel-core": "^6.26.0",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"express": "^4.15.4",
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.6.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-dev-server": "^2.8.2"
},
"name": "reactApp01",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server --hot --inline"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
var config = {
//此处指明路口文件位置
entry: './main.js', //设置入口文件
//配置打包结果，
//path配置定义了输出的文件位置
//filename则定义了打包结果文件的名称
devtool: 'inline-source-map',
output: {//输出目录
filename: 'bundle.js',//设置导出文件为index.js
path: path.resolve(__dirname, 'dist')//打包后的js文件存放的地方
},
//设置本地服务器端口号为9001，此端口可以自己设定，但记住不能与其他服务端口重复
devServer:{
contentBase: './dist',//tell the dev server where to look for files
hot: true,
inline:true,
port:7700
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
//定义了对模块的处理逻辑，这里可以用loaders定义一系列的加载器，以及一些正则，
//当需要加载的文件匹配test的正则时，会调用后面的loader对文件进行处理，
//所以这就是webpack骚的可怕的地方。。。。。
module:{
loaders:[{
test:/\.jsx?$/,
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['es2015','react']
}
}]
}
};
module.exports = config;
热部署失效那个是因为你虽然引入了HMR的webpack插件，但是入口处没有配置HMR的entry文件，详细的配置去webpakc官方文档看下，或者直接使用 HMR 的 middleware，不需要配置任何东西。
update:
contentBase 在 webpack devserver 中使配置静态资源伺服的路径的，注释掉默认就是你的当前 workspace 路径。
至于为什么注释掉 hmr 就好用了，不是特别清楚你的项目目录结构，所以也不知道为什么就好用了。