详解如何用webpack4从零开始构建react开发环境
程序员文章站
2023-12-06 08:26:52
项目文件准备：
执行npm init,然后创建如下图所示的文件。
在index.html里面添加
<...
项目文件准备：
执行npm init,然后创建如下图所示的文件。
在index.html里面添加
<!doctype html> <html> <head> <title>the minimal react webpack babel setup</title> </head> <body> <div id="app"></div> <script src="./bundle.js"></script> </body> </html>
在webpack.config.js里面添加
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
publicpath: '/',
filename: 'bundle.js'
},
devserver: {
contentbase: './dist'
}
};
在package.json里面添加
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development"
},
这样，当执行npm start的时候，就会使用webpack-dev-server把index.js相关文件打包，生成bundle.js，这时候浏览器会打开一个窗口，执行index.html(contentbase里面定义了），又因为index.html里面引入了bundle.js，就可以把压缩后的js文件执行起来。当然引入bundle.js这一步可以由我们强大的html-webpack-plugin完成。
安装依赖
npm install --save-dev webpack webpack-dev-server webpack-cli npm install --save-dev @babel/core @babel/preset-env npm install --save-dev babel-loader npm install --save-dev @babel/preset-react
配置babel
在根目录下新建.babelrc文件，然后添加
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
在webpack.config.js里面添加babel-loader配置
module.exports = {
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
}
...
};
引入react
npm install --save react react-dom
修改index.js: 这个reactdom.render就是把元素渲染到index.html里面id为'app'的元素厦门。在实际开发中，我们会把app.js渲染到这里，然后在app.js里面写redux,react-router构成的页面的起点。
import react from 'react';
import reactdom from 'react-dom';
const title = 'my minimal react webpack babel setup';
reactdom.render(
<div>{title}</div>,
document.getelementbyid('app')
);
配置react热加载
npm install --save-dev react-hot-loader
webpack.config.js
const webpack = require('webpack');
module.exports = {
...
plugins: [
new webpack.hotmodulereplacementplugin()
],
devserver: {
contentbase: './dist',
hot: true
}
...
};
修改index.js
import react from 'react';
import reactdom from 'react-dom';
const title = 'my minimal react webpack babel setup';
reactdom.render(
<div>{title}</div>,
document.getelementbyid('app')
);
+ module.hot.accept();
这个时候执行npm start,就可以在浏览器访问http://localhost:8080看到index.html里面的内容啦啦。参考链接：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： JS实现的点击按钮图片上下滚动效果示例