├── README.md
├── build
│   ├── build.js
│   ├── check-versions.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
│   ├── test.env.js
│   └── prod.env.js
│
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   │── router
│   │    └── index.js
│   └── main.js
├── static
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js

"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","unit": "jest --config test/unit/jest.conf.js --coverage","test": "npm run unit","lint": "eslint --ext .js,.vue src test/unit/specs","build": "node build/build.js"
}

entry: {app: './src/main.js'
}

output: {path: config.build.assetsRoot,  // 导出目录的绝对路径 在项目的根目录下 会新建dist文件夹filename: '[name].js',  // 导出文件的文件名publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath
}

diststaticcssjsindex.html

// 设置模块如何被解析
resolve: {// 自动解析确定的扩展名，导入模块时不带扩展名extensions: ['.js', '.vue', '.json'],// 创建import 或 require的别名/*比如如下文件srccomponentsa.vuerouterhomeindex.vue在index.vue里面，正常引用A组件；如下：import A from '../../components/a.vue';如果设置了 alias后，那么引用的地方可以如下这样了import A from '@/components/a.vue';注意：这里的 @ 起到了 resolve('src')路径的作用了。*/alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src')}
} 

module: {rules: [// 在开发环境下 对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件)，使用eslint进行文件语法检测。...(config.dev.useEslint ? [createLintingRule()] : []),  {test: /\.vue$/,  // vue 文件后缀的loader: 'vue-loader', // 使用vue-loader处理options: vueLoaderConfig // options是对vue-loader做的额外选项配置 文件配置在 ./vue-loader.conf 内可以查看代码
    },{test: /\.js$/, // js文件后缀的loader: 'babel-loader', // 使用babel-loader处理include: [resolve('src'), resolve('test')] // 包含src和test的文件夹
    },{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 处理图片后缀loader: 'url-loader',  // 使用url-loader处理
      options: {limit: 10000,  // 图片小于10000字节时以base64的方式引用name: utils.assetsPath('img/[name].[hash:7].[ext]')  // 文件名为name.7位hash的值.扩展名
      }},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,  // 音频文件后缀loader: 'url-loader',options: {limit: 10000, // 小于10000字节时的时候处理name: utils.assetsPath('media/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名
      }},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 字体文件loader: 'url-loader',options: {limit: 10000, // 字体文件小于10000字节的时候处理name: utils.assetsPath('fonts/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名
      }}]
}

'use strict';
const path = require('path');
const utils = require('./utils');
const config = require('../config');
const vueLoaderConfig = require('./vue-loader.conf');function resolve (dir) {return path.join(__dirname, '..', dir);
}
/*对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件)，使用eslint进行文件语法检测。
*/
const createLintingRule = () => ({test: /\.(js|vue)$/,loader: 'eslint-loader',enforce: 'pre',include: [resolve('src'), resolve('test')],options: {formatter: require('eslint-friendly-formatter'),emitWarning: !config.dev.showEslintErrorsInOverlay}
});module.exports = {entry: {app: './src/main.js'},output: {path: config.build.assetsRoot, // 导出目录的绝对路径filename: '[name].js', // 导出文件的文件名publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath},// 设置模块如何被解析
  resolve: {// 自动解析确定的扩展名，导入模块时不带扩展名extensions: ['.js', '.vue', '.json'],// 创建import 或 require的别名/*比如如下文件srccomponentsa.vuerouterhomeindex.vue在index.vue里面，正常引用A组件；如下：import A from '../../components/a.vue';如果设置了 alias后，那么引用的地方可以如下这样了import A from '@/components/a.vue';注意：这里的 @ 起到了 resolve('src')路径的作用了。*/alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src')}},module: {rules: [// 在开发环境下 对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件)，使用eslint进行文件语法检测。...(config.dev.useEslint ? [createLintingRule()] : []),{test: /\.vue$/,  // vue 文件后缀的loader: 'vue-loader', // 使用vue-loader处理options: vueLoaderConfig // options是对vue-loader做的额外选项配置 文件配置在 ./vue-loader.conf 内可以查看代码
      },{test: /\.js$/, // js文件后缀的loader: 'babel-loader', // 使用babel-loader处理include: [resolve('src'), resolve('test')] // 包含src和test的文件夹
      },{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 处理图片后缀loader: 'url-loader',  // 使用url-loader处理
        options: {limit: 10000,  // 图片小于10000字节时以base64的方式引用name: utils.assetsPath('img/[name].[hash:7].[ext]')  // 文件名为name.7位hash的值.扩展名
        }},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,  // 音频文件后缀loader: 'url-loader',options: {limit: 10000, // 小于10000字节时的时候处理name: utils.assetsPath('media/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名
        }},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 字体文件loader: 'url-loader',options: {limit: 10000, // 字体文件小于10000字节的时候处理name: utils.assetsPath('fonts/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名
        }}]},node: {// prevent webpack from injecting useless setImmediate polyfill because Vue// source contains it (although only uses it if it's native).setImmediate: false,// prevent webpack from injecting mocks to Node native modules// that does not make sense for the clientdgram: 'empty',fs: 'empty',net: 'empty',tls: 'empty',child_process: 'empty'}
};

'use strict';
const utils = require('./utils');
const config = require('../config');
// 判断是否是生产环境
const isProduction = process.env.NODE_ENV === 'production';
const sourceMapEnabled = isProduction? config.build.productionSourceMap: config.dev.cssSourceMap;module.exports = {// 处理 .vue文件中的样式
  loaders: utils.cssLoaders({// 是否打开 source-map
    sourceMap: sourceMapEnabled,// 是否提取样式到单独的文件
    extract: isProduction}),cssSourceMap: sourceMapEnabled,cacheBusting: config.dev.cacheBusting,transformToRequire: {video: ['src', 'poster'],source: 'src',img: 'src',image: 'xlink:href'}
};

'use strict';
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');// webpack-merge是一个可以合并数组和对象的插件
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
module.exports = merge(baseWebpackConfig, {}）

module: {// 通过传入一些配置来获取rules配置，此处传入了sourceMap: false,表示不生成sourceMaprules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
}

/*生成style-loader的配置style-loader文档：https://github.com/webpack/style-loader@method styleLoaders@param {Object} options生成的配置@return {Array} style-loader的配置
*/
exports.styleLoaders = function (options) {const output = []; // 定义返回的数组，数组中保存的是针对各类型的样式文件的处理方式const loaders = exports.cssLoaders(options); // 调用cssLoaders方法返回各类型的样式对象(css: loader)for (const extension in loaders) { // 循环遍历loadersconst loader = loaders[extension]; // 根据遍历获得的key(extension)来得到value(loader)
    output.push({test: new RegExp('\\.' + extension + '$'), // 处理的文件类型use: loader  // 用loader来处理，loader来自loaders[extension]
    });}return output;
};

/** 生成处理css的loaders配置* @method cssLoaders* @param {Object} options 生成的配置options = {// 是否开启 sourceMapsourceMap: true,// 是否提取cssextract: true}@return {Object} 处理css的loaders的配置对象
*/
exports.cssLoaders = function (options) {options = options || {};const cssLoader = {loader: 'css-loader',options: { // options是loader的选项配置// 根据参数是否生成sourceMap文件 生成环境下压缩文件
      sourceMap: options.sourceMap}};const postcssLoader = {loader: 'postcss-loader',options: {sourceMap: options.sourceMap}};// generate loader string to be used with extract text plugin/*生成ExtractTextPlugin对象或loader字符串@method generateLoaders@param {Array} loader 名称数组@return {String | Object} ExtractTextPlugin对象或loader字符串*/function generateLoaders (loader, loaderOptions) { // 生成loader// 默认是css-loaderconst loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader];if (loader) { // 如果参数loader存在
      loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, { // 将loaderOptions和sourceMap组成一个对象
          sourceMap: options.sourceMap})});}// Extract CSS when that option is specified// (which is the case during production build)// 当extract为true时，提取css，生成环境中，默认为trueif (options.extract) {  // 如果传入的options存在extract且为truereturn ExtractTextPlugin.extract({  // ExtractTextPlugin分离js中引入的css文件use: loaders, // 处理的loaderfallback: 'vue-style-loader' // 没有被提取分离时使用的loader
      });} else {return ['vue-style-loader'].concat(loaders);}}// https://vue-loader.vuejs.org/en/configurations/extract-css.html// 返回css类型对应的loader组成的对象 generateLoaders()来生成loaderreturn {css: generateLoaders(),postcss: generateLoaders(),less: generateLoaders('less'),sass: generateLoaders('sass', { indentedSyntax: true }),scss: generateLoaders('sass'),stylus: generateLoaders('stylus'),styl: generateLoaders('stylus')};
};

loaders = {css: generateLoaders(),postcss: generateLoaders(),less: generateLoaders('less'),sass: generateLoaders('sass', { indentedSyntax: true }),scss: generateLoaders('sass'),stylus: generateLoaders('stylus'),styl: generateLoaders('stylus')
};

return ExtractTextPlugin.extract({  // ExtractTextPlugin分离js中引入的css文件use: loaders, // 处理的loaderfallback: 'vue-style-loader' // 没有被提取分离时使用的loader
});

return ['vue-style-loader'].concat(loaders);

for (const extension in loaders) { // 循环遍历loadersconst loader = loaders[extension]; // 根据遍历获得的key(extension)来得到value(loader)
  output.push({test: new RegExp('\\.' + extension + '$'), // 处理的文件类型use: loader  // 用loader来处理，loader来自loaders[extension]
  });
}

plugins: [new webpack.DefinePlugin({ // 编译时配置的全局变量'process.env': require('../config/dev.env') // 当前环境为开发环境
  }),// 开启webpack热更新功能new webpack.HotModuleReplacementPlugin(),new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.// webpack编译过程中出错的时候跳过报错阶段，不会阻塞编译，在编译结束后报错new webpack.NoEmitOnErrorsPlugin(),// https://github.com/ampedandwired/html-webpack-plugin// 自动将依赖注入html模板，并输出最终的html文件到目标文件夹new HtmlWebpackPlugin({filename: 'index.html',  // 生成的文件名template: 'index.html',  // 模板inject: true})
]

'use strict';
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');// webpack-merge是一个可以合并数组和对象的插件
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');// html-webpack-plugin用于将webpack编译打包后的产品文件注入到html模板中
// 即自动在index.html里面加上<link>和<script>标签引用webpack打包后的文件
const HtmlWebpackPlugin = require('html-webpack-plugin');// friendly-errors-webpack-plugin用于更友好地输出webpack的警告、错误等信息
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const portfinder = require('portfinder');const HOST = process.env.HOST;
const PORT = process.env.PORT && Number(process.env.PORT);// 开发环境下的webpack配置，通过merge方法合并webpack.base.conf.js基础配置
const devWebpackConfig = merge(baseWebpackConfig, {module: {// 通过传入一些配置来获取rules配置，此处传入了sourceMap: false,表示不生成sourceMaprules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })},// cheap-module-eval-source-map is faster for development// 使用这种source-map更快
  devtool: config.dev.devtool,// these devServer options should be customized in /config/index.js
  devServer: {clientLogLevel: 'warning',historyApiFallback: true,hot: true,compress: true,host: HOST || config.dev.host,port: PORT || config.dev.port,open: config.dev.autoOpenBrowser,overlay: config.dev.errorOverlay? { warnings: false, errors: true }: false,publicPath: config.dev.assetsPublicPath,proxy: config.dev.proxyTable,quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {poll: config.dev.poll}},plugins: [new webpack.DefinePlugin({ // 编译时配置的全局变量'process.env': require('../config/dev.env') // 当前环境为开发环境
    }),// 开启webpack热更新功能new webpack.HotModuleReplacementPlugin(),new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.// webpack编译过程中出错的时候跳过报错阶段，不会阻塞编译，在编译结束后报错new webpack.NoEmitOnErrorsPlugin(),// https://github.com/ampedandwired/html-webpack-plugin// 自动将依赖注入html模板，并输出最终的html文件到目标文件夹new HtmlWebpackPlugin({filename: 'index.html',  // 生成的文件名template: 'index.html',  // 模板inject: true})]
});module.exports = new Promise((resolve, reject) => {portfinder.basePort = process.env.PORT || config.dev.port;portfinder.getPort((err, port) => {if (err) {reject(err);} else {// publish the new Port, necessary for e2e testsprocess.env.PORT = port;// add port to devServer configdevWebpackConfig.devServer.port = port;// Add FriendlyErrorsPlugindevWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ // 友好的错误提示
        compilationSuccessInfo: {messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`]
        },onErrors: config.dev.notifyOnErrors? utils.createNotifierCallback(): undefined}));resolve(devWebpackConfig);}});
});

const path = require('path');
const utils = require('./utils');
const webpack = require('webpack');
// 配置文件
const config = require('../config');
// webpack 配置合并插件
const merge = require('webpack-merge');
// webpack 基本配置
const baseWebpackConfig = require('./webpack.base.conf');const webpackConfig = merge(baseWebpackConfig, {});

module: {// styleLoaders
  rules: utils.styleLoaders({sourceMap: config.build.productionSourceMap,extract: true,usePostCSS: true})
}

output: {// 编译输出的静态资源根路径 创建dist文件夹
  path: config.build.assetsRoot,// 编译输出的文件名filename: utils.assetsPath('js/[name].[chunkhash].js'),// 没有指定输出名的文件输出的文件名 或可以理解为 非入口文件的文件名，而又需要被打包出来的文件命名配置,如按需加载的模块chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

'use strict';
// node自带的文件路径工具
const path = require('path');const utils = require('./utils');
const webpack = require('webpack');// 配置文件
const config = require('../config');// webpack 配置合并插件
const merge = require('webpack-merge');// webpack 基本配置
const baseWebpackConfig = require('./webpack.base.conf');// webpack 复制文件和文件夹的插件
// https://github.com/kevlened/copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin');// 自动生成 html 并且注入到 .html 文件中的插件
// https://github.com/ampedandwired/html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');// 提取css的插件
// https://github.com/webpack-contrib/extract-text-webpack-plugin
const ExtractTextPlugin = require('extract-text-webpack-plugin');// webpack 优化压缩和优化 css 的插件
// https://github.com/NMFR/optimize-css-assets-webpack-plugin
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');// js压缩插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');// 如果当前环境为测试环境，则使用测试环境
// 否则，使用生产环境
const env = process.env.NODE_ENV === 'testing'? require('../config/test.env'): require('../config/prod.env');const webpackConfig = merge(baseWebpackConfig, {module: {// styleLoaders
    rules: utils.styleLoaders({sourceMap: config.build.productionSourceMap,extract: true,usePostCSS: true})},// 是否开启 sourceMapdevtool: config.build.productionSourceMap ? config.build.devtool : false,output: {// 编译输出的静态资源根路径 创建dist文件夹
    path: config.build.assetsRoot,// 编译输出的文件名filename: utils.assetsPath('js/[name].[chunkhash].js'),// 没有指定输出名的文件输出的文件名 或可以理解为 非入口文件的文件名，而又需要被打包出来的文件命名配置,如按需加载的模块chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')},plugins: [// 配置全局环境为生产环境// http://vuejs.github.io/vue-loader/en/workflow/production.htmlnew webpack.DefinePlugin({'process.env': env}),// js文件压缩插件new UglifyJsPlugin({uglifyOptions: {compress: { // 压缩配置warnings: false // 不显示警告
        }},sourceMap: config.build.productionSourceMap, // 生成sourceMap文件parallel: true}),// extract css into its own file// 将js中引入的css分离的插件new ExtractTextPlugin({filename: utils.assetsPath('css/[name].[contenthash].css'), // 分离出的css文件名// set the following option to `true` if you want to extract CSS from// codesplit chunks into this main css file as well.// This will result in *all* of your app's CSS being loaded upfront.allChunks: false}),// 压缩提取出的css，并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件)// Compress extracted CSS. We are using this plugin so that possible// duplicated CSS from different components can be deduped.new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true, map: { inline: false } }: { safe: true }}),// generate dist index.html with correct asset hash for caching.// you can customize output by editing /index.html// 将 index.html 作为入口，注入 html 代码后生成 index.html文件 引入css文件和js文件// https://github.com/ampedandwired/html-webpack-pluginnew HtmlWebpackPlugin({filename: process.env.NODE_ENV === 'testing'? 'index.html': config.build.index,  // 生成的html的文件名template: 'index.html',  // 依据的模板inject: true,  // 注入的js文件将会被放在body标签中,当值为'head'时，将被放在head标签中minify: { // 压缩配置removeComments: true,  // 删除html中的注释代码collapseWhitespace: true, // 删除html中的空白符removeAttributeQuotes: true // 删除html元素中属性的引号// 更多选项 https://github.com/kangax/html-minifier#options-quick-reference
      },// necessary to consistently work with multiple chunks via CommonsChunkPlugin// 必须通过 CommonsChunkPlugin一致地处理多个 chunkschunksSortMode: 'dependency'  // 按dependency的顺序引入
    }),// keep module.id stable when vender modules does not changenew webpack.HashedModuleIdsPlugin(),// enable scope hoistingnew webpack.optimize.ModuleConcatenationPlugin(),// split vendor js into its own file// 分割公共 js 到独立的文件vendor中// https://webpack.js.org/guides/code-splitting-libraries/#commonschunkpluginnew webpack.optimize.CommonsChunkPlugin({name: 'vendor', // 文件名minChunks (module) { // 声明公共的模块来自node_modules文件夹// any required modules inside node_modules are extracted to vendor// node_modules中的任何所需模块都提取到vendorreturn (module.resource &&/\.js$/.test(module.resource) &&module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0);}}),/* 上面虽然已经分离了第三方库,每次修改编译都会改变vendor的hash值，导致浏览器缓存失效。原因是vendor包含了webpack在打包过程中会产生一些运行时代码，运行时代码中实际上保存了打包后的文件名。当修改业务代码时,业务代码的js文件的hash值必然会改变。一旦改变必然会导致vendor变化。vendor变化会导致其hash值变化。*/// 下面主要是将运行时代码提取到单独的manifest文件中，防止其影响vendor.jsnew webpack.optimize.CommonsChunkPlugin({name: 'manifest',minChunks: Infinity}),// This instance extracts shared chunks from code splitted chunks and bundles them// in a separate chunk, similar to the vendor chunk// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunknew webpack.optimize.CommonsChunkPlugin({name: 'app',async: 'vendor-async',children: true,minChunks: 3}),// 复制静态资源,将static文件内的内容复制到指定文件夹// https://github.com/kevlened/copy-webpack-pluginnew CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: config.build.assetsSubDirectory,ignore: ['.*']}])]
});// 配置文件开启了gzip压缩
if (config.build.productionGzip) {// 引入压缩文件的组件,该插件会对生成的文件进行压缩，生成一个.gz文件// https://github.com/webpack-contrib/compression-webpack-pluginconst CompressionWebpackPlugin = require('compression-webpack-plugin');// 向webpackconfig.plugins中加入下方的插件
  webpackConfig.plugins.push(new CompressionWebpackPlugin({asset: '[path].gz[query]', // 目标文件名algorithm: 'gzip', // 使用gzip压缩test: new RegExp(  // 满足正则表达式的文件会被压缩'\\.(' +config.build.productionGzipExtensions.join('|') +')$'),threshold: 10240, // 资源文件大于10240B=10kB时会被压缩minRatio: 0.8  // 最小压缩比达到0.8时才会被压缩
    }));
}
// 开启包分析的情况时， 给 webpack plugins添加 webpack-bundle-analyzer 插件
if (config.build.bundleAnalyzerReport) {const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}
module.exports = webpackConfig;