对于webpack手动搭建react项目的配置文件感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍reactwebpack搭建，并为您提供关于create-react-app脚手架创建react
对于webpack手动搭建react项目的配置文件感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍react webpack搭建，并为您提供关于create-react-app脚手架创建react项目，暴露webpack配置文件，如何引入less支持+antd按需加载+自定义主题、React技术栈之Webpack环境搭建（一）手动搭建、React系列---Webpack环境搭建（一）手动搭建、react项目下webpack版本更新导致的配置报错解决方案的有用信息。
本文目录一览：- webpack手动搭建react项目的配置文件（react webpack搭建）
- create-react-app脚手架创建react项目，暴露webpack配置文件，如何引入less支持+antd按需加载+自定义主题
- React技术栈之Webpack环境搭建（一）手动搭建
- React系列---Webpack环境搭建（一）手动搭建
- react项目下webpack版本更新导致的配置报错解决方案
webpack手动搭建react项目的配置文件（react webpack搭建）
这是我之前使用react开发的第一个正式项目，用webpack手动搭建的
webpack.common.js
/*
* @Author: 刘~
* @Date: 2021-02-20 12:57:24
* @LastEditTime: 2021-03-08 10:22:08
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \qbxy_skill_admin\webpack.common.js
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin');
const webpack = require('webpack');
const ManifestPlugin = require('webpack-manifest-plugin');
module.exports = {
// 入口文件
entry: './src/index.js',
// 打包路径与文件名
output: {
filename: 'bundle.[hash].js',
path: path.join(__dirname, '/dist')
},
module: {
// 配置相应的规则
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
}, {
test: /\.js[x]?$/,
use: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.less$/,
use: ['style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'less-loader',
{
loader: 'style-resources-loader',
options: {
patterns: path.resolve(__dirname, './src/style/comm.less')//全局less文件
}
}
]
},
{
test: /\.(ttf|eot|woff|woff2|svg)/,
include: path.resolve(__dirname, './public/iconfont'),
use: ['file-loader']
},
{
test: /\.(png|svg|jpg|gif|jpeg)$/,
include: path.resolve(__dirname, './src'),
use: [{
loader: 'file-loader',
options: {
limit: 10240,
name: 'images/[hash].[ext]',
publicPath: "/"
}
}]
},
{
test: /\.ts$/,
exclude: /node_modules/,
use: ['ts-loader']
}
]
},
// 配置相应的插件
plugins: [
new CleanWebpackPlugin(), // 打包前清空
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./public/index.html"),
favicon: path.resolve('./public/qingbei.ico')
}),
new ManifestPlugin(), //防止部署服务器后路径找不到index.js
new webpack.HotModuleReplacementPlugin(), //热更新模块
]
};
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
// 设置为开发模式
mode: 'development',
devtool: 'inline-source-map',
// 配置服务端目录和端口
devServer: {
contentBase: './dist',
port: 9091,
proxy: {
'/qbxyapi': {
target: 'https://www.skedu.vip/qbxyapi/',//admin.skedu.vip
changeOrigin: true,
ws: true,
pathRewrite: {
'^/qbxyapi': '/'
}
}
}
}
});
webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
// 设置为生产模式
mode: 'production'
});
package.json
{
"name": "demo-2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"braft-editor": "^2.3.9",
"braft-utils": "^3.0.12",
"qiniu": "^7.3.2",
"react": "^16.8.6",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1"
},
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-decorators": "^7.12.1",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"antd": "^4.7.0",
"autoprefixer": "^9.6.0",
"axios": "^0.20.0",
"babel-loader": "^8.0.6",
"babel-plugin-import": "^1.13.1",
"babel-polyfill": "^6.26.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^2.1.1",
"es6-symbol": "^3.1.3",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^3.2.0",
"i": "^0.3.6",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"mobx": "^6.0.1",
"mobx-react": "^7.0.0",
"mobx-react-lite": "^2.0.7",
"moment": "^2.29.1",
"npm": "^6.14.8",
"postcss-loader": "^3.0.0",
"qiniu-js": "^3.1.1",
"react-app-polyfill": "^1.0.6",
"react-hot-loader": "^4.13.0",
"react-loadable": "^5.5.0",
"style-loader": "^0.23.1",
"style-resources-loader": "^1.3.3",
"ts-loader": "^8.0.14",
"typescript": "^4.1.3",
"url-loader": "^4.1.1",
"webpack": "^4.33.0",
"webpack-cli": "^3.3.3",
"webpack-dev-server": "^3.7.1",
"webpack-manifest-plugin": "^2.2.0",
"webpack-merge": "^4.2.1"
}
}
create-react-app脚手架创建react项目，暴露webpack配置文件，如何引入less支持+antd按需加载+自定义主题
使用 create-react-app 脚手架创建项目后，默认是不支持 less 的。所以我们需要手动添加。
第一步 暴露webpack配置文件
使用 create-react-app 创建的项目，默认情况下是看不到 webpack 相关的配置文件，我们需要给它暴露出来，使用下面命令即可
yarn eject运行之后，我们发现多了一个config文件夹，
第二步 添加less 在项目根目录 使用 npm 或者 yarn 来安装antd less 和 less-loader
-
yarn add babel-plugin-import
-
yarn add antd
-
yarn add less less-loader
第三步 修改package.json：添加antd库的样式
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}第四步 复制代码修改配置环境（webpack.config.js） 定义全局变量
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
第五步 复制代码配置less-loader
//在大概466行会看到如下代码
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
''sass-loader''
),
},
//在此代码后添加如下代码
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2
},
''less-loader''
),
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
''less-loader''
),
},
第六步 复制代码定义全局样式
//注释掉大概114行
// if (preProcessor) {
// loaders.push({
// loader: require.resolve(preProcessor),
// options: {
// sourceMap: isEnvProduction && shouldUseSourceMap,
// },
// });
// }
// return loaders;
//替换为如下
if (preProcessor) {
let loader = require.resolve(preProcessor)
if (preProcessor === "less-loader") {
loader = {
loader,
options: {
modifyVars: { //自定义主题
''primary-color'': '' #1890ff '',
},
javascriptEnabled: true,
}
}
}
loaders.push(loader);
}
return loaders;
第七步 复制代码修改package.json
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true //修改处
}
]
]
}大概执行完以上代码之后，及支持less，同时也支持antd按需加载。
其实个人觉得没必要暴露webpack，当然我个人不了解webpack，我不是专业做前端的，因为公司用到这个，所以学习一下，
我觉得antd里使用文件的方式支持按需加载，更加简单方便。直接按照高级配置一步一步做就好了。也很方便。webpack太麻烦了，
哈哈，回头也要补充一下webpack方面的知识。
React技术栈之Webpack环境搭建（一）手动搭建
React技术栈之Webpack环境搭建（一）手动搭建
React技术栈之Webpack环境搭建（二）不同环境不同配置
React技术栈之Webpack环境搭建（三）打包性能优化
工程初始化
确保已经安装了node，npm包管理工具会随node一起安装。
可用以下方式安装依赖包：
# 安装到全局环境 npm install 依赖包[@版本号] -g # 安装到当前环境并添加到package.json的dependencies部分 npm install 依赖包[@版本号] --save # 安装到当前环境并添加到package.json的devDependencies部分 npm install 依赖包[@版本号] --save-dev
创建react-webpack-demo目录并进入：
生成package.json
npm init --yes
安装webpack
npm install webpack --save-dev
安装webpack-dev-server
npm install webpack-dev-server --save-dev
webpack-dev-server是一个基于Express框架的Node.js服务器。它还提供了一个客户端的运行环境，会被注入到页面代码中执行，并通过Socket.IO与服务器通信。
服务器端的每次改动与重新构建都会被通知到页面上。还提供了如模块替换这样强大的功能。
安装Babel
安装babel-core核心模块
npm install babel-core --save-dev
安装babel的ES6和React语法包
npm install babel-preset-es2015 babel-preset-react --save-dev
配置Babel
根目录下配置.babelrc
{
"presets": ["es2015","react"]
}
安装ESLint
安装ESLint loader
npm install eslint@3.19.0 --save-dev
安装ESLint的第三方配置规则eslint-config-airbnb
npm install eslint-config-airbnb --save-dev
eslint-config-airbnb需要以下3个插件支持：
npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev
配置ESLint
根目录下配置.eslintrc.js
module.exports = {
"parserOptions": {
"ecmaVersion": 7,// ECMAScript版本，7为ES7
"sourceType": "module",//默认script，如果代码是ECMAScript模块，设置为module
"ecmaFeatures": { // 使用额外的语言特性
"jsx": true // 启用JSX
}
},// 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量
// 避免访问未定义的环境变量而发出告警
"env": {
"es6": true,"node": true,"browser": true,},// 脚本在执行期间访问的额外的全局变量
// 避免访问未定义的环境变量而发出告警
"globals": {
"document": true,"navigator": true,"window":true,"node":true
},// 继承第三方校验规则eslint-config-airbnb
"extends": "airbnb",// eslint-config-airbnb包括了以下3个插件
"plugins": [
"react","jsx-a11y","import"
],// 定制自己的规则
"rules": {
"comma-dangle": ["error","never"],// 要求或禁止末尾逗号：不允许逗号
"indent": ["error",4],// JavaScript代码强制使用一致的缩进：4格缩进
}
};
安装webpack loader
Webpack有一个不可不说的优点，它把所有的文件都可以当做模块处理，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
Webpack 默认只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
安装eslint-loader整合eslint：
npm install eslint-loader --save-dev
安装babel-loader整合babel：
npm install babel-loader --save-dev
安装style-loader css-loader等，转换对应类型文件：
npm install style-loader css-loader less-loader sass-loader file-loader url-loader --save-dev
css-loader 用于打包css文件
style-loader 用于将编译完成的css插入html中
less-loader 是将less文件编译成css
sass-loader 是将sass文件编译成css
file-loader 用于打包文件
url-loadder 用于打包图片
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
url-loader是对file-loader的上层封装。一般限制小图片直接转成 base64 可以用 url-loader，其他情况都用 file-loader。
安装webpack plugin
与loader专注于处理资源内容不同，plugin功能更广更强大。plugin可以实现那些loader实现不了或者不适合在loader实现的功能，比如自动生成项目的HTML页面、向构建过程中注入环境变量等。
安装html-webpack-plugin
npm install html-webpack-plugin --save-dev
安装uglifyjs-webpack-plugin，用于JS代码压缩
npm install uglifyjs-webpack-plugin --save-dev
配置webpack
根目录配置webpack.config.js：
var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(ROOT_PATH,'src');
var BUILD_PATH = path.resolve(ROOT_PATH,'dist');
module.exports = {
entry: {
index: path.resolve(SRC_PATH,'index.jsx')
},output: {
path: BUILD_PATH,filename: 'js/[name].[hash:5].js'
},// 开启dev source map
devtool: 'eval-source-map',// 开启 webpack dev server
devServer: {
historyApiFallback: true,hot: true,inline: true
//progress: true
},resolve: {
extensions: ['.js','.jsx']
//root: APP_PATH
},module: {
// 配置preLoaders,将eslint添加进去
loaders: [
{
test: /\.jsx?$/,loaders: ['eslint-loader'],include: SRC_PATH,enforce: 'pre'
},{
test: /\.jsx?$/,loaders: ['babel-loader'],exclude: path.resolve(ROOT_PATH,'node_modules')
}
]
},// 配置plugin
plugins: [
new webpack.DefinePlugin({
'process.env.API_ENV': '"development"'
}),new webpack.optimize.UglifyJsPlugin({
sourceMap: true,}),new HtmlwebpackPlugin({
title: 'react-webpack-demo',filename: 'index.html',template: path.resolve(SRC_PATH,'templates','index.html'),minify: {
removeComments: true,collapseWhitespace: true,removeRedundantAttributes: true,removeScriptTypeAttributes: true,removeStyleLinkTypeAttributes: true,removeAttributeQuotes: true
}
})
]
};
上面的配置把app文件夹的app.jsx作为入口，用配置好的babel-loader处理它，在Babel处理前先用ESLint检查代码格式，最后使用HtmlwebpackPlugin在build文件夹中生成处理后的HTML文件。我们还添加了一个resolve的参数，把JSX扩展名添加进去，从而支持JS中import加载JSX扩展名的脚本。
安装核心功能包
安装React依赖包
npm install react react-dom --save
安装react-redux依赖包
npm install redux --save npm install redux-actions --save npm install react-redux --save
安装react-router依赖包
npm install react-router --save npm install react-router-redux --save
安装redux调试工具包
npm install redux-devtools --save-dev
创建项目入口模块
根目录下创建src目录：
新建/src/index.jsx：
import React from 'react';
import ReactDOM from 'react-dom';
function Index() {
return (
<div className="container">
<h1>Hello React!</h1>
</div>
);
}
ReactDOM.render(<Index />,document.getElementById('root'));
export default Index;
创建渲染页面
创建/scr/templates/index.html：
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="root"></div> </body> </html>
运行程序
在package.json中添加自定义命令：
"scripts": {
"build": "webpack","dev": "webpack-dev-server --hot"
}
运行：
npm run dev
webpack-dev-server会新建一个基于Express的服务器，打开浏览器http://localhost:8080
开发中可能还依赖各种中间件和第三方工具。具体用到时再安装吧。
代码：https://github.com/zhutx/reac...
React技术栈之Webpack环境搭建（一）手动搭建
React技术栈之Webpack环境搭建（二）不同环境不同配置
React技术栈之Webpack环境搭建（三）打包性能优化
React系列---Webpack环境搭建（一）手动搭建
React系列---Webpack环境搭建（一）手动搭建
React系列---Webpack环境搭建（二）不同环境不同配置
React系列---Webpack环境搭建（三）打包性能优化
工程初始化
确保已经安装了node，npm包管理工具会随node一起安装。
可用以下方式安装依赖包：
# 安装到全局环境
npm install 依赖包[@版本号] -g
# 安装到当前环境并添加到package.json的dependencies部分
npm install 依赖包[@版本号] --save
# 安装到当前环境并添加到package.json的devDependencies部分
npm install 依赖包[@版本号] --save-dev创建react-webpack-demo目录并进入：
生成package.json
npm init --yes安装webpack
npm install webpack --save-dev安装webpack-dev-server
npm install webpack-dev-server --save-devwebpack-dev-server是一个基于Express框架的Node.js服务器。它还提供了一个客户端的运行环境，会被注入到页面代码中执行，并通过Socket.IO与服务器通信。
服务器端的每次改动与重新构建都会被通知到页面上。还提供了如模块替换这样强大的功能。
安装Babel
安装babel-core核心模块
npm install babel-core --save-dev安装babel的ES6和React语法包
npm install babel-preset-es2015 babel-preset-react --save-dev配置Babel
根目录下配置.babelrc
{
"presets": ["es2015", "react"]
}安装ESLint
安装ESLint loader
npm install eslint@3.19.0 --save-dev安装ESLint的第三方配置规则eslint-config-airbnb
npm install eslint-config-airbnb --save-deveslint-config-airbnb需要以下3个插件支持：
npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev配置ESLint
根目录下配置.eslintrc.js
module.exports = {
"parserOptions": {
"ecmaVersion": 7, // ECMAScript版本，7为ES7
"sourceType": "module", //默认script，如果代码是ECMAScript模块，设置为module
"ecmaFeatures": { // 使用额外的语言特性
"jsx": true // 启用JSX
}
},
// 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量
// 避免访问未定义的环境变量而发出告警
"env": {
"es6": true,
"node": true,
"browser": true,
},
// 脚本在执行期间访问的额外的全局变量
// 避免访问未定义的环境变量而发出告警
"globals": {
"document": true,
"navigator": true,
"window":true,
"node":true
},
// 继承第三方校验规则eslint-config-airbnb
"extends": "airbnb",
// eslint-config-airbnb包括了以下3个插件
"plugins": [
"react",
"jsx-a11y",
"import"
],
// 定制自己的规则
"rules": {
"comma-dangle": ["error", "never"], // 要求或禁止末尾逗号：不允许逗号
"indent": ["error", 4], // JavaScript代码强制使用一致的缩进：4格缩进
}
};安装webpack loader
Webpack有一个不可不说的优点，它把所有的文件都可以当做模块处理，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
Webpack 默认只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
安装eslint-loader整合eslint：
npm install eslint-loader --save-dev安装babel-loader整合babel：
npm install babel-loader --save-dev安装style-loader css-loader等，转换对应类型文件：
npm install style-loader css-loader less-loader sass-loader file-loader url-loader --save-devcss-loader 用于打包css文件
style-loader 用于将编译完成的css插入html中
less-loader 是将less文件编译成css
sass-loader 是将sass文件编译成css
file-loader 用于打包文件
url-loadder 用于打包图片
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
url-loader是对file-loader的上层封装。一般限制小图片直接转成 base64 可以用 url-loader，其他情况都用 file-loader。
安装webpack plugin
与loader专注于处理资源内容不同，plugin功能更广更强大。plugin可以实现那些loader实现不了或者不适合在loader实现的功能，比如自动生成项目的HTML页面、向构建过程中注入环境变量等。
安装html-webpack-plugin
npm install html-webpack-plugin --save-dev安装uglifyjs-webpack-plugin，用于JS代码压缩
npm install uglifyjs-webpack-plugin --save-dev配置webpack
根目录配置webpack.config.js：
var path = require(''path'');
var webpack = require(''webpack'');
var HtmlwebpackPlugin = require(''html-webpack-plugin'');
var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(ROOT_PATH, ''src'');
var BUILD_PATH = path.resolve(ROOT_PATH, ''dist'');
module.exports = {
entry: {
index: path.resolve(SRC_PATH, ''index.jsx'')
},
output: {
path: BUILD_PATH,
filename: ''js/[name].[hash:5].js''
},
// 开启dev source map
devtool: ''eval-source-map'',
// 开启 webpack dev server
devServer: {
historyApiFallback: true,
hot: true,
inline: true
//progress: true
},
resolve: {
extensions: [''.js'', ''.jsx'']
//root: APP_PATH
},
module: {
// 配置preLoaders, 将eslint添加进去
loaders: [
{
test: /\.jsx?$/,
loaders: [''eslint-loader''],
include: SRC_PATH,
enforce: ''pre''
}, {
test: /\.jsx?$/,
loaders: [''babel-loader''],
include: SRC_PATH,
exclude: path.resolve(ROOT_PATH, ''node_modules'')
}
]
},
// 配置plugin
plugins: [
new webpack.DefinePlugin({
''process.env.NODE_ENV'': ''"development"''
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
}),
new HtmlwebpackPlugin({
title: ''react-webpack-demo'',
filename: ''index.html'',
template: path.resolve(SRC_PATH, ''templates'', ''index.html''),
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
removeAttributeQuotes: true
}
})
]
};上面的配置把app文件夹的app.jsx作为入口，用配置好的babel-loader处理它，在Babel处理前先用ESLint检查代码格式，最后使用HtmlwebpackPlugin在build文件夹中生成处理后的HTML文件。我们还添加了一个resolve的参数，把JSX扩展名添加进去，从而支持JS中import加载JSX扩展名的脚本。
安装核心功能包
安装React依赖包
npm install react react-dom --save安装react-redux依赖包
npm install redux --save
npm install redux-actions --save
npm install react-redux --save安装react-router依赖包
npm install react-router --save
npm install react-router-redux --save安装redux调试工具包
npm install redux-devtools --save-dev创建项目入口模块
根目录下创建src目录：
新建/src/index.jsx：
import React from ''react'';
import ReactDOM from ''react-dom'';
function Index() {
return (
<div className="container">
<h1>Hello React!</h1>
</div>
);
}
ReactDOM.render(<Index />, document.getElementById(''root''));
export default Index;
创建渲染页面
创建/scr/templates/index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>运行程序
在package.json中添加自定义命令：
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --hot"
}运行：
npm run devwebpack-dev-server会新建一个基于Express的服务器，打开浏览器http://localhost:8080
开发中可能还依赖各种中间件和第三方工具。具体用到时再安装吧。
代码：https://github.com/zhutx/reac...
React系列---Webpack环境搭建（一）手动搭建
React系列---Webpack环境搭建（二）不同环境不同配置
React系列---Webpack环境搭建（三）打包性能优化
react项目下webpack版本更新导致的配置报错解决方案
webpack1.x项目配置，在更新webpack版本时出现的问题解决
问题一：
resolve:{
// 引入文件不写后缀名配置
extensions:['','.js','.jsx']
}
配置时 extensions 第一个参数不能是空，改为 extensions:['.js','.jsx']
问题二：
配置postcss有误，webpack2.0以上不再允许配置自定义属性，需要再plugin中定义
修改前
postcss: [
require('autoprefixer') //调用autoprefixer插件，例如 display: flex
]
修改后
在 plugin中新增
new webpack.LoaderOptionsPlugin({
options: {
postcss: function () {
return [autoprefixer];
}
}
})
问题三：
webpack-dev-server配置不再有colors属性
devServer: {
// colors: true,//终端中输出结果为彩色
historyApiFallback: true,//不跳转，在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
inline: true,//实时刷新
hot: true // 使用热加载插件 HotModuleReplacementPlugin
}
问题四：
使用加载器时不再允许 省略‘-loader’后缀
修改前：
module: {
loaders: [
{ test: /\.(js|jsx)$/,exclude: /node_modules/,loader: 'babel' },{ test: /\.less$/,loader: 'style!css!postcss!less' },{ test: /\.css$/,loader: 'style!css!postcss' },{ test: /\.(png|gif|jpg|jpeg|bmp)$/i,loader:'url-loader?limit=5000' },// 限制大小5kb
{ test: /\.(png|woff|woff2|svg|ttf|eot)($|\?)/i,loader:'url-loader?limit=5000'} // 限制大小小于5k
]
}
修改后：
module: {
loaders: [
{ test: /\.(js|jsx)$/,loader: 'babel-loader' },loader: 'style-loader!css-loader!postcss-loader!less-loader' },loader: 'style-loader!css-loader!postcss-loader' },loader:'url-loader?limit=5000'} // 限制大小小于5k
]
}
问题五：
postcss配置有误，更换引入的方式,创建postcss.config.js文件，添加代码如下：
var autoprefixer = require('autoprefixer');
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}
在webpack2.6版本 可以通过直接在webpack.config.js中添加如下代码使用：
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: function(){
return [
require("autoprefixer")({
browsers: ['ie>=8','>1% in CN']
})
]
}
}
})
]
至此，更新了webpack以后执行npm start(看自己配置是怎样的，package.json的scripts配置)，应该就可以跑起来了，有什么不对的地方，望指教。
今天的关于webpack手动搭建react项目的配置文件和react webpack搭建的分享已经结束，谢谢您的关注，如果想了解更多关于create-react-app脚手架创建react项目，暴露webpack配置文件，如何引入less支持+antd按需加载+自定义主题、React技术栈之Webpack环境搭建（一）手动搭建、React系列---Webpack环境搭建（一）手动搭建、react项目下webpack版本更新导致的配置报错解决方案的相关知识，请在本站进行查询。
本文标签：
