vue开发实战2.0.1——vue配置文件详解
2018-09-27 16:06
375 查看
目录
webpack.prod.conf.js(生产环境下的配置文件)
config/index.js
[code]'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') module.exports = { dev: {dev环境 // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- // Use Eslint Loader? // If true, your code will be linted during bundling and // linting errors and warnings will be shown in the console. useEslint: true, // If true, eslint errors and warnings will also be shown in the error overlay // in the browser. showEslintErrorsInOverlay: false, /** * Source Maps */ // https://webpack.js.org/configuration/devtool/#development devtool: 'cheap-module-eval-source-map', // If you have problems debugging vue-files in devtools, // set this to false - it *may* help // https://vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true, cssSourceMap: true//是否开启cssSourceMap }, build: {//production环境 // Template for index.html index: path.resolve(__dirname, '../dist/index.html'),//编译输入的index.html文件 // Paths assetsRoot: path.resolve(__dirname, '../dist'),//编译输出的静态资源路径 assetsSubDirectory: 'static',//编译输出的二级目录 assetsPublicPath: '/',//编译发布的根目录,可配置为资源服务器域名或CDN域名 /** * Source Maps */ productionSourceMap: true,//是否开启cssSourceMap // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', // 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'],//需要使用gzip压缩的文件扩展名 // 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 } }
webpack.base.conf.js(基础环境配置)
[code]'use strict' //引入依赖模块 const path = require('path')//NodeJS中的path对象,用于处理目录的对象,提高开发效率 const utils = require('./utils') const config = require('../config')//获取配置 const vueLoaderConfig = require('./vue-loader.conf') function resolve (dir) { return path.join(__dirname, '..', dir) } 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 = { context: path.resolve(__dirname, '../'), entry: {//webpack编译入口 app: './src/main.js' }, output: {//webpack输出路径和命名规则 path: config.build.assetsRoot,//webpack输出的目标文件夹路径,如:/dist filename: '[name].js',//webpack输出bubundle文件命名格式,[name]基于文件的md5生成的hash名称,以防止缓存 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath//webpack编译输出的发布路径(判断正式环境或开发环境等) }, resolve: { extensions: ['.js', '.vue', '.json'],//自动解析确定的拓展名,使导入模块时不带拓展名,如:require('module'),不需要module.js alias: {//import或require的别名,可以直接使用别名来代表设定的路径以及其他 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }, module: {//加载器 rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/,//vue文件后缀 loader: 'vue-loader',//使用vue-loader处理 options: vueLoaderConfig//条件 }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { 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]') } } ] }, 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 client dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' } }
webpack.prod.conf.js(生产环境下的配置文件)
[code]'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')//一个用于生成HTML文件并自动注入依赖文件(link/script)的webpack插件 const ExtractTextPlugin = require('extract-text-webpack-plugin') const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') : require('../config/prod.env') /*合并基础的webpack配置*/ const webpackConfig = merge(baseWebpackConfig, { module: {//配置样式文件的处理规则,使用styleLoaders rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true, usePostCSS: true }) }, devtool: config.build.productionSourceMap ? config.build.devtool : false,//开启souce-map output: { 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.html//位于开发环境下 new webpack.DefinePlugin({ 'process.env': env }), new UglifyJsPlugin({//压缩代码 uglifyOptions: { compress: { warnings: false } }, sourceMap: config.build.productionSourceMap, parallel: true }), // extract css into its own file new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css'), // Setting the following option to `false` will not extract CSS from codesplit chunks. // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 allChunks: true, }),//抽离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 // see https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index,//生成html文件的名字,要与修改后的publicPath相结合,否则开启服务器后页面空白 template: 'index.html',//源文件,路径相对于本文件所在的位置 inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }), // keep module.id stable when vendor modules does not change new webpack.HashedModuleIdsPlugin(), // enable scope hoisting new webpack.optimize.ModuleConcatenationPlugin(), // split vendor js into its own file /*如果文件是多入口的文件,可能存在重复代码,把公共代码提取出来,又不会重复下载公共代码(多个页面会共享此文件的缓存)*/ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor',//公共代码的chunk唯一的标识 minChunks (module) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated /*为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID*/ new 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-chunk new webpack.optimize.CommonsChunkPlugin({ name: 'app', async: 'vendor-async', children: true, minChunks: 3 }), // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] } ]) ] }) /*gzip模式下需要引入compression插件进行压缩*/ if (config.build.productionGzip) { 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, minRatio: 0.8 }) ) } if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) } module.exports = webpackConfig
webpack.dev.conf.js(开发环境配置)
[code]'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path = require('path') const baseWebpackConfig = require('./webpack.base.conf') const CopyWebpackPlugin = require('copy-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') 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.dev.conf.js和webpack.base.conf.js的配置进行合并,这样重复的配置代码就不用写两次了*/ const devWebpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) }, // cheap-module-eval-source-map is faster for development devtool: config.dev.devtool, // these devServer options should be customized in /config/index.js devServer: { clientLogLevel: 'warning', historyApiFallback: { rewrites: [ { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, ], }, hot: true, contentBase: false, // since we use CopyWebpackPlugin. 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') }), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.dev.assetsSubDirectory, ignore: ['.*'] } ]) ] }) 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 tests process.env.PORT = port // add port to devServer config devWebpackConfig.devServer.port = port // Add FriendlyErrorsPlugin devWebpackConfig.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) } }) })
build/build.js
[code]'use strict' require('./check-versions')()//检查Node和npm版本 process.env.NODE_ENV = 'production'//在使用webpack和vue-cli构建的项目中,vue会根据process.env.NODE_ENV决定是否启用生产环境模式,默认为开发模式 const ora = require('ora')//一个loading插件 const rm = require('rimraf') const path = require('path') const chalk = require('chalk') const webpack = require('webpack')//加载webpack const config = require('../config')//加载config.js const webpackConfig = require('./webpack.prod.conf')//加载webpack.prod.conf const spinner = ora('building for production...')//使用ora打印building for production... spinner.start()//开始loading动画 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { if (err) throw err /*开始webpack的编译*/ webpack(webpackConfig, (err, stats) => {//编译成功的毁掉函数 spinner.stop() if (err) throw err process.stdout.write(stats.toString({ colors: true, modules: false, children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 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' )) }) })
阅读更多
相关文章推荐
- Nginx实战基础篇二 Nginx主配置文件参数详解
- iOS 开发 APP应用发布流程详解之证书/配置文件--2016最新版
- sudo配置文件/etc/sudoers详解及实战用法
- Android 开发中的 Manifest.xml 配置文件详解
- Log4j 2.0在开发中的高级使用详解—配置简单的文件输出(四)
- j2ee项目开发web.xml文件加载及配置详解
- SpringBoot开发详解(三)--SpringBoot配置文件YML注意事项
- Python廖雪峰实战web开发(Day6-编写配置文件)
- vue 配置文件详解
- vue-cli脚手架config目录下index.js配置文件详解
- Android开发配置文件AndroidManifest.xml详解 (1)
- MAC电脑配置node.js环境利用vue.js开发前端webapp详解
- jeesite快速开发平台(三)----项目文件结构与配置文件详解
- Log4j 2.0在开发中的高级使用详解—读取配置文件
- Spring 3.X 基于Tomcat的Web应用开发配置文件详解
- Mybatis实战(二)配置文件详解
- GRUB2配置文件"grub.cfg"详解(GRUB2实战手册)
- GRUB2配置文件"grub.cfg"详解(GRUB2实战手册)