前期準備： Node.js version: v10.14.2 步驟： 1：建立一個空的文件夾，打卡cmd 視窗， 在當前文件夾目錄下，運行 npm init, 在文件夾中會生成一個packadge.json 的文件 2：安裝項目依賴項， 包括項目打包工具webpack, babel 編譯工具相關包 ...
前期準備：
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
