搭建完美的React开发生产测试环境(二)
如果看了此文你还不是很清楚很多细节的问题,可以戳我的 Demo 希望对你有所帮助 前言
上一篇阐述了从零到能进行
本篇继续上文,说说如何搭建一个自动打包,无需每次修改代码重新打包,热重载的环境。 说的不准确,或者有错误,多多指教,多多指教,多多指教!!!! express 服务器
安装依赖这一步我们应该还是很熟了,根目录下运行下面的命令。 $ npm install express --save-dev 创建服务启动文件为了以后长远打算,我们不直接在根目录下创建服务入口文件,把构建文件都单独存放在 var express = require('express') // 实例化express var app = express() // 监听端口 var port = 3030 // 所有请求 app.get('*',function (req,res) { res.sendFile(path.join(__dirname,'../index.html')) }) // 监听3030端口,开启服务 app.listen(port,function (err) { if (err) { console.error(err) } else { console.info('Listening on port %s',port) } }) 此时我们在根目录下运行 修改 webpack 配置文件在 // 出口 output: { // 出口文件目录 path: path.resolve(__dirname,'dist'),// 出口文件名 filename: 'bundle.js',// 服务端资源路径 publicPath: 'http://localhost:3030/dist/' }, 改到这一步,访问 热重载的服务器要想页面能够热重载,实时的进行组件更新,还需要用的两个 安装依赖我们依然还是首先安装这两个插件: $ npm install webpack-dev-middleware webpack-hot-middleware --save-dev
修改 dev-server.js 文件在 var path = require('path') var express = require('express') var webpack = require('webpack') var webpackConfig = require('../webpack.config.js') // 实例化express var app = express() // 监听端口 var port = 3030 // 加载webpack配置 var compiler = webpack(webpackConfig) // 加载中间件webpack-dev-middleware // 1. 监听资源变更,自动打包 2. 快速编译,资源走内存,不读硬盘 3.返回中间件 app.use(require('webpack-dev-middleware')(compiler,{ // 不打印多余信息 noInfo: true,// 监听目录 publicPath: webpackConfig.output.publicPath,// 控制台打包彩色 stats: { colors: true } })) // 加载中间件webpack-hot-middleware // 热加载,实时更新改变 app.use(require('webpack-hot-middleware')(compiler)) // 所有请求 app.get('*',port) } }) 修改 webpack.config.js 文件光在 // 插件 plugins: [ // 启用热更新 new webpack.HotModuleReplacementPlugin(),// 允许错误不打断程序 new webpack.NoEmitOnErrorsPlugin() ] 走到这里,已经可以实现热重载的功能了。 重整 webpack 配置文件为了以后更好的管理,我把 安装依赖要做到上述说的这些,还需两个个插件。 $ npm install babel-cli webpack-merge --save-dev
创建 webpack.base.conf.js预设以后的生产环境的 import path from 'path' export default { // 入口 entry: { app: './src/main.js' },// 出口 output: { // 服务器静态资源目录 publicPath: 'http://loaclhost:3030/dist',// 出口文件目录 path: path.resolve(__dirname,// 出口文件名 filename: 'bundle.js' },// 模块 module: { rules: [ { // 匹配所有的 .js .jsx 文件 test: /(.js|.jsx)$/,// 忽略 node_modules 目录 exclude: /node_modules/,use: { // 使用的loader loader: 'babel-loader',// babel-loader 的选项 options: { // 预设规则 presets: ['es2015','react'] } } } ] } } 创建 webpack.dev.conf.js我们将之前开发环境用到的插件抽离到这个文件下。 import webpack from 'webpack' import merge from 'webpack-merge' import baseWebpackConfig from './webpack.base.conf' export default merge(baseWebpackConfig,{ plugins: [ new webpack.HotModuleReplacementPlugin(),new webpack.NoEmitOnErrorsPlugin() ] }) 统一风格既然我们都已经改用 import path from 'path' import express from 'express' import webpack from 'webpack' import webpackConfig from './webpack.dev.conf.js' import webpackDevMiddleware from 'webpack-dev-middleware' import webpackHotMiddleware from 'webpack-hot-middleware' // 实例化express const app = express() // 监听端口 const port = 3030 // 加载webpack配置 const compiler = webpack(webpackConfig) // 加载中间件webpack-dev-middleware // 1. 监听资源变更,自动打包 2. 快速编译,资源走内存,不读硬盘 3.返回中间件 app.use(webpackDevMiddleware(compiler,// 控制台打包彩色 stats: { colors: true } })) // 加载中间件webpack-hot-middleware // 热加载,实时更新改变 app.use(webpackHotMiddleware(compiler)) // 所有请求 app.get('*',function (err) { if (err) { console.error(err) } else { console.info(`Listening on port ${port} !`) } }) 好了,到这里不管是热重载的服务器搭建, 本篇结尾到这里算是给我们的基本环境加了不少有用的配置了,但是还是不够,我们还想更懒一点,不想点开浏览器,不想输入一长串的url,不想写一大堆的 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |