1.创建项目
确保已经安装了node，并已全局安装了webpack。
进入相应目录，执行npm init，目录下出现package.json文件。
2.安装react, react-dom, webpack
执行命令：
npm install react react-dom --save
npm install webpack --save-dev
npm install webpack-cli --save-dev
--save：上线运行所需的包
--save-dev：生产环境所需的包
3.引入Babel库进行转码
执行命令：
npm install babel-core babel-loader@7 babel-preset-es2015 babel-preset-react --save
4.编写webpack配置文件和项目配置文件：
在根目录创建文件.babelrc
{
"presets":[
"es2015",
"react"
]
}
webpack.config.js：
const path = require('path')
module.exports = {
entry:path.join(__dirname,'/src/index.js'),//指定入口文件，程序从此处开始编译，__dirname表示当前所在目录
output:{
filename:'bundle.js',//打包后的文件
path:path.join(__dirname,'dist')//输出路径
},
module:{
rules:[
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}
在src目录下创建index.js和App.js。
App.js：
import React, { Component } from 'react';
export default class App extends Component{
render() {
return (
<div>Hello React!</div>
);
}
}
index.js：
import React from 'react';
import { render } from 'react-dom';
import App from './App'
const renderDom = Component => {
render(
<Component />,
document.getElementById('app')
);
}
renderDom(App);
在package.json的"scripts"属性中添加：
"dev":"webpack --config webpack.config.js"
然后执行命令：npm run dev，发现报了个错：
image.png
在webpack.config.js中加入:mode: 'production'即可：
const path = require('path')
module.exports = {
mode: 'production',
entry: path.join(__dirname,'/src/index.js'),//指定入口文件，程序从此处开始编译，__dirname表示当前所在目录
output: {
filename:'bundle.js',//打包后的文件
path:path.join(__dirname,'dist')//输出路径
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}
在dist目录下加一个index.html文件，引入bundle.js：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<script src="bundle.js"></script>
</body>
</html>
5.搭建前端服务器
执行命令：
npm install webpack-dev-server --save-dev
在根目录下创建bin目录，在bin目录中创建一个dev-server.js文件.
dev-server.js：
'use strict'
const WebpackDevServer = require('webpack-dev-server');
const config = require('../webpack.config');
const webpack = require('webpack');
const path = require('path');
const compiler = webpack(config);
const server = new WebpackDevServer(
compiler,
{
contentBase: path.resolve(__dirname,'../dist'),//指定文件夹提供本地服务
historyApiFallback: true, //设置为true后所有跳转指向index.html
port:8099,//端口号
publicPath:"/"
}
);
server.listen(8099,'localhost',function(err){
if(err)
throw err
})
package.json中更改dev属性为node bin/dev-server：
{
"name": "reactlearn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "node bin/dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.6.3",
"react-dom": "^16.6.3"
},
"devDependencies": {
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
当前目录结构：
image.png
执行命令：
npm run dev
访问http://localhost:8099，即可看到效果。
image.png
网友评论