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

Posted 2020-10-16 小前端学习

1.下载vue-cli

 

[html] view plain copy

 

1. npm install vue-cli -g  

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

 

 

2.安装webpack项目模版

[html] view plain copy

 

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

比如：

[html] view plain copy

 

1. vue init webpack my-project  

 

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

[html] view plain copy

 

1. npm install  

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

 

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

首先对目录结构进行说明，

1.build目录，主要利用webpack与node插件启动一些相关服务的js文件

2.config目录主要是针对开发环境，生产环境，测试环境的配置信息

3.src是我们自己开发时的源码目录（可指定修改名称）

4.static是一些第三方库的包用到的静态资源目录（可指定修改名称）

 

说明每个文件：

主要入口文件，dev-server.js文件，几乎每一句话都进行了注释，有些地方，涉及了其他关联文件，下面也会有相应的注释的方式

[html] view plain copy

 

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. // 端口号的设置  
23. var port = process.env.PORT || config.dev.port  
24. // 获取需要代理的服务api  
25. // https://github.com/chimurai/http-proxy-middleware  
26. var proxyTable = config.dev.proxyTable  
27. // 启动一个express服务  
28. var app = express()  
29. // 加载webpack配置  
30. var compiler = webpack(webpackConfig)  
31. // webpack的开发中间件，专门为webpack提供的一个简单的中间件，可以让文件都加载内存中，不去读写硬盘，并且当文件被改动的时候，不会刷新页面就会部署成功  
32. var devMiddleware = require(‘webpack-dev-middleware‘)(compiler, {  
33.   publicPath: webpackConfig.output.publicPath,  
34.   quiet: true  
35. })  
36. // 一个为webpack提供的热部署中间件。https://github.com/glenjamin/webpack-hot-middleware  
37. var hotMiddleware = require(‘webpack-hot-middleware‘)(compiler, {  
38.   log: () => {}  
39. })  
40. // 当html被改变的时候，让html被强制部署，使用这个中间件html-webpack-plugin，https://github.com/ampedandwired/html-webpack-plugin  
41. compiler.plugin(‘compilation‘, function (compilation) {  
42.   compilation.plugin(‘html-webpack-plugin-after-emit‘, function (data, cb) {  
43.     hotMiddleware.publish({ action: ‘reload‘ })  
44.     cb()  
45.   })  
46. })  
47.   
48. // 遍历代理的配置信息,并且使用中间件加载进去  
49. Object.keys(proxyTable).forEach(function (context) {  
50.   var options = proxyTable[context]  
51.   if (typeof options === ‘string‘) {  
52.     options = { target: options }  
53.   }  
54.   app.use(proxyMiddleware(context, options))  
55. })  
56.   
57. // 当访问找不到的页面的时候，该中间件指定了一个默认的页面返回https://github.com/bripkens/connect-history-api-fallback  
58. app.use(require(‘connect-history-api-fallback‘)())  
59.   
60. // 使用中间件  
61. app.use(devMiddleware)  
62.   
63. // 热部署  
64. app.use(hotMiddleware)  
65.   
66. // 根据配置信息拼接一个目录路径，然后将该路径下的文件交给express的静态目录管理  
67. var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)  
68. app.use(staticPath, express.static(‘./static‘))  
69.   
70. var uri = ‘http://localhost:‘ + port  
71.   
72. devMiddleware.waitUntilValid(function () {  
73.   console.log(‘> Listening at ‘ + uri + ‘\n‘)  
74. })  
75. // 导出的对象  
76. module.exports = app.listen(port, function (err) {  
77.   if (err) {  
78.     console.log(err)  
79.     return  
80.   }  
81.   
82.   // when env is testing, don‘t need open it  
83.   if (process.env.NODE_ENV !== ‘testing‘) {  
84.     opn(uri)  
85.   }  
86. })  

 

webpack.base.conf.js

[html] view plain copy

 

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

webpack.dev.comf.js

[html] view plain copy

 

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

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