基于webpack4.X从零搭建React脚手架的方法步骤

2023-09-02 13:51:04 75

项目初始化

$npminit

安装webpack

本次创建是基于webpack4

$npminstall--save-dev

新建webpack配置文件

在根目录创建build文件夹，添加一个js文件，命名为webpack.base.conf.js

//webpack.base.conf.js文件
constpath=require('path');
constDIST_PATH=path.resolve(__dirname,'../dist');
module.exports={
entry:{
app:'./app/index.js'
},
output:{
filename:"js/bundle.js",
path:DIST_PATH
}
};

使用merge的方式来组织webpack基础配置和不同环境的配置

先安装webpack-merge：

$npminstall--save-devwebpack-merge

在build文件夹中再添加一个js文件，命名为webpack.prod.conf.js

//webpack.prod.conf.js文件
constmerge=require('webpack-merge');
constbaseWebpackConfig=require('./webpack.base.conf');
module.exports=merge(baseWebpackConfig,{
mode:'production'
});

在根目录下创建app目录，然后创建index.js文件

varelement=document.getElementById('root');
element.innerHTML='hello,world!';

在根目录创建一个public文件夹，然后新建一个index.html文件

//index.html




从零开始搭建react工程

当前项目目录树

|-/app
|-index.js
|-/node_modules
|-/public
|-index.html
|-/build
|-webpack.base.conf.js
|-webpack.prod.conf.js
|-package.json
|-package-lock.json

安装webpack-cli

webpack4.0版本之后的webpack，已经将webpack命令工具迁移到webpack-cli模块了,需要安装webpack-cli

$npminstall--save-devwebpack-cli

package.json文件scripts属性配置一个build命令

其值为：webpack--configbuild/webpack.prod.conf.js，以下是scripts的相关代码

//package.json
"scripts":{
"build":"webpack--configbuild/webpack.prod.conf.js",
"test":"echo\"Error:notestspecified\"&&exit1"
},

安装React

$npminstall--savereactreact-dom

修改app目录下的index.js的代码

importReactfrom"react";
importReactDomfrom"react-dom";

ReactDom.render(
hello,world!,
document.getElementById("root")
);

注意import属于ES6规范，因此需要转译ES2015+的语法，安装并配置babel以及相关依赖

$npminstall--save-devbabel-loaderbabel-corebabel-preset-envbabel-preset-react

根目录创建.babelrc文件，配置presets.

{
"presets":[
[
"env",
{
"targets":{
"browsers":[
">1%",
"last5versions",
"ie>=8"
]
}
}
],
"react"
]
}

修改webpack.base.conf.js文件

//webpack.base.conf.js
constpath=require('path');
constAPP_PATH=path.resolve(__dirname,'../app');
constDIST_PATH=path.resolve(__dirname,'../dist');
module.exports={
entry:{
app:'./app/index.js'
},
output:{
filename:'js/bundle.js',
path:DIST_PATH
},
module:{
rules:[
{
test:/\.js?$/,
use:"babel-loader",
include:APP_PATH
}
]
}
};

运行npmrunbuild

添加插件

public下的index.html本该自动添加到dist目录，并且引用资源自动加载到该文件，通过html-webpack-plugin实现这一步

$npminstallhtml-webpack-plugin--save-dev

webpack.prod.conf.js中配置plugins属性

constmerge=require('webpack-merge');
constbaseWebpackConfig=require('./webpack.base.conf.js');
constHtmlWebpackPlugin=require('html-webpack-plugin');

module.exports=merge(baseWebpackConfig,{
mode:'production',
plugins:[
newHtmlWebpackPlugin({
template:'public/index.html',
inject:'body',
minify:{
removeComments:true,
collapseWhitespace:true,
removeAttributeQuotes:true
},
})
]
});

删除index.html中手动引入的script标签





从零开始搭建react工程

重新编译查看npmrunbuild浏览器打开查看目录dist下的index.html

以上步骤都成功的前提下继续走下一步

生成的文件名添加Hash值，目的是解决缓存问题

修改webpack.prod.conf.js，mode:'production',增加以下代码

//webpack.prod.conf.js
output:{
filename:"js/[name].[chunkhash:16].js",
},

生成前需要清理之前项目生成的文件，因为由于文件名的改变如果不删除会一直增加

安装插件clean-webpack-plugin

$npminstall--save-devclean-webpack-plugin

修改webpack.prod.conf.js

//webpack.prod.conf.js
constmerge=require('webpack-merge');
constbaseWebpackConfig=require('./webpack.base.conf.js');
constHtmlWebpackPlugin=require('html-webpack-plugin');
constCleanWebpackPlugin=require('clean-webpack-plugin');

module.exports=merge(baseWebpackConfig,{
mode:'production',
output:{
filename:"js/[name].[chunkhash:16].js",
},
plugins:[
newHtmlWebpackPlugin({
template:'public/index.html',
inject:'body',
minify:{
removeComments:true,
collapseWhitespace:true,
removeAttributeQuotes:true
},
}),
newCleanWebpackPlugin(['../dist'],{allowExternal:true})
]
});

公共代码与业务代码分离

修改webpack.base.conf.js的entry入口属性，抽出框架代码

entry:{
app:'./app/index.js',
framework:['react','react-dom'],
},

修改webpack.prod.conf.js，增加以下代码，目的是分离框架代码和业务代码

虽然上面步骤抽出框架代码生成两个文件，但是app.js还是包含框架代码

optimization:{
splitChunks:{
chunks:"all",
minChunks:1,
minSize:0,
cacheGroups:{
framework:{
test:"framework",
name:"framework",
enforce:true
}
}
}
}

cacheGroups对象，定义了需要被抽离的模块

其中test属性是比较关键的一个值，他可以是一个字符串，也可以是正则表达式，还可以是函数。如果定义的是字符串，会匹配入口模块名称，会从其他模块中把包含这个模块的抽离出来

name是抽离后生成的名字，和入口文件模块名称相同，这样抽离出来的新生成的framework模块会覆盖被抽离的framework模块

整合webpack-dev-server

开发环境开启服务监听文件改动实时更新最新内容

$npminstall--save-devwebpack-dev-server

在build中添加webpack.dev.conf.js文件

constpath=require('path');
constmerge=require('webpack-merge');
constbaseWebpackConfig=require('./webpack.base.conf.js');
constHtmlWebpackPlugin=require('html-webpack-plugin');
constwebpack=require('webpack');

module.exports=merge(baseWebpackConfig,{
mode:'development',
output:{
filename:"js/[name].[hash:16].js",
},
plugins:[
newHtmlWebpackPlugin({
template:'public/index.html',
inject:'body',
minify:{
html5:true
},
hash:false
}),
newwebpack.HotModuleReplacementPlugin()
],
devServer:{
port:'8080',
contentBase:path.join(__dirname,'../public'),
compress:true,
historyApiFallback:true,
hot:true,
https:false,
noInfo:true,
open:true,
proxy:{}
}
});

在package.jsonscripts属性添加内容

"dev":"webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js",

npmrundev

自动打开浏览器打开入口页面实时更新

独立导出css文件

安装css相关依赖

sassless预处理

$npminstallextract-text-webpack-plugin
$npminstallstyle-loadercss-loaderpostcss-loaderautoprefixer--save-dev
$npminstalllesssassless-loadersass-loaderstylus-loadernode-sass--save-dev

webpack.base.conf.js文件修改

//webpack.base.conf.js
{
test:/\.css$/,
use:[
{
loader:"style-loader"//在html中插入