淺談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
|- index.js #配置文件
|- dev.env.js #開發(fā)模式
|- prod.env.js #生產(chǎn)模式

'use strict'
const path = require('path');

module.exports = {
 dev: {

 // 路徑
 assetsSubDirectory: 'static', // path：用來存放打包后文件的

'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
|- utils.js #代碼段
|- webpack.base.conf.js #基礎配置文件
|- webpack.dev.conf.js #開發(fā)模式配置文件
|- webpack.prod.conf.js #生產(chǎn)模式配置文件
|- build.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
 })
 })
 }

 // 生產(chǎn)模式中提取css
 if (options.extract) { // 如果 options 中的 extract 為 true 配合生產(chǎn)模式
 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'); // 發(fā)送跨平臺通知系統(tǒng)

 return (severity, errors) => {
 // 當前設定是只有出現(xiàn) error 錯誤時觸發(fā) notifier 發(fā)送通知
 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') // 通知圖標
 })
 }
}

'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 // 生產(chǎn)模式publicpath
 : config.dev.assetsPublicPath // 開發(fā)模式publicpath
 },
 resolve: { // 解析確定的拓展名，方便模塊導入
 extensions: ['.js', '.vue', '.json'], 
 alias: { // 創(chuàng)建別名
 '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 位數(shù)的 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'
 }
}

'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 等規(guī)則，與自己一個個手寫一樣，默認包括了 css 和 postcss 規(guī)則
 },

 devtool: config.dev.devtool,// 添加元信息(meta info)增強調(diào)試

 // 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 優(yōu)先
 port: process.env.PORT || config.dev.port, // process.env 優(yōu)先
 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, // 文件系統(tǒng)檢測改動
 }
 },
 plugins: [
 new webpack.DefinePlugin({
 'process.env': require('../config/dev.env') // 判斷生產(chǎn)環(huán)境或開發(fā)環(huán)境
 }),
 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);
 }
 })
})

'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 方法內(nèi)的 generateLoaders 函數(shù)
 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(), // 根據(jù)模塊的相對路徑生成一個四位數(shù)的 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
 }),

 // 拷貝靜態(tài)文檔
 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;

'use strict'

process.env.NODE_ENV = 'production'; // 設置當前環(huán)境為生產(chǎn)環(huán)境
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;
 // 刪除完成回調(diào)函數(shù)內(nèi)執(zhí)行編譯
 webpack(webpackConfig, function (err, stats) {
 spinner.stop();
 if (err) throw err;
 
 // 編譯完成，