在webpack中配置react环境
1.创建react-webpack文件夹
2.在文件夹下初始化npm init -y | yarn init -y
3.文件夹下安装依赖项
（1）开发依赖
1. npm install webpack webpack-cli webpack-dev-server -D
或者yarn add
（2） 生产依赖
1.react react-dom
创建.gitignone忽略 内容为 node_modeules
4.新建src/main.js文件作为入口文件
5.根目录下新建index.html作为页面入口
6.配置webpack
7.根目录下 webpack.config.js文件
constpath = require('path');
//引入文件
constHtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 设置打包是否压缩，默认为压缩状态
mode:'development',
//入口
entry:'./src/main.js',
//出口
output: {
path: path.resolve(__dirname,'./dist'),
filename:'bundle.js'
},
module:{
//规则
rules: [
{test:/\.js$/,use:'babel-loader'}
]
},
//插件
plugins:[
//在dist文件下创建一个index.html文件
newHtmlWebpackPlugin ({
template:'./index.html'
})
],
//配置webpack-dev-server相关的内容
devServer: {
disableHostCheck:true
}
}
PS:
1.为了实现类似vue脚手架实现的那个打包的时候，自动在dist文件夹下生成index.html文件。
需要安装html-webpack-plugin的webpack插件
1.yarn add html-webpack-plugin -D
2.在配置文件中引入
3.使用
2.webpack中使用babel处理react的JSX语法
1.安装 babel-loader @babel/core @babel/preset-react -D
2.配置 webpack配置
3.根目录下新建.babelrc文件。配置使用babel的预设
{
"presets": ["@babel/preset-react"]
}
package.json 配置文件如下
{
"name":"react-webpack",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts": {
"test":"echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open —progress —hot",
"build":"webpack"
},
"keywords": [],
"author":"",
"license":"ISC",
"devDependencies": {
"@babel/core":"^7.2.2",
"@babel/preset-react":"^7.0.0",
"babel-loader":"^8.0.4",
"html-webpack-plugin":"^3.2.0",
"webpack":"^4.28.2",
"webpack-cli":"^3.1.2",
"webpack-dev-server":"^3.1.13"
},
"dependencies": {
"react":"^16.7.0",
"react-dom":"^16.7.0"
}
}
网友评论