Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。vue-webpack-boilerplate，官方定义为：
full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.
目录结构：
├── README.md ├── build │ ├── build.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Hello.vue │ └── main.js └── static
config 环境配置
config 配置文件用来配置 devServer 的相关设定，通过配置 NODE_ENV 来确定使用何种模式（开发、生产、测试或其他）
config |- index.js #配置文件 |- dev.env.js #开发模式 |- prod.env.js #生产模式
index.js
'use strict'
const path = require('path');
module.exports = {
dev: {
// 路径
assetsSubDirectory: 'static', // path：用来存放打包后文件的输出目录
assetsPublicPath: '/', // publicPath：指定资源文件引用的目录
proxyTable: {}, // 代理示例： proxy: [{context: ["/auth", "/api"],target: "http://localhost:3000",}]
// 开发服务器变量设置
host: 'localhost',
port: 8080,
autoOpenBrowser: true, // 自动打开浏览器devServer.open
errorOverlay: true, // 浏览器错误提示 devServer.overlay
notifyOnErrors: true, // 配合 friendly-errors-webpack-plugin
poll: true, // 使用文件系统(file system)获取文件改动的通知devServer.watchOptions
// source map
cssSourceMap: false, // develop 下不生成 sourceMap
devtool: 'eval-source-map' // 增强调试 可能的推荐值：eval, eval-source-map(推荐), cheap-eval-source-map, cheap-module-eval-source-map 详细：https://doc.webpack-china.org/configuration/devtool
},
build: {
// index模板文件
index: path.resolve(__dirname, '../dist/index.html'),
// 路径
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// bundleAnalyzerReport
bundleAnalyzerReport: process.env.npm_config_report,
// Gzip
productionGzip: false, // 默认 false
productionGzipExtensions: ['js', 'css'],
// source map
productionSourceMap: true, // production 下是生成 sourceMap
devtool: '#source-map' // devtool: 'source-map' "htmlcode">
'use strict'
const merge = require('webpack-merge');
const prodEnv = require('./prod.env');
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
});
prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"'
};
build Webpack配置
build
|- utils.js #代码段
|- webpack.base.conf.js #基础配置文件
|- webpack.dev.conf.js #开发模式配置文件
|- webpack.prod.conf.js #生产模式配置文件
|- build.js #编译入口
实用代码段 utils.js
const config = require('../config')
const path = require('path')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
"htmlcode">
'use strict'
const path = require('path');
const utils = require('./utils');
const config = require('../config');
function resolve(dir) {
return path.join(__dirname, '..', dir);
}
module.exports = {
context: path.resolve(__dirname, '../'), // 基础目录
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot, // 默认'../dist'
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
"htmlcode">
'use strict'
const webpack = require('webpack');
const config = require('../config');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const portfinder = require('portfinder'); // 自动检索下一个可用端口
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); // 友好提示错误信息
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
// 自动生成了 css, postcss, less 等规则，与自己一个个手写一样，默认包括了 css 和 postcss 规则
},
devtool: config.dev.devtool,// 添加元信息(meta info)增强调试
// devServer 在 /config/index.js 处修改
devServer: {
clientLogLevel: 'warning', // console 控制台显示的消息，可能的值有 none, error, warning 或者 info
historyApiFallback: true, // History API 当遇到 404 响应时会被替代为 index.html
hot: true, // 模块热替换
compress: true, // gzip
host: process.env.HOST || config.dev.host, // process.env 优先
port: process.env.PORT || config.dev.port, // process.env 优先
open: config.dev.autoOpenBrowser, // 是否自动打开浏览器
overlay: config.dev.errorOverlay "htmlcode">
'use strict'
const path = require('path');
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const env = process.env.NODE_ENV === 'production'
"htmlcode">
'use strict'
process.env.NODE_ENV = 'production'; // 设置当前环境为生产环境
const ora = require('ora'); //loading...进度条
const rm = require('rimraf'); //删除文件 'rm -rf'
const chalk = require('chalk'); //stdout颜色设置
const webpack = require('webpack');
const path = require('path');
const config = require('../config');
const webpackConfig = require('./webpack.prod.conf');
const spinner = ora('正在编译...');
spinner.start();
// 清空文件夹
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err;
// 删除完成回调函数内执行编译
webpack(webpackConfig, function (err, stats) {
spinner.stop();
if (err) throw err;
// 编译完成，输出编译文件
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n');
//error
if (stats.hasErrors()) {
console.log(chalk.red(' 编译失败出现错误.\n'));
process.exit(1);
}
//完成
console.log(chalk.cyan(' 编译成功.\n'))
console.log(chalk.yellow(
' file:// 无用，需http(s)://.\n'
))
})
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。