// 获取配置 var config = require('../config') // 如果Node的环境变量中没有设置当前的环境（NODE_ENV），则使用config中的配置作为当前的环境 if (!process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) }
// 一个可以调用默认软件打开网址、图片、文件等内容的插件 // 这里用它来调用默认浏览器打开dev-server监听的端口，例如：localhost:8080 var opn = require('opn') var path = require('path') var express = require('express') var webpack = require('webpack')
// 应用的地址信息，例如：http://localhost:8080 var uri = 'http://localhost:' + port
// webpack开发中间件合法（valid）之后输出提示语到控制台，表明服务器已启动 devMiddleware.waitUntilValid(function () { console.log('> Listening at ' + uri + '\n') })
// 启动express服务器并监听相应的端口（8080） module.exports = app.listen(port, function (err) { if (err) { console.log(err) return }
// when env is testing, don't need open it // 如果符合自动打开浏览器的条件，则通过opn插件调用系统默认浏览器打开对应的地址uri if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { opn(uri) } })
// Elegant terminal spinner var ora = require('ora') var path = require('path')
// 用于在控制台输出带颜色字体的插件 var chalk = require('chalk')
// 执行Unix命令行的插件 var shell = require('shelljs') var webpack = require('webpack') var config = require('../config') var webpackConfig = require('./webpack.prod.conf')
var spinner = ora('building for production...') spinner.start() // 开启loading动画
// 输出文件的目标文件夹 var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
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' )) })
var path = require('path') var utils = require('./utils') var webpack = require('webpack') var config = require('../config') var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') varHtmlWebpackPlugin = require('html-webpack-plugin')
// generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin newHtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }),
// split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['vendor'] }) ] })
module.exports = function () { var warnings = [] // 依次判断版本是否符合要求 for (var i = 0; i < versionRequirements.length; i++) { var mod = versionRequirements[i] if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { warnings.push(mod.name + ': ' + chalk.red(mod.currentVersion) + ' should be ' + chalk.green(mod.versionRequirement) ) } }
// 如果有警告则将其输出到控制台 if (warnings.length) { console.log('') console.log(chalk.yellow('To use this template, you must update following to modules:')) console.log() for (var i = 0; i < warnings.length; i++) { var warning = warnings[i] console.log(' ' + warning) } console.log() process.exit(1) } }
// see http://vuejs-templates.github.io/webpack for documentation. var path = require('path')
module.exports = { // 构建产品时使用的配置 build: { // webpack的编译环境 env: require('./prod.env'), // 编译输入的index.html文件 index: path.resolve(__dirname, '../dist/index.html'), // webpack输出的目标文件夹路径 assetsRoot: path.resolve(__dirname, '../dist'), // webpack编译输出的二级文件夹 assetsSubDirectory: 'static', // webpack编译输出的发布路径 assetsPublicPath: '/', // 使用SourceMap productionSourceMap: true, // 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 // 默认不打开开启gzip模式 productionGzip: false, // gzip模式下需要压缩的文件的扩展名 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: { // webpack的编译环境 env: require('./dev.env'), // dev-server监听的端口 port: 8080, // 启动dev-server之后自动打开浏览器 autoOpenBrowser: true, // webpack编译输出的二级文件夹 assetsSubDirectory: 'static', // webpack编译输出的发布路径 assetsPublicPath: '/', // 请求代理表，在这里可以配置特定的请求代理到对应的API接口 // 例如将'/api/xxx'代理到'www.example.com/api/xxx' 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 cssSourceMap: false } }