1、config/index.js

  1. var path = require('path')
  2.  
  3. module.exports = {
  4. build: { // production 环境
  5. env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境
  6. index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件
  7. assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径
  8. assetsSubDirectory: 'static', // 编译输出的二级目录
  9. assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
  10. productionSourceMap: false, // 是否开启 cssSourceMap
  11. // Gzip off by default as many popular static hosts such as
  12. // Surge or Netlify already gzip all static assets for you.
  13. // Before setting to `true`, make sure to:
  14. // npm install --save-dev compression-webpack-plugin
  15. productionGzip: false, // 是否开启 gzip
  16. productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名
  17. },
  18. dev: { // dev 环境
  19. env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境
  20. port: 8080, // 运行测试页面的端口
  21. assetsSubDirectory: 'static', // 编译输出的二级目录
  22. assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
  23. proxyTable: {}, // 需要 proxyTable 代理的接口(可跨域)
  24. // CSS Sourcemaps off by default because relative paths are "buggy"
  25. // with this option, according to the CSS-Loader README
  26. // (https://github.com/webpack/css-loader#sourcemaps)
  27. // In our experience, they generally work as expected,
  28. // just be aware of this issue when enabling this option.
  29. cssSourceMap: false // 是否开启 cssSourceMap
  30. }
  31. }

2、build/build.js页面

  1. require('./check-versions')()// 检查 Node 和 npm 版本
  2.  
  3. process.env.NODE_ENV = 'production'
  4.  
  5. const ora = require('ora') // 一个很好看的 loading 插件
  6. const path = require('path')
  7. const config = require('../config')//加载config.js
  8. const webpack = require('webpack')//加载webpack
  9. const webpackConfig = require('./webpack.prod.conf')// 加载 webpack.prod.conf
  10.  
  11. console.log( // 输出提示信息 ~ 提示用户请在 http 服务下查看本页面,否则为空白页
  12. ' Tip:\n' +
  13. ' Built files are meant to be served over an HTTP server.\n' +
  14. ' Opening index.html over file:// won\'t work.\n'
  15. )
  16.  
  17. var spinner = ora('building for production...') // 使用 ora 打印出 loading + log
  18. spinner.start() // 开始 loading 动画
  19.  
  20. /* 拼接编译输出文件路径 */
  21. var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
  22. rm('-rf', assetsPath) /* 删除这个文件夹 (递归删除) */
  23. mkdir('-p', assetsPath) /* 创建此文件夹 */
  24. cp('-R', 'static/*', assetsPath) /* 复制 static 文件夹到我们的编译输出目录 */
  25.  
  26. webpack(webpackConfig, function (err, stats) { // 开始 webpack 的编译
  27. // 编译成功的回调函数
  28. spinner.stop()
  29. if (err) throw err
  30. process.stdout.write(stats.toString({
  31. colors: true,
  32. modules: false,
  33. children: false,
  34. chunks: false,
  35. chunkModules: false
  36. }) + '\n')
  37. })

3、build/webpack.base.conf.js

  1. var path = require('path')
  2. var config = require('../config')
  3. var utils = require('./utils')
  4. var projectRoot = path.resolve(__dirname, '../')
  5.  
  6. var env = process.env.NODE_ENV
  7. // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
  8. // various preprocessor loaders added to vue-loader at the end of this file
  9. var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)/* 是否在 dev 环境下开启 cssSourceMap ,在 config/index.js 中可配置 */
  10. var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)/* 是否在 production 环境下开启 cssSourceMap ,在 config/index.js 中可配置 */
  11. var useCssSourceMap = cssSourceMapDev || cssSourceMapProd /* 最终是否使用 cssSourceMap */
  12.  
  13. module.exports = {
  14. entry: utils.getEntries('./src/module/**/*.js'),// 配置webpack编译入口
  15. output: {// 配置webpack输出路径和命名规则
  16. path: config.build.assetsRoot,// webpack输出的目标文件夹路径(例如:/dist)
  17. publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
  18. filename: '[name].js'// webpack输出bundle文件命名格式,基于文件的md5生成Hash名称的script来防止缓存
  19. },
  20. resolve: {
  21. extensions: ['', '.js', '.vue'],//自动解析确定的拓展名,使导入模块时不带拓展名
  22. fallback: [path.join(__dirname, '../node_modules')],
  23. alias: {// 创建import或require的别名,一些常用的,路径长的都可以用别名
  24. 'vue$': 'vue/dist/vue.common.js',
  25. 'src': path.resolve(__dirname, '../src'),
  26. 'assets': path.resolve(__dirname, '../src/assets'),
  27. 'components': path.resolve(__dirname, '../src/components')
  28. }
  29. },
  30. resolveLoader: {
  31. fallback: [path.join(__dirname, '../node_modules')]
  32. },
  33. module: {
  34. loaders: [
  35. {
  36. test: /\.vue$/, // vue文件后缀
  37. loader: 'vue' //使用vue-loader处理
  38. },
  39. {
  40. test: /\.js$/,
  41. loader: 'babel',
  42. include: projectRoot,
  43. exclude: /node_modules/
  44. },
  45. {
  46. test: /\.json$/,
  47. loader: 'json'
  48. },
  49. {
  50. test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  51. loader: 'url',
  52. query: {
  53. limit: 500000,
  54. name: utils.assetsPath('img/[name].[hash:7].[ext]')
  55. }
  56. },
  57. {
  58. test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  59. loader: 'url',
  60. query: {
  61. limit: 10000,
  62. name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  63. }
  64. }
  65. ]
  66. },
  67. vue: {// .vue 文件配置 loader 及工具 (autoprefixer)
  68. loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),// 调用cssLoaders方法返回各类型的样式对象(css: loader)
  69. postcss: [
  70. require('autoprefixer')({
  71. browsers: ['last 2 versions']
  72. })
  73. ]
  74. }
  75. }

4、build/webpack.prod.conf.js

  1. 'use strict'
  2. const path = require('path')
  3. const utils = require('./utils')
  4. const webpack = require('webpack')
  5. const config = require('../config')
  6. const merge = require('webpack-merge')// 一个可以合并数组和对象的插件
  7. const baseWebpackConfig = require('./webpack.base.conf')
  8. // 用于从webpack生成的bundle中提取文本到特定文件中的插件
  9. // 可以抽取出css,js文件将其与webpack输出的bundle分离
  10. const HtmlWebpackPlugin = require('html-webpack-plugin')// 一个用于生成HTML文件并自动注入依赖文件(link/script)的webpack插件
  11. const ExtractTextPlugin = require('extract-text-webpack-plugin')//如果我们想用webpack打包成一个文件,css js分离开,需要这个插件
  12.  
  13. var env = config.build.env
  14. // 合并基础的webpack配置
  15. var webpackConfig = merge(baseWebpackConfig, {
  16. // 配置样式文件的处理规则,使用styleLoaders
  17. module: {
  18. loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
  19. },
  20. devtool: config.build.productionSourceMap ? '#source-map' : false, // 开启source-map,生产环境下推荐使用cheap-source-map或source-map,后者得到的.map文件体积比较大,但是能够完全还原以前的js代码
  21. output: {
  22. path: config.build.assetsRoot,// 编译输出目录
  23. filename: utils.assetsPath('js/[name].[chunkhash].js'), // 编译输出文件名格式
  24. chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') // 没有指定输出名的文件输出的文件名格式
  25. },
  26. vue: { // vue里的css也要单独提取出来
  27. loaders: utils.cssLoaders({ // css加载器,调用了utils文件中的cssLoaders方法,用来返回针对各类型的样式文件的处理方式,
  28. sourceMap: config.build.productionSourceMap,
  29. extract: true
  30. })
  31. },
  32. // 重新配置插件项
  33. plugins: [
  34. // http://vuejs.github.io/vue-loader/en/workflow/production.html
  35. // 位于开发环境下
  36. new webpack.DefinePlugin({
  37. 'process.env': env
  38. }),
  39. new webpack.optimize.UglifyJsPlugin({// 丑化压缩代码
  40. compress: {
  41. warnings: false
  42. }
  43. }),
  44. new webpack.optimize.OccurenceOrderPlugin(),
  45. // extract css into its own file
  46. new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), // 抽离css文件
  47. // generate dist index.html with correct asset hash for caching.
  48. // you can customize output by editing /index.html
  49. // see https://github.com/ampedandwired/html-webpack-plugin
  50. // filename 生成网页的HTML名字,可以使用/来控制文件文件的目录结构,最
  51. // 终生成的路径是基于webpac配置的output.path的
  52. /* new HtmlWebpackPlugin({
  53. // 生成html文件的名字,路径和生产环境下的不同,要与修改后的publickPath相结合,否则开启服务器后页面空白
  54. filename: config.build.index,
  55. // 源文件,路径相对于本文件所在的位置
  56. template: 'index.html',
  57. inject: true,// 要把<script>标签插入到页面哪个标签里(body|true|head|false)
  58. minify: {
  59. removeComments: true,
  60. collapseWhitespace: true,
  61. removeAttributeQuotes: true
  62. // more options:
  63. // https://github.com/kangax/html-minifier#options-quick-reference
  64. },
  65. // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  66. chunksSortMode: 'dependency'
  67. }),*/
  68. // 如果文件是多入口的文件,可能存在,重复代码,把公共代码提取出来,又不会重复下载公共代码了
  69. // (多个页面间会共享此文件的缓存)
  70. // CommonsChunkPlugin的初始化常用参数有解析?
  71. // name: 这个给公共代码的chunk唯一的标识
  72. // filename,如何命名打包后生产的js文件,也是可以用上[name]、[hash]、[chunkhash]
  73. // minChunks,公共代码的判断标准:某个js模块被多少个chunk加载了才算是公共代码
  74. // split vendor js into its own file
  75. new webpack.optimize.CommonsChunkPlugin({
  76. name: 'vendor',
  77. minChunks: function (module, count) {
  78. // any required modules inside node_modules are extracted to vendor
  79. return (
  80. module.resource &&
  81. /\.js$/.test(module.resource) &&
  82. module.resource.indexOf(
  83. path.join(__dirname, '../node_modules')
  84. ) === 0
  85. )
  86. }
  87. }),
  88. // extract webpack runtime and module manifest to its own file in order to
  89. // prevent vendor hash from being updated whenever app bundle is updated
  90. /* new webpack.optimize.CommonsChunkPlugin({ // 为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID
  91. name: 'manifest',
  92. chunks: ['vendor']
  93. })*/
  94. ]
  95. })
  96. // gzip模式下需要引入compression插件进行压缩
  97. if (config.build.productionGzip) {
  98. var CompressionWebpackPlugin = require('compression-webpack-plugin')
  99.  
  100. webpackConfig.plugins.push(
  101. new CompressionWebpackPlugin({
  102. asset: '[path].gz[query]',
  103. algorithm: 'gzip',
  104. test: new RegExp(
  105. '\\.(' +
  106. config.build.productionGzipExtensions.join('|') +
  107. ')$'
  108. ),
  109. threshold: 10240,
  110. minRatio: 0.8
  111. })
  112. )
  113. }
  114.  
  115. if (config.build.bundleAnalyzerReport) {
  116. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  117. webpackConfig.plugins.push(new BundleAnalyzerPlugin())
  118. }
  119.  
  120. module.exports = webpackConfig
  121.  
  122. var pages = utils.getEntries('./src/module/**/*.html')
  123. for(var page in pages) {
  124. // 配置生成的html文件,定义路径等
  125. var conf = {
  126. filename: page + '.html',
  127. template: pages[page], //模板路径
  128. inject: true,
  129. // excludeChunks 允许跳过某些chunks, 而chunks告诉插件要引用entry里面的哪几个入口
  130. // 如何更好的理解这块呢?举个例子:比如本demo中包含两个模块(index和about),最好的当然是各个模块引入自己所需的js,
  131. // 而不是每个页面都引入所有的js,你可以把下面这个excludeChunks去掉,然后npm run build,然后看编译出来的index.html和about.html就知道了
  132. // filter:将数据过滤,然后返回符合要求的数据,Object.keys是获取JSON对象中的每个key
  133. excludeChunks: Object.keys(pages).filter(item => {
  134. return (item != page)
  135. })
  136. }
  137. // 需要生成几个html文件,就配置几个HtmlWebpackPlugin对象
  138. module.exports.plugins.push(new HtmlWebpackPlugin(conf))
  139. }

介绍vue-cli脚手架config目录下index.js配置文件的更多相关文章

  1. vue-cli脚手架config目录下index.js配置文件详解

    此文章介绍vue-cli脚手架config目录下index.js配置文件 此配置文件是用来定义开发环境和生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单 ...

  2. 此文章介绍vue-cli脚手架config目录下index.js配置文件

    此配置文件是用来定义开发环境和生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 上代码 // see http://vuejs- ...

  3. vue-cli脚手架build目录下utils.js工具配置文件详解

    此文章用来解释vue-cli脚手架build目录中的utils.js配置文件 此配置文件是vue开发环境的wepack相关配置文件,主要用来处理css-loader和vue-style-loader ...

  4. vue -- config index.js 配置文件详解

    此文章介绍vue-cli脚手架config目录下index.js配置文件 此配置文件是用来定义开发环境和生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单 ...

  5. vue-cli中config目录下的index.js文件详解

    vue-cli脚手架工具config目录下的index.js解析 转载自:http://www.cnblogs.com/ye-hcj/p/7077796.html // see http://vuej ...

  6. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  7. gulp插件实现压缩一个文件夹下不同目录下的js文件(支持es6)

    gulp-uglify:压缩js大小,只支持es5 安装: cnpm: cnpm i gulp-uglify -D yarn: yarn add gulp-uglify -D 使用: 代码实现1:压缩 ...

  8. vue-cli脚手架build目录中check-versions.js的配置

    转载自:https://www.cnblogs.com/ye-hcj/p/7074363.html 本文介绍vue-cli脚手架build目录中check-versions.js的配置 本文件是用来检 ...

  9. Java读取WEB-INF目录下的properties配置文件

    如何在Java代码中读取WEB-INF目录下的properties配置文件,下文给出了一个解决方案. 我们习惯将一些配置信息写在配置文件中,比如将数据库的配置信息URL.User和Password写在 ...

随机推荐

  1. Codeforces Round #621 (Div. 1 + Div. 2)D dij(思维)

    题:https://codeforces.com/contest/1307/problem/D 题意:给定无向图,n为点,m为边.在给个k,为特殊点的数目,题目要求在这些特殊点上连一条边,让新图最短路 ...

  2. 富文本编辑器Tinymce的示例和配置

    Demo链接: https://download.csdn.net/download/silverbutter/10557703 有时候需要验证tinyMCE编辑器中的内容是否符合规范(不为空),就需 ...

  3. [Shoi2013]超级跳马(DP+矩阵乘法)

    设f[i][j]表示方案数,显然有一个O(m2n)的暴力DP法,但实际上可以按距离当前位置的奇偶性分成s1[i][j]和s2[i][j],然后这个暴力DP可以优化到O(nm)的暴力.于是有这样的递推式 ...

  4. 吴裕雄--天生自然 PYTHON3开发学习:CGI编程

    <Directory "/var/www/cgi-bin"> AllowOverride None Options +ExecCGI Order allow,deny ...

  5. Android开发学习3

    学习内容: 1.复选框CheckBox 2.ImageView & 使用第三方库加载网络图片 3.列表视图ListView 4.网格视图GridView 5.ScrollView & ...

  6. 前端Js复习-前后台的搭建-结合Bootstrap和JQuery搭建vue项目

    流式布局思想 """ 页面的尺寸改变动态改变页面布局,或是通过父集标签控制多个子标签,这种布局思想就称之为 - 流式布局思想 1) 将标签宽高设置成 百分比,就可以随屏幕 ...

  7. sqlite如何避免重复建表(获取已经存在的表)

    找到已经存在的所有表,手动判断是否需要建表 SELECT name FROM SQLITE_MASTER WHERE type='table'ORDER BY name" 建表时sqlite ...

  8. Ansible--初始ansible

    一.ansible简介 ansible是一种自动化运维工具.实现批量操作系统配置.批量程序部署.批量命令运行等功能. ansible工作在agentless模式下,并且具有幂等性(幂等性不会重复执行相 ...

  9. [ZJOI2019]Minimax搜索(线段树+动态DP+树剖)

    为什么我怎么看都只会10pts?再看还是只会50~70?只会O(n2(R-L+1))/O(nlogn(R-L+1))……一眼看动态DP可还是不会做…… 根节点的答案是叶子传上来的,所以对于L=R的数据 ...

  10. zabbix-agent服务无法启动

    zabbix-agent服务无法启动解决方案1.先配置yum源2.卸载已经安装的zabbix-agent3.重新安装zabbix-agent4.配置zabbix-agent配置文件: Server=服 ...