Webpack4搭建一个react项目
Webpack的4个基本概念
entry
: 指定Webpack构建内部依赖的入口。output
: 指定Webpack在哪里输出打包后的bundles和文件相应的命名。loader
: 由于Webpack只能够理解js文件,loader可以将所有类型的文件转换成Webpack可以处理的模块。plugins
: plugins主要是一些插件,主要用于帮助我们开发,例如打包优化和压缩。
Webpack搭建流程
- 初始化项目
cd 'your react-project' //进入react项目的文件夹
npm init -y //初始化生成package.json
- 安装Webpack
npm install --save-dev webpack //安装webpack
//使用👇的话默认安装的是版本4,与后面要安装的webpack-dev-server版本不兼容,所以最好降低一下webpack-cli的版本,使用最下面的的
(不推荐)npm install --save-dev webpack-cli
npm install webpack-cli@3.3.12 --save-dev //使用webpack4以上版本,还需要安装cli
-
项目目录文件创建
在根目录下新建webpack.config.js
和.babelrc
配置文件,以及新建src
和public
文件夹。
同样,在src
文件夹下创建index.js
作为入口文件,在public
文件夹下创建index.html
作为模板的html。
整个项目的目录如下所示:
-
安装
babel-loader
由于babel升级到7.版本以上,因此使用npm i babel-core babel-loader babel-preset-env --save-dev
,会使得我们在后面的运行中出现Error: Can't find moudle
的错误。
使用npm install @babel/core @babel/preset-env babel-loader --save-dev
在.babelrc
中输入
{
"presets": [
"@babel/preset-env"
]
}
配置webpack.config.js
const path = require('path');
module.exports = {
//入口文件
entry: [
path.join(__dirname,'./src/index.js')
],
output: {
filename: '[name].bundle.js',
path: path.join(__dirname,'./dist')
},
//loader配置
module: {
rules:[
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
}
- 生成html
使用html-webpack-plugin
插件为html文件引入外部资源,创建html文件入口。
npm i html-webpack-plugin html-loader --save-dev
配置webpack.config.js
...
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
...,
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
})
]
}
使用clean-webpack-plugin
插件在每次打包前清理dist目录,避免生成重复和不再使用的静态文件。
npm install clean-webpack-plugin --save-dev
配置webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
...
plugins: [
new CleanWebpackPlugin(),
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
})
]
}
- 处理css,less,静态资源
安装相应的loader和配置webpack.config.js,使得我们能够加载css,less,图片等资源。
npm install less --save-dev
npm install style-loader css-loader less-loader --save-dev
配置webpack.config.js
module.exports = {
...,
//loader配置
module: {
rules:[
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
{
test: /\.html$/,
use: [{
loader: "html-loader",
options: {
minimize: true
}
}]
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
]
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: "file-loader"
}
]
}
]
},
...
}
- 配置
webpack-dev-server
热更新
通过使用热更新,使得我们每一次修改代码完成后不需要重新执行打包命令,页面会自动更新。
npm install webpack-dev-server --save-dev
配置webpack.config.js
module.exports = {
...
// devServer提供一个简单的web的服务器,能够实时重新加载(热更新)
devServer: {
port: 3000, //端口号,默认8080
hot: true, //热模块更新
compress: false, //true则进行代码压缩
open: false, //自动打开浏览器
overlay: true, //在浏览器界面显示错误信息
stats: "errors-only" //shell只打印错误信息
},
...
}
到这里,webpack.congfig.js
基本配置就完成了。
完整的webpack.config.js
配置
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
//入口文件
entry: [
path.join(__dirname,'./src/index.js')
],
output: {
filename: '[name].bundle.js',
path: path.join(__dirname,'./dist')
},
// devServer提供一个简单的web的服务器,能够实时重新加载(热更新)
devServer: {
port: 3000, //端口号,默认8080
hot: true, //热模块更新
compress: false, //true则进行代码压缩
open: false, //自动打开浏览器
overlay: true, //在浏览器界面显示错误信息
stats: "errors-only" //shell只打印错误信息
},
//loader配置
module: {
rules:[
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
{
test: /\.html$/,
use: [{
loader: "html-loader",
options: {
minimize: true
}
}]
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
]
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: "file-loader"
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
})
]
}
安装react模块
因为我们最终是要搭建一个react项目,所以我们需要安装react的基本模块。
npm install react react-dom --save
npm install @babel/preset-react --save-dev
配置.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
修改package.json
的script配置
Development - 开发模式
Productio - 生产模式
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
}
修改入口文件index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Webpack config!</h1>,
document.getElementById('root')
);
修改模板index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
启动react项目
npm start //开发时候启用
上面就是整个webpack搭建基本的react项目流程,webpack还有很多功能,后面我们可以尝试一下配置下多页面的应用,加深对webpack的理解和使用。
之后就可以编写react项目的代码了