vue-webpack-boilerplate分析

# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖，走你$ cd my-project$ npm install$ npm run dev

 ?"scripts": { ???"dev": "node build/dev-server.js", ???"start": "node build/dev-server.js", ???"build": "node build/build.js", ???"lint": "eslint --ext .js,.vue src" ?},

// 不错的node模块，使输出内容带前景色和背景色var chalk = require(‘chalk‘)// 语义化版本，详见http://semver.org/lang/zh-CN/// https://www.npmjs.com/package/semvervar semver = require(‘semver‘)var packageConfig = require(‘../package.json‘)// 顾名思义，提供了一些和shell命令名字功能都一样的方法var shell = require(‘shelljs‘)function exec (cmd) { ?return require(‘child_process‘).execSync(cmd).toString().trim()}var versionRequirements = [ ?{ ???name: ‘node‘, ???// semver.clean(‘ ?=v1.2.3 ??‘) => ‘1.2.3‘ ???currentVersion: semver.clean(process.version), ???versionRequirement: packageConfig.engines.node ?},]if (shell.which(‘npm‘)) { ?versionRequirements.push({ ???name: ‘npm‘, ???currentVersion: exec(‘npm --version‘), ???versionRequirement: packageConfig.engines.npm ?})}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) ?}}

"engines": { ?"node": ">= 4.0.0", ?"npm": ">= 3.0.0"},

"engines": { ?"node": ">= 4.0.0", ?"npm": ">= 6.0.0"},

// see http://vuejs-templates.github.io/webpack for documentation.var path = require(‘path‘)module.exports = { ?build: { ???env: require(‘./prod.env‘), ???index: path.resolve(__dirname, ‘../dist/index.html‘), ???assetsRoot: path.resolve(__dirname, ‘../dist‘), ???assetsSubDirectory: ‘static‘, ???assetsPublicPath: ‘/‘, ???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 ???productionGzip: false, ???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: { ???env: require(‘./dev.env‘), ???port: 8080, ???autoOpenBrowser: true, ???assetsSubDirectory: ‘static‘, ???assetsPublicPath: ‘/‘, ???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: false ?}}

var merge = require(‘webpack-merge‘)var prodEnv = require(‘./prod.env‘)module.exports = merge(prodEnv, { ?NODE_ENV: ‘"development"‘, ?KEY_ID: ‘123456‘})

 ?plugins: [ ???new webpack.DefinePlugin({ ?????‘process.env‘: config.dev.env ???}),

// 工具方法var utils = require(‘./utils‘)var webpack = require(‘webpack‘)var config = require(‘../config‘)// webpack官方提供的一个webpack配置文件合并工具var merge = require(‘webpack-merge‘)// 开发时和发布时公用的配置文件信息var baseWebpackConfig = require(‘./webpack.base.conf‘)// 一个webpack插件，生成入口html文件，最强大的功能是动态自动插入webpack生成的css和js资源文件// 一般的单页面应用只有一个主html文件比如index.html，webpack打包生成js和css文件后，// 我们当然可以在手动写标签引入这些资源文件，但有时候生成后的文件带有hash。如app-3d31retr.js。这时需要自动引入，并替换html。var HtmlWebpackPlugin = require(‘html-webpack-plugin‘)// 不解释，自行去github查文档var FriendlyErrorsPlugin = require(‘friendly-errors-webpack-plugin‘)// add hot-reload related code to entry chunksObject.keys(baseWebpackConfig.entry).forEach(function (name) { ?baseWebpackConfig.entry[name] = [‘./build/dev-client‘].concat(baseWebpackConfig.entry[name])})module.exports = merge(baseWebpackConfig, { ?module: { ???rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) ?}, ?// cheap-module-eval-source-map is faster for development ?devtool: ‘#cheap-module-eval-source-map‘, ?plugins: [ ???new webpack.DefinePlugin({ ?????‘process.env‘: config.dev.env ???}), ???// https://github.com/glenjamin/webpack-hot-middleware#installation--usage ???new webpack.HotModuleReplacementPlugin(), ???new webpack.NoEmitOnErrorsPlugin(), ???// https://github.com/ampedandwired/html-webpack-plugin ???new HtmlWebpackPlugin({ ?????filename: ‘index.html‘, ?????template: ‘index.html‘, ?????inject: true ???}), ???new FriendlyErrorsPlugin() ?]})

 ?resolve: { ???// 导入文件自动补全文件后缀 ???// 比如 src/index.js 中的 import App from ‘./App‘ ???// 完整的是import App from ‘./App.vue‘ ???extensions: [‘.js‘, ‘.vue‘, ‘.json‘], ???// 别名映射，引入模块中可缩短字符串长度 ???// 如 import {playMode} from ‘common/js/config‘ 可能实际是 ???// import {playMode} from ‘../../common/js/config‘ ???alias: { ?????‘vue$‘: ‘vue/dist/vue.esm.js‘, ?????‘@‘: resolve(‘src‘), ?????‘common‘: resolve(‘src/common‘), ?????‘components‘: resolve(‘src/components‘), ?????‘base‘: resolve(‘src/base‘), ?????‘api‘: resolve(‘src/api‘) ???} ?}, ?module: { ???rules: [ ?????// { ?????// ??test: /\.(js|vue)$/, ?????// ??loader: ‘eslint-loader‘, ?????// ??enforce: ‘pre‘, ?????// ??include: [resolve(‘src‘), resolve(‘test‘)], ?????// ??options: { ?????// ????// 友好提供eslint未通过原因及链接 ?????// ????formatter: require(‘eslint-friendly-formatter‘) ?????// ??} ?????// }, ?????{ ???????test: /\.vue$/, ???????// https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html ???????loader: ‘vue-loader‘, ???????// 最终结果类似， ???????/* ???????options: { ?????????loaders: { ???????????css: [‘vue-style-loader‘, { ?????????????loader: ‘css-loader‘, ?????????????options: { ???????????????minimize: false, ???????????????sourceMap: false ?????????????} ???????????}], ???????????postcss: [‘vue-style-loader‘, { ?????????????loader: ‘css-loader‘, ?????????????options: { ???????????????minimize: false, ???????????????sourceMap: false ?????????????} ???????????}], ???????????less: [‘vue-style-loader‘, { ?????????????loader: ‘css-loader‘, ?????????????options: { ???????????????minimize: false, ???????????????sourceMap: false ?????????????} ???????????}, ???????????{ ?????????????loader: ‘less-loader‘, ?????????????options: { ???????????????sourceMap: false ?????????????} ???????????}], ???????????sass: [‘vue-style-loader‘, { ?????????????loader: ‘css-loader‘, ?????????????options: { ???????????????minimize: false, ???????????????sourceMap: false ?????????????} ???????????}, ???????????{ ?????????????loader: ‘sass-loader‘, ?????????????options: { ???????????????indentedSyntax: true, ???????????????sourceMap: false ?????????????} ???????????}], ???????????scss: [‘vue-style-loader‘, { ?????????????loader: ‘css-loader‘, ?????????????options: { ???????????????minimize: false, ???????????????sourceMap: false ?????????????} ???????????}, ???????????{ ?????????????loader: ‘sass-loader‘, ?????????????options: { ???????????????sourceMap: false ?????????????} ???????????}], ???????????stylus: [‘vue-style-loader‘, { ?????????????loader: ‘css-loader‘, ?????????????options: { ???????????????minimize: false, ???????????????sourceMap: false ?????????????} ???????????}, ???????????{ ?????????????loader: ‘stylus-loader‘, ?????????????options: { ???????????????sourceMap: false ?????????????} ???????????}], ???????????styl: [‘vue-style-loader‘, { ?????????????loader: ‘css-loader‘, ?????????????options: { ???????????????minimize: false, ???????????????sourceMap: false ?????????????} ???????????}, ???????????{ ?????????????loader: ‘stylus-loader‘, ?????????????options: { ???????????????sourceMap: false ?????????????} ???????????}] ?????????} ???????} ????????*/ ???????options: vueLoaderConfig ?????},

// 检测是否满足版本需要require(‘./check-versions‘)()// 引入外层config中的index.js，分为运行时和开发时的变量信息// 我们可以自己添加一些变量var config = require(‘../config‘)if (!process.env.NODE_ENV) { ?// 最终变成 process.env.NODE_ENV = JSON.parse(‘"development"‘) ?process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)}// 第三方模块。可调用系统默认的程序打开图片，地址等，如opn(‘http://localhost:8080‘); open(‘./demo.jpg‘)var opn = require(‘opn‘)// node内置的核心模块var path = require(‘path‘)// node框架，在这里用来启动webservervar express = require(‘express‘)// 不解释，核心编译工具// 官方文档中不推荐全局安装webpack，然后执行全局变量的方式// 这里在nodejs里引入webpack，用提供的api来配置并启动var webpack = require(‘webpack‘)// http代理中间件，可转发api等var proxyMiddleware = require(‘http-proxy-middleware‘)var webpackConfig = require(‘./webpack.dev.conf‘)