修改了原文部分配置，以及配置后可能出现的错误解决方法：
a、webpack.config.js配置入口文件（entry）和出口文件（output），webpack4可以不配置，如果报错Entrypoint undefined = index.html可以尝试。
b、报错：Error: Cannot find module '@babel/core'，解决方法，重新安装低版本babel-loader
npm uninstall babel-loader
npm install babel-loader@7.1.5
转：https://www.jianshu.com/p/cb2e63bc1705
1、新建项目文件my-react-app，初始化项目
mkdir my-react-app //新建项目文件
cd my-react-app //进入项目根目录
npm init -y //初始化项目，快速构建package.json文件
2、本地安装webpack及其命令行接口
//-D就是--save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面
npm install -D webpack webpack-cli
3、webpack4入口文件为./src/index.js，所以新建src文件夹下的index.js文件
4、修改package.json文件的scripts字段
"scripts": {
"dev":"webpack --mode development",//开发模式，对打包文件不压缩
"build":"webpack --mode production"//压缩打包文件
},
执行npm run dev 或者npm run build，会多出./disk/main.js文件，这个文件是webpack对./src/index.js的打包结果
5、安装React
npm install -D react react-dom
6、安装javascript编译器babel
npm install -D babel-core babel-polyfill babel-loader babel-preset-env babel-preset-react
npm install -D babel-preset-es2015 babel-preset-stage-0 //新增，支持es2015
新建.babelrc文件，进行相关配置如下：
{
"presets": ["env","react","es2015","stage-0"]
}
7、配置webpack文件，新建webpack.config.js文件，进行相关配置
module.exports= {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader:"babel-loader"
}
}
]
}
};
8、新建public文件夹下的index.html文件，并修改./src/index.js文件
//index.html文件内容Title
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
//index.js文件内容
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>这里是一个简单的示例页面</h1>,
document.getElementById('root')
);
9、安装html-webpack-plugin插件对html进行打包；安装css-loader style-loader，css-loader使你能够使用类似@import和url（...）的方法实现require的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的js文件中。
npm install -D html-webpack-plugin html-loader
npm install -D css-loader style-loader
10、修改webpack.config.js配置文件
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
})
]
};
执行npm run dev 或者npm run build，会多出./disk/index.html文件
11、安装webpack-dev-server搭建服务器
npm install -D webpack-dev-server
修改package.json文件的scripts
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
修改webpack.config.js文件，新增devServer配置
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 8088,
host: "localhost",
}
执行npm start，则可以启动服务，项目搭建完成。http://localhost:8088/
网友评论