通常我们会用脚手架create-react-app去创建react项目,但是,为了更加深入理解webpack打包工具以及react的相关知识,我们可以尝试自己配置webpack来实现react项目的搭建。
起步
我们首先创建一个初始化项目,然后生成一个package.json文件
npm init -y
这里给出我自己的package.json具体内容,方便大家不用遇见版本兼容的问题(因为我自己遇过,所以希望大家可以少走弯路)
{
"name": "todolist",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve --config webpack.dev.config.js ",
"build": "webpack --config webpack.prod.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"clean-webpack-plugin": "^3.0.0",
"html-loader": "^2.1.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/plugin-transform-runtime": "^7.14.5",
"@babel/preset-env": "^7.14.7",
"@babel/preset-react": "^7.14.5",
"autoprefixer": "^9.6.0",
"babel-loader": "^8.2.2",
"babel-polyfill": "^6.26.0",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^5.3.2",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"webpack": "^5.47.1",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.7.1",
"webpack-merge": "^4.2.1"
}
}
配置文件
为了区分webpack的模式,我们通常会将webpack.config.js文件拆分为3个部分,分别是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js,其相对应的是公共配置、开发模式配置、生产模式配置,然后利用webpack-merge模块进行合并配置,文件具体内容如下:
const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
},
},
{
test: /\.css$/,
use: [
// 将css代码放到style标签中
'style-loader',
// 处理@import以及别的url资源
'css-loader',
]
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
},
],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html'
}),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin()
]
}
----------------------------
const baseConfig = require('./webpack.base.config')
const path = require('path')
const merge = require('webpack-merge');
module.exports = merge(baseConfig, {
mode: 'development',
devtool: 'source-map',
// 配置服务端目录和端口
devServer: {
contentBase: path.resolve(__dirname, './dist'),
port: 3000,
open: true,
// gzip压缩
compress: true,
hot: true,
host: "127.168.132.1"
}
})
--------------------------------
const baseConfig = require('./webpack.base.config')
const merge = require('webpack-merge');
module.exports = merge(baseConfig,{
mode: 'production'
})
babel配置
因为babel解析react时需要用一个预设来先处理react代码,因此需要对babel进行一个处理,这里我提供一个基础版本,如有需要可以去网上自行查找更详细的配置信息。
.babelrc文件:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
页面效果
我们写一个简单的页面
index.js:
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import './style.css'
export default class Index extends Component {
render() {
return (
<div>
hello,webapck
</div>
)
}
}
ReactDOM.render(<Index />, document.getElementById('root'));
-------------------------
style.css
body{
background-color: cornflowerblue;
color: red;
}
那么,接下来我们看看是否能成功展示页面。
这样,我们用webpack就可以实现一个简单的react项目配置,更多地配置着自己需求而定。
注意事项
1、需要注意版本问题,因为webpack与webpack-cli之间存在一个版本对应问题,如果遇见问题,可以去github或者StackOverflow上进行查找。