基于webpack4.X从零搭建React脚手架的方法步骤
项目初始化
$npminit
安装webpack
本次创建是基于webpack4
$npminstall--save-dev
新建webpack配置文件
在根目录创建build文件夹,添加一个js文件,命名为webpack.base.conf.js
//webpack.base.conf.js文件 constpath=require('path'); constDIST_PATH=path.resolve(__dirname,'../dist'); module.exports={ entry:{ app:'./app/index.js' }, output:{ filename:"js/bundle.js", path:DIST_PATH } };
使用merge的方式来组织webpack基础配置和不同环境的配置
先安装webpack-merge:
$npminstall--save-devwebpack-merge
在build文件夹中再添加一个js文件,命名为webpack.prod.conf.js
//webpack.prod.conf.js文件 constmerge=require('webpack-merge'); constbaseWebpackConfig=require('./webpack.base.conf'); module.exports=merge(baseWebpackConfig,{ mode:'production' });
在根目录下创建app目录,然后创建index.js文件
varelement=document.getElementById('root'); element.innerHTML='hello,world!';
在根目录创建一个public文件夹,然后新建一个index.html文件
//index.html从零开始搭建react工程