前期准备：
Node.js version: v10.14.2
步骤：
1：建立一个空的文件夹，打卡cmd 窗口， 在当前文件夹目录下，运行 npm init, 在文件夹中会生成一个packadge.json 的文件
2：安装项目依赖项， 包括项目打包工具webpack, babel 编译工具相关包和react 相关的包，依次运行以下命令
npm install webpack webpack-cli webpack-dev-middleware webpack-hot-middleware webpack-node-externals babel-loader babel-plugin-transform-export-extensions html-webpack-plugin source-map-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
npm install ejs express react react-dom react-helmet redux react-redux
安装完成后，packadge.json 中出现：
"dependencies": {
"@babel/polyfill": "^7.2.5",
"better-npm-run": "^0.1.1",
"ejs": "^2.6.1",
"express": "^4.16.4",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-helmet": "^5.2.0",
"react-redux": "^6.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"babel-plugin-transform-export-extensions": "^6.22.0",
"html-webpack-plugin": "^3.2.0",
"source-map-loader": "^0.2.4",
"webpack": "^4.28.3",
"webpack-cli": "^3.2.0",
"webpack-dev-middleware": "^3.5.0",
"webpack-hot-middleware": "^2.24.3",
"webpack-node-externals": "^1.7.2"
}
3：配置项目的打包工具（仅供练习使用）
1： 新建项目文件 webpack.config.js webpack.dev.config.js webpack.prod.config.js 和项目入口文件 index.js index.html
2： 配置webpack.config.js
配置js 的文件入口， entry 表示webpack 会从这个文件开始根据文件的依赖打包
entry:{
index:'./index.js'
},
配置output, 将webpack打包的js放入output的路径之中
output:{
path: path.resolve(__dirname,'./dist'),//这个路径额结果 _dirname/dist _dirname是项目的根目录，一般是packdge.json所在的目录
publicPath: '/',
filename: '[name].js',
chunkFilename: '[name].js'
},
配置js 加载器，js 打包时要使用babel进行解释
module:{
rules:[
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
配置文件热加载，在js和html 文件更新时，本地自动更新
在插件中加入web-html-plugin
new HtmlWebpackPlugin({
filename: 'index.html',//在dist文件中生成文件名为index.html文件
template: './index.ejs',//以index.ejs 为模板生成文件
chunks:['index'],// 打包的模块的名字为index, 如果是多文件入口，可以根据模块名来将对应的js插入对应的文件中
inject: true
}),
在插件中加入webpack-dev-middleware webpack-hot-middleware
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
以上是全部webpack.config.js中的内容
在webpack.dev.config.js文件中加入
var webpack = require('webpack');
var config =require("./webpack.config");
var hotMiddleWareClientPath='./dev-client'; //热加载的文件
Object.keys(config.entry).forEach(function (name, i) { //在入口文件中开头加入./dev-client 路径
var extras = [hotMiddleWareClientPath]
config.entry[name] = extras.concat(config.entry[name])
})
在根目录下新建dev-client 文件加入以下内容
var hotClient = require('webpack-hot-middleware/client')
// 订阅事件，当 event.action === 'reload' 时执行页面刷新
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})
4 使用express搭建本地server, 代码如下：
const express = require('express');
const webpack = require('webpack');
const app = express();
//in dev env, we need dev/hot middleware
if (process.env.NODE_ENV === 'development') {
const webpackDevMiddleware = require('webpack-dev-middleware');
//const config = require('../config/webpack.config.prod.js');
const config = require('../webpack.dev.config.js');
const compiler = webpack(config);
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
app.use(hotMiddleware);
// webpack插件，监听html文件改变事件
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
// 发布事件
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
}
// Serve the files on port 8800.
app.listen(8800, function () {
console.log('Example app listening on port 8800!\n');
});
//router test
app.get('/flowdirector',async (req, res, next)=>{
console.log("get test");
});
此项目 github地址 ： https://github.com/PerficientCecelia/ReactDemo
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
