最近学习react,公司的项目是使用create-react-app来搭建的,而我想重新使用node+mysql+react来搭建一个新的博客。
今天尝试从零开始搭建一个webpack+react项目,过程还算顺利。总结一下步骤:
1、创建一个项目文件夹Blog,cd进入文件夹目录,输入
npm init -y
生成package.json文件;
2、工程目录创建,如下如是我的工程目录
public是webpack打包后生成的文件夹,src是逻辑组件文件夹,assets是静态文件
webpack.config.js用来配置webpack;.babelrc配置babel
3、创建必须文件
在src文件夹中创建入口文件index.js,创建文件夹conponents用来承载组件;创建App,js作为组件入口文件;
4、安装依赖,以下为我所安装的依赖
5、webpack的配置,重中之重
var path = require('path');
module.export = {
mode:'development',//设置模式
entry:path.resolve(__dirname,'src'),//入口文件
output:{
path:path.resolve(__dirname,'public'),//出口文件夹
filename:'build.js'//输出的文件名称
},
modules:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
},
{
test:/\.scss$/,
loader:['style-loader','css-loader','sass-loader']
}
]
},
devServer:{
inline:true,//实时更新
open:true,//更新后自动打开浏览器
contentBase:path.join(__dirname,'./public')//指向根目录位置,也就是index.html文件位置
}
}
.babelrc配置
{
"presets":["es2015","react"],
"plugins":["transform-object-rest-spread"]
}
6、项目开始
在src的index.js入口文件下
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />,document.getElementById('app'));
components目录下的组件入口文件App.js
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!
</div>
);
}
}
export default App;
7.运行npm start;要在package.json中的scripts字段中设置start命令内容:
"start":"webpace-dev-server --devtool eval --progress --colors"
即可启动项目;如果端口冲突,可在webpack.config.js文件下设置devServer的port属性;