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文件
image.png
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
新建.babelrc文件，进行相关配置如下：
{
"presets": ["env", "react"]
}
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文件内容
<!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进行打包
npm install -D html-webpack-plugin html-loader
10、修改webpack.config.js配置文件
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
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: require('path').join(__dirname, "dist"),
compress: true,
port: 8088,
host: "localhost",
}
执行npm start，则可以启动服务，项目搭建完成。http://localhost:8088/
网友评论