快速构建项目：
npm install-g create-react-app// 全局安装create-react-app (只需要安装一次)
create-react-app demo-app// 创建项目
cd demo-app// 进入项目目录
webpack配置项目
项目目录：
项目名称：demo
－dist ／打包后的目录
－src ／应用的所有代码
－index.js ／项目入口文件 相当于vue中的main.js
－App.js /相当于vue中的app.vue
－webpack.config.js ／webpack配置文件
初始化项目：
npm init -y ／项目初始化，生成'[ackage.json' 文件
安装webpack的包：
npm i webpack webpack-cli webpack-command --save-dev
安装好webpack的三个基本项
--save-dev与--save的区别：
--save-dev表示只是在编译过程中所依赖的包，例如：webpack、sass-loader等 最后在package.json的devDependencies部分显示
--save表示编译后在运行时还需要依赖的包，例如 react react-dom等 最后在package.json的dependencies部分显示
安装webpack版本（根据需求安装）
npm install --save-dev webpack@4.0.0
查看版本信息
webpack 服务器 webpack-dev-server,让启动更方便
npm i --save-dev webpack-dev-server
安装其他webpack的插件:
自动创建html文件 html-webpack-plugin
npm i --save-dev html-webpack-plugin
清除无用文件 clean-webpack-plugin,将每次打包多余的文件删除
npm i --save-dev clea-webpack-plugin
样式编译loader插件:
npm i --save-dev style-loader css-loader ／css相关loader
npm i --save-dev node-sass sass-loader ／sass相关的loader 也可以安装less ／scss等
npm i --save-dev file-loader url-loader ／加载其他文件，比如图片字体
根目录下创建webpack.config.js文件，配置代码如下：
constpath=require('path');
constwebpack=require('webpack');
constHtmlWebpackPlugin=require('html-webpack-plugin');//自动创建html文件
constCleanWebpackPlugin=require('clean-webpack-plugin');//清除多余文件
module.exports = {
devtool:'cheap-module-eval-source-map',// 用于开发调试，方便清楚是那个文件出错 (共有7种)
entry:{index:'./src/index.js'},
output:{ filename:'bundle.js',// 输出的文件名
path:path.resolve(__dirname,'dist') },
module:{rules:[{//转换css文件
test:/\.css$/,use:"style-loader!css-loader"},{//转换scss文件
test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]// 加载时顺序从右向左 }, {// 转换文件png|svg|jpg|gif
test:/\.(png|svg|jpg|gif)$/,use:['file-loader']}]},// 开启一个虚拟服务器
devServer:{contentBase:'./dist',hot:true},
plugins:[//每次编译都会把dist下的文件清除，我们可以在合适的时候打开这行代码，例如我们打包的时候，开发过程中这段代码关闭比较好
new CleanWebpackPlugin(['dist']),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({//使用一个模板
template:'src/index.html' })]};
}
完善修改 package.json:
"scripts": {
"watch": "webpack --watch",
"build": "webpack --mode production",
"dev": "webpack --mode development& webpack-dev-server --open --mode development",
"start": "webpack-dev-server --open --mode production"
},
／--open 为自动打开浏览器
编写index.html文件：
src/index.js文件：
运行：npm run dev
项目运行可能会遇到的错误问题：例如：
解决办法：注释以下红框中的内容 等到后边的react相关的包安装好了之后再打开
————————————————————————————————
安装react的一些东西，以及需要用到的插件：
npm i --save react react-dom antd
安装一些babel：
npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
npm i--save@babel/polyfill
npm i--save-dev babel-loader
修改webpack.config.js配置：
在rules中加入
／//这个是为了转换js
{test:/\.(js|jsx)$/, loader:'babel-loader', exclude:/node_modules/}
最终的配置文件完整代码为：
constpath=require('path');
constwebpack=require('webpack');
constHtmlPlugin=require('html-webpack-plugin');
// const nodeExternals = require('webpack-node-externals');
module.exports={
devtool:'inline-source-map',
entry:{index:'./src/index.js'},
module:{
rules:[{test:/\.css$/,
loader:['style-loader','css-loader']},
{test:/\.scss$/,
loader:['style-loader',
'css-loader','sass-loader']},
{test:/\.(png|svg|jpg|gif)$/,
loader:'url-loader',
options:{limit:10000,
name:'img/[name].[hash:7].[ext]'}},
{test:/\.(js|jsx)$/,
loader:'babel-loader',
exclude:/node_modules/}]
},
devServer:{contentBase:'./build', port:8081, inline:true,hot:true},
plugins:[newwebpack.HotModuleReplacementPlugin(),
newHtmlPlugin({template:'src/index.html'})]
}
配置babel,在根目录下添加文件 .babelrc:
{"presets":["@babel/preset-env",
"@babel/preset-react"],
"plugins":["@babel/plugin-proposal-class-properties",]}
编写App.js文件:
importReact,{Component}from'react';
class Appextends Component{
constructor(props){
super(props);this.state={};
}
render(){
return(
<divclassName="main"> <p>欢迎来到react</p> <divclassName="box">我是webpack搭建的项目构架</div> </div>);
}}
export default App;
根目录创建App.scss文件，并编写App.scss:
.main{background:pink;width:300px;height:300px;margin:0auto;.box{background:skyblue;}}
将文件样式引入App.js：
import ‘.／App.scss’
编写index.js：
importReactfrom'react';
importReactDOMfrom'react-dom';
importAppfrom'./App';
ReactDOM.render(<App/>,document.getElementById('root'));
启动项目：
npm run dev
其他：
还可以自己在配置文件里配置谢别的功能，这个根据自己需求去配置
——————————————————————————
