// see http://vuejs-templates.github.io/webpack for documentation. var path = require('path')
module.exports = { // 生产环境 build: { env: require('./prod.env'), // 编译环境 index: path.resolve(__dirname, '../dist/index.html'), // 输入的文件 assetsRoot: path.resolve(__dirname, '../dist'), // 本地系统上的路径,输出的目标文件夹 assetsSubDirectory: 'static', // 输出的二级文件夹(自动生成) assetsPublicPath: '/', // 发布资源的根目录,可配置为资源服务器url productionSourceMap: true, // 记录文件压缩前后的位置信息 // 压缩 gzip模式下需要压缩的文件的扩展名 // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }, // 开发环境 dev: { env: require('./dev.env'), port: 8080, // 监听的端口 autoOpenBrowser: true, // 自动打开浏览器 assetsSubDirectory: 'static', // 输出的二级文件夹(自动生成) assetsPublicPath: '/', // 发布资源的根目录,可配置为资源服务器url // 如设置"/api": "http://localhost:3000",则请求到 /api/users 现在会被代理到请求 http://localhost:3000/api/users // 需要proxyTable代理的接口(可跨域) proxyTable: {}, // 记录文件压缩前后的位置信息 // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false } }
// [[ 2. 引入相关插件和配置 ]] // 获取配置,获取配置中设置的环境变量 var config = require('../config') if (!process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) }
var opn = require('opn') // 用于打开默认浏览器打开localhost:端口 var path = require('path') var express = require('express') var webpack = require('webpack') var proxyMiddleware = require('http-proxy-middleware') // 一个express中间件,用于将http请求代理到其他服务器 var webpackConfig = require('./webpack.dev.conf')
// 设置监听端口 var port = process.env.PORT || config.dev.port // 设置是否自动打开浏览器 var autoOpenBrowser = !!config.dev.autoOpenBrowser // 定义HTTP代理表 // https://github.com/chimurai/http-proxy-middleware var proxyTable = config.dev.proxyTable
// [[ 3. 创建express服务器和webpack编译器 ]] var app = express() var compiler = webpack(webpackConfig)
// [[ 7. 启动服务器监听特定端口]] var uri = 'http://localhost:' + port
var _resolve var readyPromise = newPromise(resolve => { _resolve = resolve })
// [[ 8. 打开默认浏览器打开localhost:端口 ]] console.log('> Starting dev server...') devMiddleware.waitUntilValid(() => { console.log('> Listening at ' + uri + '\n') // when env is testing, don't need open it if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { opn(uri) } _resolve() })
var ora = require('ora') // 用于开启loading动画 var rm = require('rimraf') var path = require('path') var chalk = require('chalk') var webpack = require('webpack') var config = require('../config') var webpackConfig = require('./webpack.prod.conf')
// [[ 2. 开启loading动画 ]] var spinner = ora('building for production...') spinner.start()
console.log(chalk.cyan(' Build complete.\n')) console.log(chalk.yellow( ' Tip: built files are meant to be served over an HTTP server.\n' + ' Opening index.html over file:// won\'t work.\n' )) }) })