最终效果:
配置webpack 自动编译脚本， 内容更改后浏览器页面自动刷新，提高效率。 主要靠webpack 的watch 功能。
npm 全局安装的包： webpack webpack-cli webpack-dev-server.
项目内2个文件 package.json. webpack.config.js 配置如下。截图不是最简单结构， 后面增加redux, react-redux 包加了点东西。
需要建立这样的目录后， npm install 就会根据package.json安装项目需要的包。 而根据webpack.config.js 就会自动运行。 详细的东西不再介绍， 专题学习更加稳妥。
目录结构：
//webpack.config.js 配置文件
const path = require(‘path‘);
module.exports = {
entry: "./www/app/main.js", //入口文件
output: { //出口文件
path: path.resolve(__dirname, "www/dist"), //打包到哪个文件夹中
filename: "bundle.js", //打包到哪个文件
publicPath : "/xuni"
},
watch : true,
mode: "development",
module : {
rules: [
{
test: /\.js$/, //以.js结尾的文件
include: [
path.resolve(__dirname, "www/app") //包括什么文件夹
],
exclude: [
path.resolve(__dirname, "node_modules") //不包括
],
loader: "babel-loader",
options: {
presets: ["env","react"]
}
}
]
}
}
1 //package.json 文件。
2
3 {
4 "name": "react-0327",
5 "version": "1.0.0",
6 "description": "",
7 "main": "index.js",
8 "scripts": {
9 "dev": "webpack-dev-server --content-base ./www --port 8080"
10 },
11 "author": "",
12 "license": "ISC",
13 "devDependencies": {
14 "babel-core": "^6.24.1",
15 "babel-loader": "^7.1.4",
16 "babel-preset-env": "^1.7.0",
17 "babel-preset-react": "^6.24.1"
18 },
19 "dependencies": {
20 "react": "^16.8.5",
21 "react-dom": "^16.8.5"
22 }
}
需要注意的引入babel-loader 后。 相应高低版本问题， 出现问题， 根据提示即可解决。 譬如本例用到env, react 2个babel loader. 是比较新的版本， 如果用babel-present-es2015 则是低版本支持， 根据提示搜索即可解决问题。
根据webpack的配置。 在index.html 引入js 文件方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="xuni/bundle.js"></script>
</body>
</html>
入口Main.js 和组件App.js 分别为：
//main.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
ReactDOM.render(
<App></App>
,
document.getElementById("app")
);
//App.js
import React from "react";
export default class App extends React.Component{
constructor(){
super();
}
render(){
return <div> <h1>React 第一步 </h1></div> } } 参考：
http://???????https://www.valentinog.com/blog/react-webpack-babel/
https://www.cnblogs.com/chenziyu-blog/p/5675086.html
???????
原文地址：https://www.cnblogs.com/hijushen/p/10615960.html
时间： 2024-12-14 17:52:41