vue-cli-webpack模板配置全解析-2

vue-cli webpack 模板配置解析 - 2 重要配置文件解析

重要模块版本

• vue-cli : 2.9.1
• vue : 2.4.2
• vue-router : 2.7.0
• webpack : 3.6.0
• 其他依赖都由 vue-cli 生成

重要配置文件解析

1. /build/dev-server.js

执行 npm run dev 或者 npm start 后运行的脚本

主要功能

1. 检查 node、npm 版本，警告提示
2. 启动 webpack 服务
3. 配置挂载开发、热重载中间件
4. 挂载代理中间件
5. 开启 express 服务器，打开浏览器

代码详解

    'use strict'    // 检查 node vue 版本    require('./check-versions')()    // 引入默认配置    const config = require('../config')    // 设置默认环境    if (!process.env.NODE_ENV) {        process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)    }    /*       opn 插件可以强制打开浏览器跳转到指定页面       介绍：https://github.com/sindresorhus/opn    */    const opn = require('opn')    const path = require('path')    const express = require('express')    const webpack = require('webpack')    /*       http-proxy-middleware 是一个 node 代理中间件，可以将http请求代理到其他服务器       详情文档：https://github.com/chimurai/http-proxy-middleware    */    const proxyMiddleware = require('http-proxy-middleware')    // 使用 dev 开发环境的配置    const webpackConfig = require('./webpack.dev.conf')    // 指定运行端口    const port = process.env.PORT || config.dev.port    // 自动打开浏览器，默认 false    const autoOpenBrowser = !!config.dev.autoOpenBrowser    // 设置代理配置，格式参考 http-proxy-middleware 的文档    const proxyTable = config.dev.proxyTable    // 使用 express 开启服务    const app = express()    /*       webpack 函数传入一个配置对象 就会执行相应的编译       可以传入第二个参数（回调函数）可以在这里处理错误信息    */    const compiler = webpack(webpackConfig)    /*       webpack-dev-middleware       用来在内存中生成打包好的文件，而不用写到磁盘上，它提供从 webpack 到服务器的文件传输，用来配合进行热重载       第一个参数：webpack 实例       第二个参数：配置 只有 publicPath 必填，       其他参考文档 https://www.npmjs.com/package/webpack-dev-middleware    */    const devMiddleware = require('webpack-dev-middleware')(compiler, {        /*          在这里（'/config/index.js' dev.assetsPublicPath）设置 publicPath          与 webpack-dev-server 异同，可以在这里查看 https://doc.webpack-china.org/configuration/dev-server/       */        publicPath: webpackConfig.output.publicPath,        quiet: true    })    /*       webpack-hot-middleware       用来接受 webpack 传递来的更新，并将其反应到浏览器客户端，需要与 webpack-dev-middleware 一起使用       使用文档：https://www.npmjs.com/package/webpack-hot-middleware    */    const hotMiddleware = require('webpack-hot-middleware')(compiler, {        log: false,        heartbeat: 2000    })    /*       当 html-webpack-plugin 模板更新的时候强制刷新页面       目前有BUG 所以禁用 BUG原因 https://github.com/jantimon/html-webpack-plugin/issues/680    */    // compiler.plugin('compilation', function (compilation) {    //   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {    //     hotMiddleware.publish({ action: 'reload' })    //     cb()    //   })    // })    // enable hot-reload and state-preserving    // compilation error display    app.use(hotMiddleware)    /*       将代理的请求配置挂载到掐动的 express 服务上       对应 webpack-dev-server 的 'proxy' 配置    */    Object.keys(proxyTable).forEach(function(context) {        const options = proxyTable[context]        if (typeof options === 'string') {            options = {                target: options            }        }        app.use(proxyMiddleware(options.filter || context, options))    })    /*       使用 connect-history-api-fallback 匹配资源，如果不匹配就可以重定向到指定地址       对应 webpack-dev-server 'historyApiFallback: true' 配置    */    app.use(require('connect-history-api-fallback')())    // serve webpack bundle output    app.use(devMiddleware)    // 拼接 static 文件夹的静态资源路径    const staticPath = path        .posix        .join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)    // 为静态资源提供响应服务    app.use(staticPath, express.static('./static'))    // 应用的地址信息    const uri = 'http://localhost:' + port    var _resolve    var _reject    var readyPromise = new Promise((resolve, reject) => {        _resolve = resolve        _reject = reject    })    var server    var portfinder = require('portfinder')    portfinder.basePort = port    console.log('> Starting dev server...')    // 直道打好的包有效后执行回调    devMiddleware.waitUntilValid(() => {        /*          portfinder 用于获取 port       */        portfinder.getPort((err, port) => {            if (err) {                _reject(err)            }            process.env.PORT = port            var uri = 'http://localhost:' + port            console.log('> Listening at ' + uri + '\n')            // 如果不是测试环境，自动打开浏览器并跳到我们的开发地址            if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {                opn(uri)            }            server = app.listen(port)            //  server = app.listen(port, hostName) 可以在此加入主机名            _resolve()        })    })    module.exports = {        ready: readyPromise,        close: () => {            server.close()        }    }

2. /build/build.js

执行 npm run build 后运行的脚本

主要功能

1. 创建目标文件夹
2. 目标文件夹如果存在，则清除后重新创建
3. 使用 webpack 编译输出

代码详解

    'use strict'    // 检查 node npm 版本    require('./check-versions')()    process.env.NODE_ENV = 'production'    const ora = require('ora') // node 终端的 loading 图    const rm = require('rimraf') // 用于深度删除模块    const path = require('path')    const chalk = require('chalk') // 命令行彩色输出    const webpack = require('webpack')    const config = require('../config')    const webpackConfig = require('./webpack.prod.conf')    // loading    const spinner = ora('building for production...')    spinner.start()    /*       使用 rimraf 将旧的编译输出的文件夹删除，然后重新编译生成       rimraf(f: 路径, [opts], callback: 回调)    */    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')            if (stats.hasErrors()) {                console.log(chalk.red('  Build failed with errors.\n'))                process.exit(1)            }            console.log(chalk.cyan('  Build complete.\n'))            console.log(chalk.yellow('  Tip: built files are meant to be served over an HTTP server.\n' +                '  Opening index.html over file:// won\'t work.\n'))        })    })

3. /build/check-version.js

/build/build.js 和 /build/dev-server.js 都有引用

主要功能

1. 检测 node、npm 版本，警告提示

代码详解

    'use strict'    /*       检查 node vue 版本    */    const chalk = require('chalk') // 命令行字体颜色美化    const semver = require('semver') // 版本解析插件    const packageConfig = require('../package.json')    const shell = require('shelljs') // node 中使用 shell 命令    function exec(cmd) {        // child_process 开启子进程，并执行 cmd 命令 然后返回结果        return require('child_process')            .execSync(cmd)            .toString()            .trim()    }    const versionRequirements = [        {            name: 'node',            /*             semver.clean(version) 能格式化版本号             例如：'  =v1.2.3   ' -> '1.2.3'          */            currentVersion: semver.clean(process.version),            versionRequirement: packageConfig.engines.node        }    ]    // shell.which('命令')在系统的路径搜索命令, 如果用的是 npm 就检查 npm 版本    if (shell.which('npm')) {        versionRequirements.push({          name: 'npm',          currentVersion: exec('npm --version'),          versionRequirement: packageConfig.engines.npm       })    }    module.exports = function() {        const warnings = []        for (let i = 0; i < versionRequirements.length; i++) {            const mod = versionRequirements[i]            /*          semver.satisfies('当前版本'，'版本范围')          用于判断版本是否符合需求，不符合要求则加入警告       */            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 (let i = 0; i < warnings.length; i++) {                const warning = warnings[i]                console.log('  ' + warning)            }            console.log()            process.exit(1)        }    }

4. /build/utils.js

多处引用

主要功能

1. 配置静态资源路径
2. 样式文件的 loaders 配置

代码详解

    'use strict'    const path = require('path')    const config = require('../config')    const ExtractTextPlugin = require('extract-text-webpack-plugin')    // 图片、音频、视频、字体等资源的路径配置    exports.assetsPath = function(_path) {        const assetsSubDirectory = process.env.NODE_ENV === 'production'            ? config.build.assetsSubDirectory            : config.dev.assetsSubDirectory        return path.posix.join(assetsSubDirectory, _path)    }    exports.cssLoaders = function(options) {        options = options || {}        // 一个基础的 cssLoader        const cssLoader = {            loader: 'css-loader',            options: {                minimize: process.env.NODE_ENV === 'production',                sourceMap: options.sourceMap            }        }        // 一个生成 loaders 的函数，只需传入 loader：类型，loaderOptions：loader 参数        function generateLoaders(loader, loaderOptions) {            /*             loader：要加载的loader名             loaderOptions：配置          */            const loaders = [cssLoader]            if (loader) {                loaders.push({                    loader: loader + '-loader',                    options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})                })            }            // 生产环境是，会指定提取 样式为单独文件            if (options.extract) {                return ExtractTextPlugin.extract({                use: loaders,                fallback: 'vue-style-loader'             })            } else {                return ['vue-style-loader'].concat(loaders)            }        }        // https://vue-loader.vuejs.org/en/configurations/extract-css.html        return {            css: generateLoaders(),            postcss: generateLoaders(),            less: generateLoaders('less'),            sass: generateLoaders('sass', {indentedSyntax: true}),            scss: generateLoaders('sass'),            stylus: generateLoaders('stylus'),            styl: generateLoaders('stylus')        }    }    // Generate loaders for standalone style files (outside of .vue)    exports.styleLoaders = function(options) {        const output = []        // 引用上边的 cssLoaders，得到一个样式处理方案的对象，全部执行添加 loader        const loaders = exports.cssLoaders(options)        for (const extension in loaders) {            const loader = loaders[extension]            output.push({                test: new RegExp('\\.' + extension + '$'),                use: loader            })        }        return output    }

5. /build/vue-loader.conf.js

webpack.basic-conf.js引用

主要功能

1. 配置 css 加载
2. 配置 将 src 等引用的资源转成模块

代码详解

    'use strict'    const utils = require('./utils')    const config = require('../config')    const isProduction = process.env.NODE_ENV === 'production'    module.exports = {        loaders: utils.cssLoaders({            sourceMap: isProduction                ? config.build.productionSourceMap                : config.dev.cssSourceMap,            extract: isProduction // 表示是否提取样式为单独文件        }),        /*          vue 中引入图片等媒体资源时，需要先 require('./images/xxx.png')          这个配置可以将 对应的属性中的内容，装换为模块，这样就可以向正常的HTML 一样使用了        */        transformToRequire: {            video: 'src',            source: 'src',            img: 'src',            image: 'xlink:href'        }    }

6. /build/webpack.base.conf.js

webpack.dev.conf.js 、webpack.prod.conf.js引用

主要功能

1. webpack 基础配置

代码详解

    'use strict'    /*       webpack 基础配置文件    */    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)    }    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'            ],            // 模块别名，简化模块引入            alias: {                'vue$': 'vue/dist/vue.esm.js',                '@': resolve('src')            }        },        // 模块处理规则配置        module: {            rules: [                {                    test: /\.(js|vue)$/,                    loader: 'eslint-loader',                    enforce: 'pre', // 先执行                    include: [                        resolve('src'), resolve('test')                    ],                    options: {                        formatter: require('eslint-friendly-formatter')                    }                }, {                    test: /\.vue$/,                    loader: 'vue-loader',                    options: vueLoaderConfig // 规则在 vue-loader.conf.js 中                }, {                    test: /\.js$/,                    loader: 'babel-loader',                    include: [resolve('src'), resolve('test')]                }, {                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,                    loader: 'url-loader',                    options: {                        limit: 10000,                           name: utils.assetsPath('img/[name].[hash:7].[ext]')                    }                }, {                    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,                    loader: 'url-loader',                    options: {                        limit: 10000,                        name: utils.assetsPath('media/[name].[hash:7].[ext]')                    }                }, {                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,                    loader: 'url-loader',                    options: {                        limit: 10000,                        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')                    }                }            ]        }    }

7. /build/webpack.dev.conf.js

/build/dev-server.js 引用

主要功能

1. 开发环境热更新配置添加
2. 在基础配置之上增加 样式的 loaders
3. 增加开发环境的 插件配置

代码详解

    'use strict'    /*       开发环境配置文件    */    const utils = require('./utils') // 工具文件    const webpack = require('webpack')    const config = require('../config') // 引入配置    const merge = require('webpack-merge') // webpack 配置合并    const baseWebpackConfig = require('./webpack.base.conf') // 引入基础配置    const HtmlWebpackPlugin = require('html-webpack-plugin') // 根据模板生成 HTML    const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')    /*       开发环境中，为了配合使用 热重载，需要在 入口前加入 './build/dev-client'（Hot-reload 的相对路径）    */    Object.keys(baseWebpackConfig.entry).forEach(function(name) {        baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])    })    // 合并开发环境配置到 基础配置上    module.exports = merge(baseWebpackConfig, {        module: {            /*             这部分就是定义 style 样式需要用什么 loader 解析          */            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(),            /*             根据模板生成 HTML 的插件             配置看这里：https://github.com/ampedandwired/html-webpack-plugin          */            new HtmlWebpackPlugin({filename: 'index.html', template: 'index.html', inject: true}),            new FriendlyErrorsPlugin()        ]    })

8. /build/webpack.prod.conf.js

/build/build.js 引用

主要功能

1. 开发环境热更新配置添加
2. 在基础配置之上增加 样式的 loaders
3. 增加开发环境的 插件配置

代码详解

    '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')    // copy-webpack-plugin 用于文件或者目录复制    const CopyWebpackPlugin = require('copy-webpack-plugin')    const HtmlWebpackPlugin = require('html-webpack-plugin')    const ExtractTextPlugin = require('extract-text-webpack-plugin')    // optimize-css-assets-webpack-plugin 一个 css 优化插件    const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')    const env = config.build.env    const webpackConfig = merge(baseWebpackConfig, {        module: {            // 配置样式使用的 loader            rules: utils.styleLoaders({             sourceMap: config.build.productionSourceMap,             extract: true          })        },        devtool: config.build.productionSourceMap            ? '#source-map'            : 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}),            /*             js 压缩             UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify          */            new webpack.optimize.UglifyJsPlugin({                compress: {                    warnings: false                },                sourceMap: true // 是否生成 sourceMap            }),            // css 文件分离            new ExtractTextPlugin({                filename: utils.assetsPath('css/[name].[contenthash].css')            }),            /*             css 优化，css 复用          */            new OptimizeCSSPlugin({                cssProcessorOptions: {                    safe: true                }            }),            /*             根据模板生成 HTML             更多配置：https://www.npmjs.com/package/html-webpack-plugin          */            new HtmlWebpackPlugin({                filename: config.build.index,                template: 'index.html',                inject: true,                minify: {                    removeComments: true,                    collapseWhitespace: true,                    removeAttributeQuotes: true                    // more options:                    // https://github.com/kangax/html-minifier#options-quick-reference                },                chunksSortMode: 'dependency'            }),            /*             HashedModuleIdsPlugin插件，             它根据模块的相对路径生成一个长度只有四位的字符串作为模块的 id，             所以只要我们不重命名一个模块文件，那么它的id就不会变，             这样解决了某一个文件修改，其他文件的 hash随之改变的问题          */            new webpack.HashedModuleIdsPlugin(),            // 抽离第三方代码            new webpack.optimize.CommonsChunkPlugin({                name: 'vendor',                minChunks: function(module) {                    // 依赖的 node_modules 文件会被提取                    return (                   module.resource &&                   /\.js$/.test(module.resource) &&                   module.resource.indexOf(                      path.join(__dirname, '../node_modules')                   ) === 0                )                }            }),            // 提取运行时代码，避免每次打包后文件更改            new webpack.optimize.CommonsChunkPlugin({             name: 'manifest',             chunks: ['vendor']          }),            // 复制静态资源            new CopyWebpackPlugin([                {                    from: path.resolve(__dirname, '../static'),                    to: config.build.assetsSubDirectory,                    ignore: ['.*'] // 忽略文件                }            ])        ]    })    // 开启 gzip 的配置    if (config.build.productionGzip) {        const CompressionWebpackPlugin = require('compression-webpack-plugin')        webpackConfig.plugins.push(            /*             压缩             更多配置：https://github.com/webpack-contrib/compression-webpack-plugin          */            new CompressionWebpackPlugin({                asset: '[path].gz[query]',                algorithm: 'gzip',                test: new RegExp(                '\\.(' +                config.build.productionGzipExtensions.join('|') +                ')$'             ),                threshold: 10240,                minRatio: 0.8            }))    }    if (config.build.bundleAnalyzerReport) {        /*          webpack-bundle-analyzer 插件          解析出模块构成、以及各自的大小体积，最后显示为一个页面          地址： https://www.npmjs.com/package/webpack-bundle-analyzer       */        const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin        webpackConfig.plugins.push(new BundleAnalyzerPlugin())    }    module.exports = webpackConfig

9. /config/index.js

多处引用

主要功能

1. 提供开发、生产环境的用户配置

代码详解

    'use strict'    // Template version: 1.1.1    // see http://vuejs-templates.github.io/webpack for documentation.    const 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: '/', // 编译发布的根目录，最后会被写到 HTML 中，可以是服务器域名            productionSourceMap: true, // 是否开启 SourceMap (css)            // 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, // gzip 配置            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 //是否显示 report        },        // 开发环境        dev: {            env: require('./dev.env'),            port: process.env.PORT || 8080, // 设置端口号            autoOpenBrowser: true, // 是否默认打开浏览器            assetsSubDirectory: 'static', // 二级路径、图片、音视频等媒体资源路径            assetsPublicPath: '/', // 编译发布的根目录            proxyTable: { // 代理的配置                // 更多配置 https://github.com/chimurai/http-proxy-middleware                '/text/*': {                    target: 'http://debug.xxx.com', // 要代理到的地址                    secure: false, // 是否验证 ssL 证书                    changeOrigin: true // 更改host header的origin到目标URL                },                '/uaa/*': {                    target: 'http://debug.xxx.com',                    secure: false,                    changeOrigin: true                }            },            // 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        }    }

其他

1. .babelrc 的配置，如下参考

• 你真的会用 Babel 吗?
• 再见，babel-preset-2015

2. .eslintrc.js

• ESLint中文指南

参考

vue-cli的webpack模板项目配置文件说明
vue-cli#2.0 webpack 配置分析