一、新建一个文件夹。
mkdir webpack-react-demo
二、在此文件夹下创建package.json文件
右键新建文件也行。这里使用 npm init 初始化项目的方式自动生成。
在webpack-react-demo文件夹下进入CMD命令行,输入npm init,一路enter就行。
三、安装相关的依赖包
react相关: react 、react-dom
babel相关: babel-core、babel-preset-es2015 、babel-preset-react
webpack相关: webpack、babel-loader 、webpack-dev-server
css loader: style-loader css-loader
四、webpack配置文件
根目录下新建webpack.config.js文件
const path = require("path");
module.exports = {
mode:"development",
entry:"./src/js/main.js",//入口文件
output:{//输出配置
filename:"bundle.js",
path:path.resolve(__dirname,"dist")
},
module:{
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]
},
{
test:/\.js$/,
exclude:/node_modules/,
use:["babel-loader"]
}
]
},
// devServer:{
// contentBase:"./"
// }
}
五、配置.babelrc文件
{
"presets":["es2015","react"]
}
六、编码实现
根目录下新建src文件夹,src文件夹下创建js 、css文件夹。
js文件夹下创建App.js main.js 两个文件
css文件夹下创建test.css文件
//App.js文件
import React from "react"
export default function App(){
return <h1>Hell React</h1>
}
//main.js文件
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import "./../css/test.css"
ReactDOM.render(<App></App>,document.getElementById("app"));
/*test.css文件*/
body{
background-color: red
}
然后根目录下创建index.html文件。
dist是打包之后的文件夹。
七、执行webpack命令
上面需要安装webpack-cli 选yes装一下。
另外这里需要安装一下babel-loader@7 的版本。
然后在执行webpack命令,就可以看到打包成功了。
然后在浏览器中打开index.html 就能看到如下效果。
然后我们再试试热更新,输入webpack-dev-server
在浏览器中输入localhost:8080.
然后我们改下test.css文件把背景色改为蓝色试试。
注意:这里要把index.html文件中JS的引用改一下。
webpack-dev-server这里运行的是开发环境,会直接在内存中找bundle.js。
使用webpack-dev-server --open会自动打开浏览器哦。
八、npm start 和npm build的设置。
脚手架中npm start的执行,其底层就是webpack-dev-server的执行。
npm build 就是webpack命令的执行。
在package.json中scripts项作如下配置:
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
},
然后执行下npm start 或 npm build试试。
当然,真正的脚手架里配置远远比这里介绍的要多,封装的也要更好。这里只是简单的实现了一个react的简易版脚手架把。