1 创建项目结构
注意: 先创建一个项目目录 react-app 这个名字自定义，然后进入到这个目录下面
mkdir app //创建app目录 用来存放项目源文件
mkdir dist // 创建dist目录 用来存放打包好的文件
touch webpack.config.js //创建webpack的配置文件
cd app //进入到app目录
touch index.js //在app目录中创建 index文件 入口文件
mkdir component //创建componet目录 用来装组件
2 初始化项目
npm init
做完上面两步，得到项目目录为：
react-webpack.png
3 安装webpack
npm install webpack --save
注意：安装完成以后，项目目录下会生成一个node_modules的文件夹 用来存放npm包
4 打开webpack.config.js 文件 并添加配置项目
const path = require("path");
module.exports = {
entry: {
app: "./app/index.js" //在源文件目录下去找index.js 文件作为打包的入口文件
},
output: {
path: path.resolve(__dirname, "dist"), //生成的文件存放目录
filename: "[name].bundle.js" //生成的文件 name 表示entry下面的app
},
}
5 让npm 可以运行 webpack
在package.json 文件中 添加一条命令
{
"name": "react-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --config webpack.config.js --progress" //添加npm 命令
},
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^4.35.0"
},
"devDependencies": {
"webpack-cli": "^3.3.5" // npm i webpack-cli --save-dev
}
}
注意： 添加完成后就可以 通过 npm run dev 来打包编译 js文件
6 在dist目录下面新建index.html 文件，并且引入打包好的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./app.bundle.js"></script>
</body>
</html>
执行npm run dev 命令后 会在dist目录下面生成一个 app.bundle.js 的文件 运行index.html 文件查看效果
7 通过babel来使用es6
安装相关loader
npm i @babel/core babel-loader @babel/preset-react @babel/preset-env
修改webpack.config.js 配置文件，添加规则
const path = require("path");
module.exports = {
entry: {
app: "./app/index.js"
},
output: {
path: path.resolve(__dirname, "dist"), //生成的文件存放目录
filename: "[name].bundle.js" //生成的文件 name 表示entry下面的app
},
module:{
rules:[
{
test:/\.js$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: { presets: ["@babel/preset-react","@babel/preset-env"] }
}],
},
]
},
}
8 添加react支持
npm install react react-dom babel-preset-react --save
修改 app下面 index.js 文件
import React from 'react';
import ReactDOM from 'react-dom';
class IndexComponent extends React.Component {
render() {
return <h1>hello world!!!</h1>
}
}
const oBox = document.getElementById("box");
ReactDOM.render(<IndexComponent/>, oBox)
npm run dev 然后运行 index.html 文件查看效果
修改dist下面 index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box"></div>
<script src="./app.bundle.js"></script>
</body>
</html>
9 添加web服务器支持
npm i webpack-dev-server --save-dev
修改webpack.config.js文件
const path = require("path");
module.exports = {
entry: {
app: "./app/index.js" //在源文件目录下去找index.js 文件作为打包的入口文件
},
output: {
path: path.resolve(__dirname, "dist"), //生成的文件存放目录
filename: "[name].bundle.js" //生成的文件 name 表示entry下面的app
},
module:{
rules:[
{
test:/\.js$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: { presets: ["@babel/preset-react","@babel/preset-env"] }
}],
},
]
},
devServer: {
contentBase: path.join(__dirname, "dist"), //网站的根目录为 根目录/dist，如果配置不对，会报Cannot GET /错误
port: 9000, //端口改为9000
open:true // 自动打开浏览器，适合懒人
}
}
npm run dev 然后 在浏览器输入 http://loaclhost:9000 查看效果
https://github.com/MacroXiaoWang/webpack4-react
网友评论