vue-cli的webpack模版，相关配置文件dev-server.js与webpack.config.js配置解析

时间：2021-08-31 16:31:08

1.下载vue-cli

  1. npm install vue-cli -g

vue-cli的使用与详细介绍，可以到github上获取https://github.com/vuejs/vue-cli

2.安装webpack项目模版

  1. vue init <template-name> <project-name>

比如：

  1. vue init webpack my-project

之后可以在当前目录下下载该模版，然后

  1. npm install

安装所有的依赖包，可以得到如下的目录结构

vue-cli的webpack模版，相关配置文件dev-server.js与webpack.config.js配置解析

3.目录结构与文件配置说明

首先对目录结构进行说明，
1.build目录，主要利用webpack与node插件启动一些相关服务的js文件
2.config目录主要是针对开发环境，生产环境，测试环境的配置信息
3.src是我们自己开发时的源码目录（可指定修改名称）
4.static是一些第三方库的包用到的静态资源目录（可指定修改名称）
说明每个文件：
主要入口文件，dev-server.js文件，几乎每一句话都进行了注释，有些地方，涉及了其他关联文件，下面也会有相应的注释的方式
  1. // 引入检查版本js模块
  2. require('./check-versions')()
  3. // 引入配置文件信息模块
  4. var config = require('../config')
  5. // 判断开发环境
  6. if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
  7. // 引入nodejs的path模块，进行一些路径的操作，详情可以查看node官方的api
  8. var path = require('path')
  9. // 引入nodejs的一个框架express,可以帮助我们快速搭建一个node服务 github https://github.com/expressjs/express
  10. var express = require('express')
  11. // 引入node为webpack提供的一个模块服务 github https://github.com/webpack/webpack
  12. var webpack = require('webpack')
  13. // 可以指定打开指定的url使用指定的浏览器或者应用，详情可以去看一下github https://github.com/sindresorhus/opn
  14. var opn = require('opn')
  15. // 一个可以设置帮助我们进行服务器转发代理的中间件 https://github.com/chimurai/http-proxy-middleware
  16. var proxyMiddleware = require('http-proxy-middleware')
  17. // 根据当前启动环境选择加载相应的配置文件，webpack.prod.conf与webpack.dev.conf文件的说明后面也有
  18. var webpackConfig = process.env.NODE_ENV === 'testing'
  19. ? require('./webpack.prod.conf')
  20. : require('./webpack.dev.conf')
  21. // 端口号的设置
  22. var port = process.env.PORT || config.dev.port
  23. // 获取需要代理的服务api
  24. // https://github.com/chimurai/http-proxy-middleware
  25. var proxyTable = config.dev.proxyTable
  26. // 启动一个express服务
  27. var app = express()
  28. // 加载webpack配置
  29. var compiler = webpack(webpackConfig)
  30. // webpack的开发中间件，专门为webpack提供的一个简单的中间件，可以让文件都加载内存中，不去读写硬盘，并且当文件被改动的时候，不会刷新页面就会部署成功
  31. var devMiddleware = require('webpack-dev-middleware')(compiler, {
  32. publicPath: webpackConfig.output.publicPath,
  33. quiet: true
  34. })
  35. // 一个为webpack提供的热部署中间件。https://github.com/glenjamin/webpack-hot-middleware
  36. var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  37. log: () => {}
  38. })
  39. // 当html被改变的时候，让html被强制部署，使用这个中间件html-webpack-plugin，https://github.com/ampedandwired/html-webpack-plugin
  40. compiler.plugin('compilation', function (compilation) {
  41. compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
  42. hotMiddleware.publish({ action: 'reload' })
  43. cb()
  44. })
  45. })
  46. // 遍历代理的配置信息,并且使用中间件加载进去
  47. Object.keys(proxyTable).forEach(function (context) {
  48. var options = proxyTable[context]
  49. if (typeof options === 'string') {
  50. options = { target: options }
  51. }
  52. app.use(proxyMiddleware(context, options))
  53. })
  54. // 当访问找不到的页面的时候，该中间件指定了一个默认的页面返回https://github.com/bripkens/connect-history-api-fallback
  55. app.use(require('connect-history-api-fallback')())
  56. // 使用中间件
  57. app.use(devMiddleware)
  58. // 热部署
  59. app.use(hotMiddleware)
  60. // 根据配置信息拼接一个目录路径，然后将该路径下的文件交给express的静态目录管理
  61. var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
  62. app.use(staticPath, express.static('./static'))
  63. var uri = 'http://localhost:' + port
  64. devMiddleware.waitUntilValid(function () {
  65. console.log('> Listening at ' + uri + '\n')
  66. })
  67. // 导出的对象
  68. module.exports = app.listen(port, function (err) {
  69. if (err) {
  70. console.log(err)
  71. return
  72. }
  73. // when env is testing, don't need open it
  74. if (process.env.NODE_ENV !== 'testing') {
  75. opn(uri)
  76. }
  77. })

webpack.base.conf.js

  1. var path = require('path')
  2. var config = require('../config')
  3. // 工具类，下面会用到
  4. var utils = require('./utils')
  5. // 工程目录，就是当前目录build的上一层目录
  6. var projectRoot = path.resolve(__dirname, '../')
  7. var env = process.env.NODE_ENV
  8. // 是否在开发环境中使用cssSourceMap,默认是false,该配置信息在config目录下的index.js中可以查看
  9. var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
  10. var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
  11. var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
  12. // 导出的对象，就是webpack的配置项，详情可以参考的webpack的配置说明，这里会将出现的都一一说明一下
  13. module.exports = {
  14. // 指明入口函数
  15. entry: {
  16. app: './src/main.js'
  17. },
  18. // 输出配置项
  19. output: {
  20. // 路径，从config/index读取的，值为：工程目录下的dist目录，需要的自定义的也可以去修改
  21. path: config.build.assetsRoot,
  22. // 发布路径，这里是的值为/，正式生产环境可能是服务器上的一个路径,也可以自定义
  23. publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
  24. filename: '[name].js'
  25. },
  26. // 配置模块如何被解析，就是import或者require的一些配置
  27. resolve: {
  28. // 当使用require或者import的时候，自动补全下面的扩展名文件的扩展名，也就是说引入的时候不需要使用扩展名
  29. extensions: ['', '.js', '.vue', '.json'],
  30. // 当我们require的东西找不到的时候，可以去node_modules里面去找，
  31. fallback: [path.join(__dirname, '../node_modules')],
  32. // 别名,在我们require的时候，可以使用这些别名，来缩短我们需要的路径的长度
  33. alias: {
  34. 'vue$': 'vue/dist/vue.common.js',
  35. 'src': path.resolve(__dirname, '../src'),
  36. 'assets': path.resolve(__dirname, '../src/assets'),
  37. 'components': path.resolve(__dirname, '../src/components')
  38. }
  39. },
  40. // 同上
  41. resolveLoader: {
  42. fallback: [path.join(__dirname, '../node_modules')]
  43. },
  44. // 对相应文件的编译使用什么工具的配置
  45. module: {
  46. // loader之前的配置，会对.vue,.js的文件用eslint进行编译,include是包含的文件，exclude是排除的文件，可以使用的正则
  47. preLoaders: [
  48. {
  49. test: /\.vue$/,
  50. loader: 'eslint',
  51. include: [
  52. path.join(projectRoot, 'src')
  53. ],
  54. exclude: /node_modules/
  55. },
  56. {
  57. test: /\.js$/,
  58. loader: 'eslint',
  59. include: [
  60. path.join(projectRoot, 'src')
  61. ],
  62. exclude: /node_modules/
  63. }
  64. ],
  65. // 这里也是相应的配置，test就是匹配文件，loader是加载器，
  66. // query比较特殊，当大小超过10kb的时候，会单独生成一个文件，文件名的生成规则是utils提供的方法，当小于10kb的时候，就会生成一个base64串放入js文件中
  67. loaders: [
  68. {
  69. test: /\.vue$/,
  70. loader: 'vue'
  71. },
  72. {
  73. test: /\.js$/,
  74. loader: 'babel',
  75. include: [
  76. path.join(projectRoot, 'src')
  77. ],
  78. exclude: /node_modules/
  79. },
  80. {
  81. test: /\.json$/,
  82. loader: 'json'
  83. },
  84. {
  85. test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  86. loader: 'url',
  87. query: {
  88. limit: 10000,
  89. name: utils.assetsPath('img/[name].[hash:7].[ext]')
  90. }
  91. },
  92. {
  93. test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  94. loader: 'url',
  95. query: {
  96. limit: 10000,
  97. name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  98. }
  99. }
  100. ]
  101. },
  102. // eslint的配置
  103. eslint: {
  104. formatter: require('eslint-friendly-formatter')
  105. },
  106. // vue-loader的配置
  107. vue: {
  108. loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
  109. postcss: [
  110. require('autoprefixer')({
  111. browsers: ['last 2 versions']
  112. })
  113. ]
  114. }
  115. }

webpack.dev.comf.js

  1. var config = require('../config')
  2. var webpack = require('webpack')
  3. // https://github.com/survivejs/webpack-merge 提供一个合并生成新对象函数
  4. var merge = require('webpack-merge')
  5. var utils = require('./utils')
  6. var baseWebpackConfig = require('./webpack.base.conf')
  7. var HtmlWebpackPlugin = require('html-webpack-plugin')
  8. var FriendlyErrors = require('friendly-errors-webpack-plugin')
  9. // 在浏览器不刷新的情况下，也可以看到改变的效果，如果刷新失败了，他就会自动刷新页面
  10. Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  11. baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
  12. })
  13. module.exports = merge(baseWebpackConfig, {
  14. module: {
  15. // 后面会有对utils的解释,这里是对单独的css文件，用相应的css加载器来解析
  16. loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  17. },
  18. // 在开发模式下，可以在webpack下面找到js文件，在f12的时候，
  19. devtool: '#eval-source-map',
  20. // 将webpack的插件放入
  21. plugins: [
  22. // 通过插件修改定义的变量
  23. new webpack.DefinePlugin({
  24. 'process.env': config.dev.env
  25. }),
  26. // webpack优化的这个一个模块，https://github.com/glenjamin/webpack-hot-middleware#installation--usage
  27. new webpack.optimize.OccurrenceOrderPlugin(),
  28. // 热加载
  29. new webpack.HotModuleReplacementPlugin(),
  30. // 当编译出现错误的时候，会跳过这部分代码
  31. new webpack.NoErrorsPlugin(),
  32. // filename生成的文件名，template是模版用的文件名,https://github.com/ampedandwired/html-webpack-plugin
  33. new HtmlWebpackPlugin({
  34. filename: 'index.html',
  35. template: 'index.html',
  36. // 让打包生成的html文件中css和js就默认添加到html里面，css就添加到head里面，js就添加到body里面
  37. inject: true
  38. }),
  39. new FriendlyErrors()
  40. ]
  41. })

utils.js和config目录下面的js文件都比较好辨认是干什么的，config下面都是配置信息，json对象，很好理解，utils下面就是导出了几个常用的方法，主要也就是用在了上述的几个js文件里面，另外关于生产阶段和测试阶段的js说明，后面会有文章说明

补充：

项目中配置的config/index.js，有dev和production两种环境的配置 以下介绍的是production环境下的webpack配置的理解

vue-cli的webpack模版，相关配置文件dev-server.js与webpack.config.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: true, // 是否开启 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 }
vue-cli的webpack模版，相关配置文件dev-server.js与webpack.config.js配置解析

相关文章