从零开始搭建webpack+react开发环境的详细步骤

2023-09-12 16:08:05 155

环境主要依赖版本

webpack@4.8.1
webpack-cli@2.1.3
webpack-dev-server@3.1.4
react@16.3.2
babel-core@6.26.3
babel-preset-env@1.6.1
bable-preset-react@6.24.1

webpack安装及配置

1.起步

新建项目目录，初始化npm，新建开发源目录

mkdirwebpack-react&&cdwebpack-react
npminit-y
mkdirsrc

2.webpack-cli

webpack从4.x版本开始，需要同时安装webpack，webpack-cli(此工具用于在命令行中运行webpack)。

npminstallwebpackwebpack-cli--save-dev

3.wepback配置文件

在项目根目录新建webpack.config.js文件，此文件为webpack运行核心文件。

webpack.config.js基本配置

//webpack.config.js
constpath=require('path');

module.exports={
entry:'./src/index.js',//入口文件
output:{//webpack打包后出口文件
filename:'app.js',//打包后js文件名称
path:path.resolve(__dirname,'dist')//打包后自动输出目录
}
}

package.json文件scripts配置

"scripts":{
"build":"webpack"
}

此时在命令行运行npmrunbuild，就能执行webpack了，webpack会自动去找项目根目录里的webpack.config.js文件，执行打包。

npmrunbuild
//webpack打包后的项目
├──dist
│└──app.js//打包后的app.js
├──package.json
├──src
│└──index.js//源目录入口文件
└──webpack.config.js

webpack.config.jsmodule相关配置

webpack视所有文件都为模块，图片，css文件，字体等静态资源都会打包进js文件，所以会需要用到loader文件，更多Loaders可以查询网址，接下来我们安装一些必要的Loader文件。

npminstallstyle-loadercss-loaderurl-loader--save-dev

webpack.config.js加入module模块

module.exports={
entry:'./src/index.js',
output:{
filename:'app.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(png|svg|jpg|gif)$/,
use:['url-loader']
},
{
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:['url-loader']
}
]
}
}

引入loader后，就可以在你的src/index.js文件import你想引入的css文件或者其他静态资源。

cdsrc&&touchmain.css

src/index.js文件引入css

import"./main.css";

webpack.config.jsplugins配置

主要的js文件和静态文件都能成功打包成一个js文件后，我们需要把这个js文件放到html文件里，webpack插件***html-webpack-plugin***就是干这个事儿的，它能自动生成一个html文件并把我们打包好的js文件放入html。

npminstallhtml-webpack-plugin--save-dev

webpack.config.js配置plugins

constpath=require('path');
constHtmlWebpackPlugin=require('html-webpack-plugin');//引入插件

module.exports={
entry:'./src/index.js',
output:{
filename:'app.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(png|svg|jpg|gif)$/,
use:['url-loader']
},
{
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:['url-loader']
}
]
},
plugins:[
newHtmlWebpackPlugin({title:'production'})//配置plugin
]
};

执行npmrunbuild后，我们可以看到dist目录多出一个index.html文件。





name


//打包后的app.js已经被自动插入了html文件

到这里，webpack最简单最基本的需求已经配置完毕。此时项目结构为：

├──dist//生产目录
│├──app.js
│└──index.html
├──package.json
├──src//源目录
│├──index.js
│└──main.css
└──webpack.config.js

React的webpack配置

安装react

npminstallreactreact-dom--save

安装react，wepback转换依赖

React组件由JSX组成，浏览器无法识别JSX，需要babel进行转换。

babel-croe为babel核心文件
babel-preset-env将ES6转义成ES5
babel-preset-react将JSX转义成js
babel-loaderwebpack的babe转换

npminstallbabel-corebabel-preset-envbabel-preset-reactbabel-loader--save-dev

.babelrc配置文件

在项目根目录下新建.babelrc文件，此文件为bable核心配置，babel会自动在项目根目录下识别。

//.babelrc
{
"presets":["env","react"]
}

webpackbabel-loader配置

//在webpack.config.js的modules.rules中加入此配置
{
test:/\.(js|jsx)$/,
exclude:/node_modules/,
use:{
loader:'babel-loader'
}
}

html-webpack-plugin模板配置

我们知道react需要获取页面一个根元素，然后render才会生效，我们可以新建一个html文件，让html-webpack-plugin插件基于这个文件来进项打包。

所以我们在根目录下新建一个html文件，以此文件作模板。

//index.html




Document


//react需要的渲染根元素

此时webpack.config.js配置:

constpath=require('path');
constHtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
entry:'./src/index.js',
output:{
filename:'app.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/\.(js|jsx)$/,
exclude:/node_modules/,
use:{
loader:'babel-loader'
}
},
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(png|svg|jpg|gif)$/,
use:['url-loader']
},
{
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:['url-loader']
}
]
},
plugins:[
newHtmlWebpackPlugin({
title:'production',
template:'./index.html'//模板文件位置
})
]
};

书写React，运行webpack

//src/index.js
importReactfrom'react';
importReactDomfrom'react-dom';

import'./main.css'

ReactDom.render(
helloworld,
document.getElementById('root')
);

运行npmrunbuild，生成dist目录，打开dist目录中的index.html文件，可以发现浏览器已正常渲染"helloworld"。

dev环境热更新配置

react的wepack完成以后，是不是发现每修改一次代码，想看到效果，得重新打包一次才行。webpack-dev-server配置可以帮助我们实现热更新，在开发环境解放我们的生产力。

安装webpack-dev-server

npminstallwebpack-dev-server--save-dev

webpack.config.js配置

constpath=require('path');
constHtmlWebpackPlugin=require('html-webpack-plugin');
constwebpack=require('webpack');

module.exports={
entry:'./src/index.js',
output:{
filename:'app.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/\.(js|jsx)$/,
exclude:/node_modules/,
use:{
loader:'babel-loader'
}
},
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(png|svg|jpg|gif)$/,
use:['url-loader']
},
{
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:['url-loader']
}
]
},
plugins:[
newHtmlWebpackPlugin({
title:'production',
template:'./index.html'
}),
//hot检测文件改动替换plugin
newwebpack.NamedModulesPlugin(),
newwebpack.HotModuleReplacementPlugin()
],
//webpack-dev-server配置
devServer:{
contentBase:'./dist',
hot:true
},
};

运行webpack-dev-server

在package.json文件加入scripts配置：

"scripts":{
"build":"webpack",
"dev":"webpack-dev-server--open--modedevelopment"//webpack-dev-server
},

命令行运行npmrundev

可以在浏览器中输入localhost:8080内容即为dist目录下的index.html内容。修改src/index.js中的内容或者依赖，即实时在浏览器热更新看到。

至此，react的webpack的基础开发环境已全部配置完毕。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

从零开始搭建webpack+react开发环境的详细步骤

helloworld

热门推荐

随机推荐