React项目构建
1.先建立一个文件夹,然后初始化npm init,生成package.json文件;
2.安装webpack相关插件npm install webpack webpack-cli webpack-dev-server webpack-merge ,其中,webpack-cli是webpack的命令工具,既然安装webpack,就必要安装这个,webpack-dev-server用于启动http服务,webpack-merge用于融合配置文件;
3.安装react相关插件npm install react react-dom;
4.安装babel相关插件npm install babel-loader @babel/core @babel/preset-env @babel/preset-react,其中,babel-loader是文件处理器,加载js文件,@babel/core是babel的核心功能,@babel/preset-env用于转换es5,@babel/preset-react用于转换react的语法;
5.安装html-webpack-plugin的插件npm install html-webpack-plugin,自动生成html文件,随着编译的变化而变化,不需要手动改变bundle.js;
6.在根目录新建config文件夹,在其中新建配置文件webpack.common.js(通用的配置),webpack.dev.js(开发环境的配置),webpack.prod.js(生产环境的配置),分别进行配置;
7.在根目录新建.babelrc,并配置;
8.在package.json中增加启动项目的命令;
9.在根目录新建public文件夹,在其中新建index.html并配置webpack.common.js;
10.在根目录新建src文件夹,在其中新建index.js作为入口文件;
11.npm run build/npm run dev。
12.注意安装其他常用插件并在webpack.common.js中配置,例如style-loader、css-loader、file-loader等。