Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。vue-webpack-boilerplate,官方定义为:full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.本文主要介绍了浅谈Vue-cli 命令行工具分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。
目录结构:
├── 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' ? } }
dev.env.js
'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' ? config.build.assetsSubDirectory // 'static' : config.dev.assetsSubDirectory return path.posix.join(assetsSubDirectory, _path) // posix方法修正路径 } exports.cssLoaders = function (options) { // 示例: ({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) options = options || {}; // cssLoader const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } // postcssLoader var postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap } } // 生成 loader function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] // 设置默认loader if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { // 生成 options 对象 sourceMap: options.sourceMap }) }) } // 生产模式中提取css if (options.extract) { // 如果 options 中的 extract 为 true 配合生产模式 return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' // 默认使用 vue-style-loader }) } else { return ['vue-style-loader'].concat(loaders) } } return { // 返回各种 loaders 对象 css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), // 示例:[ // { loader: 'css-loader', options: { sourceMap: true/false } }, // { loader: 'postcss-loader', options: { sourceMap: true/false } }, // { loader: 'less-loader', options: { sourceMap: true/false } }, // ] sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } } exports.styleLoaders = function (options) { const output = []; const loaders = exports.cssLoaders(options); for (const extension in loaders) { const loader = loaders[extension] output.push({ test: new RegExp('\\.' + extension + '$'), use: loader }) // 示例: // { // test: new RegExp(\\.less$), // use: { // loader: 'less-loader', options: { sourceMap: true/false } // } // } } return output } exports.createNotifierCallback = function () { // 配合 friendly-errors-webpack-plugin // 基本用法:notifier.notify('message'); const notifier = require('node-notifier'); // 发送跨平台通知系统 return (severity, errors) => { // 当前设定是只有出现 error 错误时触发 notifier 发送通知 if (severity !== 'error') { return } // 严重程度可以是 'error' 或 'warning' const error = errors[0] const filename = error.file && error.file.split('!').pop(); notifier.notify({ title: pkg.name, message: severity + ': ' + error.name, subtitle: filename || '' // icon: path.join(__dirname, 'logo.png') // 通知图标 }) } }
基础配置文件 webpack.base.conf.js
基础的 webpack 配置文件主要根据模式定义了入口出口,以及处理 vue, babel 等的各种模块,是最为基础的部分。其他模式的配置文件以此为基础通过 webpack-merge 合并。
'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' ? config.build.assetsPublicPath // 生产模式publicpath : config.dev.assetsPublicPath // 开发模式publicpath }, resolve: { // 解析确定的拓展名,方便模块导入 extensions: ['.js', '.vue', '.json'], alias: { // 创建别名 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') // 如 '@/components/HelloWorld' } }, module: { rules: [{ test: /\.vue$/, // vue 要在babel之前 loader: 'vue-loader', options: vueLoaderConfig //可选项: vue-loader 选项配置 },{ test: /\.js$/, // babel loader: 'babel-loader', include: [resolve('src')] },{ // url-loader 文件大小低于指定的限制时,可返回 DataURL,即base64 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // url-loader 图片 loader: 'url-loader', options: { // 兼容性问题需要将query换成options limit: 10000, // 默认无限制 name: utils.assetsPath('img/[name].[hash:7].[ext]') // hash:7 代表 7 位数的 hash } },{ test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, // url-loader 音视频 loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } },{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // url-loader 字体 loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }, node: { // 是否 polyfill 或 mock setImmediate: false, dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' } }
开发模式配置文件 webpack.dev.conf.js
开发模式的配置文件主要引用了 config 对于 devServer 的设定,对 css 文件的处理,使用 DefinePlugin 判断是否生产环境,以及其他一些插件。
'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 ? { // warning 和 error 都要显示 warnings: true, errors: true, } : false, publicPath: config.dev.assetsPublicPath, // 配置publicPath proxy: config.dev.proxyTable, // 代理 quiet: true, // 控制台是否禁止打印警告和错误 若使用 FriendlyErrorsPlugin 此处为 true watchOptions: { poll: config.dev.poll, // 文件系统检测改动 } }, plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env') // 判断生产环境或开发环境 }), new webpack.HotModuleReplacementPlugin(), // 热加载 new webpack.NamedModulesPlugin(), // 热加载时直接返回更新的文件名,而不是id new webpack.NoEmitOnErrorsPlugin(), // 跳过编译时出错的代码并记录下来,主要作用是使编译后运行时的包不出错 new HtmlWebpackPlugin({ // 该插件可自动生成一个 html5 文件或使用模板文件将编译好的代码注入进去 filename: 'index.html', template: 'index.html', inject: true // 可能的选项有 true, 'head', 'body', false }), ] }) module.exports = new Promise((resolve, reject) => { portfinder.basePort = process.env.PORT || config.dev.port; // 获取当前设定的端口 portfinder.getPort((err, port) => { if (err) { reject(err) } else { process.env.PORT = port; // process 公布端口 devWebpackConfig.devServer.port = port; // 设置 devServer 端口 devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ // 错误提示插件 compilationSuccessInfo: { messages: [`Your application is running here: http://${config.dev.host}:${port}`], }, onErrors: config.dev.notifyOnErrors ? utils.createNotifierCallback() : undefined })) resolve(devWebpackConfig); } }) })
生产模式配置文件 webpack.prod.conf.js
'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' ? require('../config/prod.env') : require('../config/dev.env') const webpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, // production 下生成 sourceMap extract: true, // util 中 styleLoaders 方法内的 generateLoaders 函数 usePostCSS: true }) }, devtool: config.build.productionSourceMap ? config.build.devtool : false, output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, plugins: [ new webpack.DefinePlugin({ 'process.env': env }), new webpack.optimize.UglifyJsPlugin({ // js 代码压缩还可配置 include, cache 等,也可用 babel-minify compress: { warnings: false }, sourceMap: config.build.productionSourceMap, parallel: true // 充分利用多核cpu }), // 提取 js 文件中的 css new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css'), allChunks: false, }), // 压缩提取出的css new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), // 生成 html new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'production' ? config.build.index : 'index.html', template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' // 按 dependency 的顺序引入 }), new webpack.HashedModuleIdsPlugin(), // 根据模块的相对路径生成一个四位数的 hash 作为模块 id new webpack.optimize.ModuleConcatenationPlugin(), // 预编译所有模块到一个闭包中 // 拆分公共模块 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module) { return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', minChunks: Infinity }), new webpack.optimize.CommonsChunkPlugin({ name: 'app', async: 'vendor-async', children: true, minChunks: 3 }), // 拷贝静态文档 new CopyWebpackPlugin([{ from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] }])] }) if (config.build.productionGzip) { // gzip 压缩 const CompressionWebpackPlugin = require('compression-webpack-plugin'); webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp('\\.(' + config.build.productionGzipExtensions.join('|') + ')$'), threshold: 10240, // 10kb 以上大小的文件才压缩 minRatio: 0.8 // 最小比例达到 .8 时才压缩 }) ) } if (config.build.bundleAnalyzerReport) { // 可视化分析包的尺寸 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; webpackConfig.plugins.push(new BundleAnalyzerPlugin()); } module.exports = webpackConfig;
build.js 编译入口
'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' )) }) })
相关推荐:
Das obige ist der detaillierte Inhalt vonEine kurze Diskussion zum Vue-cli-Befehlszeilentool. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!