webpack+webpack-dev-server+react搭建热更新项目

Z时代
2024-01-10
分类：综合

react

由于之前对webpack的了解也没有那么的多，所以在自己去搭建的时候就会遇到各种问题，这次自己从头到尾的搭建了一次，对webpack进行一次梳理

1、首先本人使用的版本是 [email protected]、[email protected]（webpack4网上说还有坑，所以学习先不设计4.x版本了）

2、初始化项目npm init，然后生产package.json文件

3、创建一个src文件，并在文件下创建一个index.js文件，作为整个项目的入口文件，然后输入

document.body.innerHTML = "<div>ghj</div>";

4、创建一个build文件，并在文件下创建一个index.html文件，作为整个项目的页面入口，并引入打包好的bundle.js文件

5、在根一级的目录下面新建一个webpack.config.js文件，用作整个项目的webpack的文件

目录结构如下

然后在命令行里面输入命令webpack，就会自动的在build文件之下给生成一个新的bundle.js文件

搭建react的环境

下载相应的包和依赖

npm install react react-dom --save-dev

npm install babel babel-cli babel-loader --save-dev

npm install babel-preset-env babel-preset-react --save-dev

注：以前编译es6以上语法用的是babel-preset-es2015，现在是时候说再见了，babel-preset-env是一个更定制化的插件，你可以指定你要兼容的浏览器版本，这样babel会选择编译该版本不支持的语法而不是全部编译成旧的语法，具体配置参见：babel-preset-env

webpack.config.js里面的配置

var path=require('path');

module.exports={
entry: "./src/index.js", //入口文件--绝对路径
output: {
path: path.resolve(__dirname,'build'), //
filename: 'bundle.js'
},
module:{
loaders:[
{
test: /\.js$/, //配置要处理的文件格式，一般使用正则表达式匹配
loader: 'babel-loader', //使用的加载器名称
exclude:/node_modules/,
query: { //babel的配置参数，可以写在.babelrc文件里也可以写在这里
presets: ['env', 'react'] //{"presets": ["react", "env"]}
}
}
]
},
devServer: {
contentBase: "./build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//实时刷新
//hot: true
}