// nodejs环境配置 var config = require('../config') if (!process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) } var opn = require('opn') //强制打开浏览器 var path = require('path') var express = require('express') var webpack = require('webpack') var proxyMiddleware = require('http-proxy-middleware') //使用代理的中间件 var webpackConfig = require('./webpack.dev.conf') //webpack的配置 var port = process.env.PORT || config.dev.port //端口号 var autoOpenBrowser = !!config.dev.autoOpenBrowser //是否自动打开浏览器 var proxyTable = config.dev.proxyTable //http的代理url var app = express() //启动express var compiler = webpack(webpackConfig) //webpack编译 //webpack-dev-middleware的作用 //1.将编译后的生成的静态文件放在内存中,所以在npm run dev后磁盘上不会生成文件 //2.当文件改变时,会自动编译。 //3.当在编译过程中请求某个资源时，webpack-dev-server不会让这个请求失败，而是会一直阻塞它，直到webpack编译完毕 var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, quiet: true }) //webpack-hot-middleware的作用就是实现浏览器的无刷新更新 var hotMiddleware = require('webpack-hot-middleware')(compiler, { log: () => {} }) //声明hotMiddleware无刷新更新的时机:html-webpack-plugin 的template更改之后 compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { hotMiddleware.publish({ action: 'reload' }) cb() }) }) //将代理请求的配置应用到express服务上 Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] if (typeof options === 'string') { options = { target: options } } app.use(proxyMiddleware(options.filter || context, options)) }) //使用connect-history-api-fallback匹配资源 //如果不匹配就可以重定向到指定地址 app.use(require('connect-history-api-fallback')()) // 应用devMiddleware中间件 app.use(devMiddleware) // 应用hotMiddleware中间件 app.use(hotMiddleware) // 配置express静态资源目录 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) app.use(staticPath, express.static('./static')) var uri = 'http://localhost:' + port //编译成功后打印uri devMiddleware.waitUntilValid(function () { console.log('> Listening at ' + uri + '\n') }) //启动express服务 module.exports = app.listen(port, function (err) { if (err) { console.log(err) return } // 满足条件则自动打开浏览器 if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { opn(uri) } })
npm run build
由于package.json中的配置，运行此命令后会执行build.js文件
process.env.NODE_ENV = 'production' //设置当前环境为production var ora = require('ora') //终端显示的转轮loading var rm = require('rimraf') //node环境下rm -rf的命令库 var path = require('path') //文件路径处理库 var chalk = require('chalk') //终端显示带颜色的文字 var webpack = require('webpack') var config = require('../config') var webpackConfig = require('./webpack.prod.conf') //生产环境下的webpack配置 // 在终端显示ora库的loading效果 var spinner = ora('building for production...') spinner.start() // 删除已编译文件 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { if (err) throw err //在删除完成的回调函数中开始编译 webpack(webpackConfig, function (err, stats) { spinner.stop() //停止loading if (err) throw err // 在编译完成的回调函数中,在终端输出编译的文件 process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + '\n\n') }) })