修改了原文部分配置，以及配置后可能出現(xiàn)的錯(cuò)誤解決方法：
a囤耳、webpack.config.js配置入口文件（entry）和出口文件（output），webpack4可以不配置，如果報(bào)錯(cuò)Entrypoint undefined = index.html可以嘗試嵌削。
b磷雇、報(bào)錯(cuò)：Error: Cannot find module '@babel/core'偿警，解決方法，重新安裝低版本babel-loader
npm uninstall babel-loader
npm install babel-loader@7.1.5
轉(zhuǎn)：http://www.reibang.com/p/cb2e63bc1705
1唯笙、新建項(xiàng)目文件my-react-app螟蒸，初始化項(xiàng)目
mkdir my-react-app //新建項(xiàng)目文件
cd my-react-app //進(jìn)入項(xiàng)目根目錄
npm init -y //初始化項(xiàng)目盒使，快速構(gòu)建package.json文件
2、本地安裝webpack及其命令行接口
//-D就是--save-dev 這樣安裝的包的名稱及版本號(hào)就會(huì)存在package.json的devDependencies這個(gè)里面
npm install -D webpack webpack-cli
3七嫌、webpack4入口文件為./src/index.js少办，所以新建src文件夾下的index.js文件
4、修改package.json文件的scripts字段
"scripts": {
"dev":"webpack --mode development",//開(kāi)發(fā)模式诵原，對(duì)打包文件不壓縮
"build":"webpack --mode production"http://壓縮打包文件
},
執(zhí)行npm run dev 或者npm run build英妓，會(huì)多出./disk/main.js文件，這個(gè)文件是webpack對(duì)./src/index.js的打包結(jié)果
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文件惹资，進(jìn)行相關(guān)配置如下：
{
"presets": ["env","react","es2015","stage-0"]
}
7贺纲、配置webpack文件，新建webpack.config.js文件褪测，進(jìn)行相關(guān)配置
module.exports= {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader:"babel-loader"
}
}
]
}
};
8猴誊、新建public文件夾下的index.html文件，并修改./src/index.js文件
//index.html文件內(nèi)容Title
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
//index.js文件內(nèi)容
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>這里是一個(gè)簡(jiǎn)單的示例頁(yè)面</h1>,
document.getElementById('root')
);
9侮措、安裝html-webpack-plugin插件對(duì)html進(jìn)行打包懈叹；安裝css-loader style-loader，css-loader使你能夠使用類似@import和url（...）的方法實(shí)現(xiàn)require的功能分扎，style-loader將所有的計(jì)算后的樣式加入頁(yè)面中澄成，二者組合在一起使你能夠把樣式表嵌入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"
})
]
};
執(zhí)行npm run dev 或者npm run build墨状，會(huì)多出./disk/index.html文件
11、安裝webpack-dev-server搭建服務(wù)器
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",
}
執(zhí)行npm start肾砂，則可以啟動(dòng)服務(wù)，項(xiàng)目搭建完成宏悦。http://localhost:8088/
