使用webpack搭建react开发环境的方法

2023-09-12 20:35:05 135

1.初始化项目

mkdirreact-redux&&cdreact-redux
npminit-y

2.安装webpack

npmiwebpack-D

npmi-D是npminstall--save-dev的简写，是指安装模块并保存到package.json的devDependencies中，主要在开发环境中的依赖包.如果使用webpack4+版本，还需要安装CLI。

npminstall-Dwebpackwebpack-cli

3.新建一下项目结构

react-redux
|-package.json
+|-/dist
+|-index.html
|-/src
|-index.js

index.html





Title

index.js

document.querySelector('#root').innerHTML='webpack使用';

非全局安装下的打包。

node_modules\.bin\webpacksrc\index.js--outputdist\bundle.js--modedevelopment

打开dist目录下的html显示webpack使用

配置webpack

1.使用配置文件

constpath=require('path');
module.exports={
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
}
};

运行命令:node_modules\.bin\webpack--modeproduction可以以进行打包2.NPM脚本(NPMScripts)在在package.json添加一个npm脚本(npmscript)："build":"webpack--modeproduction"运行npmrunbuild即可打包

使用webpack构建本地服务器

webpack-dev-server提供了一个简单的web服务器，并且能够实时重新加载。

1.安装npmi-Dwebpack-dev-server修改配置文件webpack.config.js

constpath=require('path');
module.exports={
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
//以下是新增的配置
devServer:{
contentBase:"./dist",//本地服务器所加载的页面所在的目录
historyApiFallback:true,//不跳转
inline:true,//实时刷新
port:3000,
open:true,//自动打开浏览器
}
};

运行webpack-dev-server--progress,浏览器打开localhost:3000,修改代码会实时显示修改的结果.添加scripts脚本,运行npmstart自动打开http://localhost:8080/

"start":"webpack-dev-server--open--modedevelopment"

启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此使用webpack-dev-server进行开发的时候都看不到编译后的文件

2.热更新

配置一个webpack自带的插件并且还要在主要js文件里检查是否有module.hot

plugins:[
//热更新,不是刷新
newwebpack.HotModuleReplacementPlugin()
],

在主要js文件里添加以下代码

if(module.hot){
//实现热更新
module.hot.accept();
}

在webpack.config.js中开启热更新

devServer:{
contentBase:"./dist",//本地服务器所加载的页面所在的目录
historyApiFallback:true,//不跳转
inline:true,//实时刷新
port:3000,
open:true,//自动打开浏览器
hot:true//开启热更新
},

热更新允许在运行时更新各种模块，而无需进行完全刷新.

配置Html模板

1.安装html-webpack-plugin插件

npmihtml-webpack-plugin-D

2.在webpack.config.js里引用插件

constpath=require('path');
letwebpack=require('webpack');
letHtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/index.js',
output:{
//添加hash可以防止文件缓存,每次都会生成4位hash串
filename:'bundle.[hash:4].js',
path:path.resolve('dist')
},
//以下是新增的配置
devServer:{
contentBase:"./dist",//本地服务器所加载的页面所在的目录
historyApiFallback:true,//不跳转
inline:true,//实时刷新
port:3000,
open:true,//自动打开浏览器
hot:true//开启热更新
},
plugins:[
newHtmlWebpackPlugin({
template:'./src/index.html',
hash:true,//会在打包好的bundle.js后面加上hash串
})
]
};

运行npmrunbuild进行打包,这时候每次npmrunbuild的时候都会在dist目录下创建很多打好的包.应该每次打包之前都将dist目录下的文件清空,再把打包好的文件放进去,这里使用clean-webpack-plugin插件.通过npmiclean-webpack-plugin-D命令安装.然后在webpack.config.js中引用插件.

constpath=require('path');
letwebpack=require('webpack');
letHtmlWebpackPlugin=require('html-webpack-plugin');
letCleanWebpackPlugin=require('clean-webpack-plugin');
module.exports={
entry:'./src/index.js',
output:{
//添加hash可以防止文件缓存,每次都会生成4位hash串
filename:'bundle.[hash:4].js',
path:path.resolve('dist')
},
//以下是新增的配置
devServer:{
contentBase:"./dist",//本地服务器所加载的页面所在的目录
historyApiFallback:true,//不跳转
inline:true,//实时刷新
port:3000,
open:true,//自动打开浏览器
hot:true//开启热更新
},
plugins:[
newHtmlWebpackPlugin({
template:'./src/index.html',
hash:true,//会在打包好的bundle.js后面加上hash串
}),
//打包前先清空
newCleanWebpackPlugin('dist')
]
};

之后打包便不会产生多余的文件.

编译es6和jsx

1.安装babelnpmibabel-corebabel-loaderbabel-preset-envbabel-preset-reactbabel-preset-stage-0-Dbabel-loader:babel加载器babel-preset-env:根据配置的env只编译那些还不支持的特性。babel-preset-react:jsx转换成js

2.添加.babelrc配置文件

{
"presets":["env","stage-0","react"]//从左向右解析
}

3.修改webpack.config.js

constpath=require('path');
module.exports={
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
//以下是新增的配置
devServer:{
contentBase:"./dist",//本地服务器所加载的页面所在的目录
historyApiFallback:true,//不跳转
inline:true//实时刷新
},
module:{
rules:[
{
test:/\.js$/,
exclude:/(node_modules)/,//排除掉nod_modules,优化打包速度
use:{
loader:'babel-loader'
}
}
]
}
};

开发环境与生产环境分离

1.安装webpack-merge

npminstall--save-devwebpack-merge

2.新建一个名为webpack.common.js文件作为公共配置,写入以下内容：

constpath=require('path');
letwebpack=require('webpack');
letHtmlWebpackPlugin=require('html-webpack-plugin');
letCleanWebpackPlugin=require('clean-webpack-plugin');
module.exports={
entry:['babel-polyfill','./src/index.js'],
output:{
//添加hash可以防止文件缓存,每次都会生成4位hash串
filename:'bundle.[hash:4].js',
path:path.resolve(__dirname,'dist')
},
plugins:[
newHtmlWebpackPlugin({
template:'./src/index.html',
hash:true,//会在打包好的bundle.js后面加上hash串
}),
//打包前先清空
newCleanWebpackPlugin('dist'),
newwebpack.HotModuleReplacementPlugin()//查看要修补(patch)的依赖
],
module:{
rules:[
{
test:/\.js$/,
exclude:/(node_modules)/,//排除掉nod_modules,优化打包速度
use:{
loader:'babel-loader'
}
}
]
}
};

3.新建一个名为webpack.dev.js文件作为开发环境配置

constmerge=require('webpack-merge');
constpath=require('path');
letwebpack=require('webpack');
constcommon=require('./webpack.common.js');
module.exports=merge(common,{
devtool:'inline-soure-map',
mode:'development',
devServer:{
historyApiFallback:true,//在开发单页应用时非常有用，它依赖于HTML5historyAPI，如果设置为true，所有的跳转将指向index.html
contentBase:path.resolve(__dirname,'../dist'),//本地服务器所加载的页面所在的目录
inline:true,//实时刷新
open:true,
compress:true,
port:3000,
hot:true//开启热更新
},
plugins:[
//热更新,不是刷新
newwebpack.HotModuleReplacementPlugin(),
],
});

4.新建一个名为webpack.prod.js的文件作为生产环境配置

constmerge=require('webpack-merge');
constpath=require('path');
letwebpack=require('webpack');
constUglifyJSPlugin=require('uglifyjs-webpack-plugin');
constcommon=require('./webpack.common.js');
module.exports=merge(common,{
mode:'production',
plugins:[
newUglifyJSPlugin()
]
});

配置react

1.安装react、

react-domnpmireactreact-dom-S

2.新建App.js,添加以下内容.

importReactfrom'react';
classAppextendsReact.Component{
render(){
return(佳佳加油);
}
}
exportdefaultApp;

3.在index.js添加以下内容.

importReactfrom'react';
importReactDOMfrom'react-dom';
import{AppContainer}from'react-hot-loader';
importAppfrom'./App';
ReactDOM.render(


,
document.getElementById('root')
);

if(module.hot){
module.hot.accept();
}

4.安装react-hot-loader

npmi-Dreact-hot-loader

5.修改配置文件在webpack.config.js的entry值里加上react-hot-loader/patch，一定要写在entry的最前面，如果有babel-polyfill就写在babel-polyfill的后面

6.在.babelrc里添加plugin,"plugins":["react-hot-loader/babel"]

处理SASS

1.安装style-loadercss-loaderurl-loader

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

2.安装sass-loadernode-sass

npminstallsass-loadernode-sass--save-dev

3.安装mini-css-extract-plugin,提取单独打包css文件

npminstall--save-devmini-css-extract-plugin

4.配置webpack配置文件

webpack.common.js

{
test:/\.(png|jpg|gif)$/,
use:[
"url-loader"
]
},

webpack.dev.js

{
test:/\.scss$/,
use:[
"style-loader",
"css-loader",
"sass-loader"
]
}

webpack.prod.js

constmerge=require('webpack-merge');
constpath=require('path');
letwebpack=require('webpack');
constMiniCssExtractPlugin=require("mini-css-extract-plugin");
constUglifyJSPlugin=require('uglifyjs-webpack-plugin');
constcommon=require('./webpack.common.js');
module.exports=merge(common,{
mode:'production',
module:{
rules:[
{
test:/\.scss$/,
use:[
//fallbacktostyle-loaderindevelopment
process.env.NODE_ENV!=='production'?'style-loader':MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
]
},
plugins:[
newUglifyJSPlugin(),
newMiniCssExtractPlugin({
//OptionssimilartothesameoptionsinwebpackOptions.output
//bothoptionsareoptional
filename:"[name].css",
chunkFilename:"[id].css"
})
]
});

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

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

使用webpack搭建react开发环境的方法

热门推荐

随机推荐