天天直接使用creat-react-app 也是用腻了 偶尔想试试自己动手搭建一个基于webpack的react项目
毕竟 你用脚手架建立的也是基于webpack建立
还是老样子废话不多说直接上代码
1.在桌面新建立一个空白文件夹 webpack-react
初始化项目 打开命令行 npm init -y
这个时候文件夹中会出现一个package.json文件
2.安装依赖
npm install webpack webpack-cli webpack-dev-server -D // 安装webpack的环境
npm install babel-loader @babel/preset-env @babel/preset-react -D // 安装babel解析
npm install css-loader style-loader -D // 安装样式 loader
npm install url-loader file-loader -D // 安装文件解析loader
npm install html-webpack-plugin -D // 导入html模板自动帮你引入输出的js文件
npm install clean-webpack-plugin -D // 每次运行自动帮你清除 dist目录下的文件
npm install react react-dom -S // 安装react框架
// 至于热更新 支持scss 提取css js png 等等文件的优化操作我就不在这里说了 想要延伸的同学可以参考webpack官网
3.当前项目下新建立一个 index.html 作为html模板文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
4.建立一个src文件夹下面有一个index.js文件 src/index.js 往页面上输出一个Hello React.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css"
class App extends React.Component {
render (){
return (
<div>Hello React.js</div>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'));
5.同时我们引入一个index.css文件 同时引入背景图片 (别忘了在src文件夹下建立一个img文件夹)
body{
background-image: url('./img/bg.jpg');
}
6.在package.json文件中配置启动项目
–watch/-w 监听代码变化,自动打包或者刷新页面 --open 运行的时候自动打开浏览器
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --watch --open",
"build": "webpack -p -w"
},
7.重要的一步,配置我们的webpack
let path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const { CleanWebpackPlugin } =require('clean-webpack-plugin');
module.exports={
mode:'development',
entry:'./src/index.js', // 入口文件,
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist/')
},
module:{
rules:[
{
test:/\.js$/i,
include:path.resolve(__dirname,'src'),
use:{
loader:'babel-loader?cacheDirectory',// 缓存每次的解析结果 加载更快
options:{
presets:[
'@babel/preset-env','@babel/preset-react'
],
plugins: ["react-hot-loader/babel"]
}
}
},
{
test:/\.css$/i,
use:['style-loader','css-loader']
},
{
test:/\.(jpg|png)$/,
use:{
loader:'url-loader',
options:{
publicPath:'./',
limit:4*1024,
}
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'index.html'),//查找模板文件
}),
new CleanWebpackPlugin() //清空dist目录下的文件
]
}
8.启动项目我们试试看
npm run dev
页面上也确实显示出了我们想要的结果 背景图片也出来了
其实今天本来想搞 react-hot-loader 热更新 因为其他的事情耽误了
往后尽快更新出来
如果能帮到你话 我会很开心的！
生活那么苦,为啥不给自己一颗糖吃呢！坚持下去!你会看到不一样的风景！
