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

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说明，后面会有文章说明
补充：

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

复制代码
 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 }
复制代码

转载于:https://www.cnblogs.com/leolovexx/p/7992929.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/399190.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

zookeeper windows 下安装

zookeeper windows 下安装

2019独角兽企业重金招聘Python工程师标准>>> 前沿&#xff1a;最近公司做的项目用到了dubbo 和 zookeeper 由于 每次测试的时候 我本地的服务就会注册到测试机上&#xff0c;还得每次把测试机的服务停止掉&#xff0c;所以准备在本地搭建一个zookeeper。 安装过程 2…
阅读更多...
小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）...

小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）...

作为一款真正有使用价值的应用&#xff0c;首先应该至少有两个页面&#xff0c;通过页面的切换来实现更多的交互。比如手机人人网&#xff0c;打开以后先是进入登录页面&#xff0c;登录后会有新鲜事&#xff0c;然后拉开左边的面板&#xff0c;能看到相册、悄悄话、应用之类的…
阅读更多...
Mysql学习总结（12）——21分钟Mysql入门教程

Mysql学习总结（12）——21分钟Mysql入门教程

21分钟 MySQL 入门教程 目录 一、MySQL的相关概念介绍二、Windows下MySQL的配置 配置步骤MySQL服务的启动、停止与卸载三、MySQL脚本的基本组成四、MySQL中的数据类型五、使用MySQL数据库 登录到MySQL创建一个数据库选择所要操作的数据库创建数据库表六、操作MySQL数据库 向表中…
阅读更多...
java 队列实例_Java 实例 - 队列（Queue）用法

java 队列实例_Java 实例 - 队列（Queue）用法

全屏Java 实例 - 队列(Queue)用法队列是一种特殊的线性表&#xff0c;它只允许在表的前端进行删除操作&#xff0c;而在表的后端进行插入操作。LinkedList类实现了Queue接口&#xff0c;因此我们可以把LinkedList当成Queue来用。以下实例演示了队列(Queue)的用法&#xff1a;Ma…
阅读更多...
@Html辅助方法

@Html辅助方法

Html.LabelFor(m > m.UserName, new { class "col-md-2 control-label" })LabelFor使用了模型类中相应的DisplayName属性Html.ValidationSummary(true, "", new { class "text-danger" })验证消息的显示有两种&#xff0c;一种是Validation…
阅读更多...
PrintJ的设计模式之旅——1.模式之父

PrintJ的设计模式之旅——1.模式之父

好奇设计模式的源头&#xff0c;做了一番搜索和调查&#xff0c;于是便开启了这个系列“PrintJ的设计模式之旅”。 1.模式之父 GOF&#xff08;Gang of Four&#xff09; Erich Gamma、Richard Helm、Ralph Johnson 和 John Vlissides合著了"Design Patterns: Elements of…
阅读更多...
iOS 添加导航栏两侧按钮

iOS 添加导航栏两侧按钮

self.navigationItem.leftBarButtonItem [[UIBarButtonItem alloc] initWithTitle:"首页" style:UIBarButtonItemStyleBordered target:self action:selector(popToRootView)] ;self.navigationItem.rightBarButtonItem [[UIBarButtonItem alloc] initWithTitle:&q…
阅读更多...
java 1.6 ubuntu_ubuntu配置 Java SE 1.6

java 1.6 ubuntu_ubuntu配置 Java SE 1.6

今天编译android 4.0时提示如下错误&#xff1a;You are attempting to build with the incorrect version of java.Your version is: java version "1.6.0_22".The correct version is: Java SE 1.6.查了一下现在已安装的java&#xff1a;java -versionjava version…
阅读更多...
微信小程序 功能函数 把数字1,2,3,4换成春,夏,秋,冬

微信小程序 功能函数 把数字1,2,3,4换成春,夏,秋,冬

let season ‘1,2,3’;// console.log(season.length)if (season){if (season.length1){seasonChe1season.substr(0);seasonChe1 parseInt(seasonChe1)switch (seasonChe1) {case 1:(function(){seasonChe2春})()break;case 2:(function () {seasonChe2 夏})()break;case 3:(…
阅读更多...
UVa 11549 Calculator Conundrum

UVa 11549 Calculator Conundrum

大白书里面的题感觉就是没有什么固定的思路&#xff0c;只能认真理解学习汝佳大大的代码。 这里用的Floyd判圈法&#xff0c;就像插图里面的一样&#xff0c;两个小孩&#xff0c;一个快一个慢&#xff0c;如果实在一个环形跑道&#xff0c;那么快的那个最终一定会“追上”慢的…
阅读更多...
servlet与MySQL商品管理系统_servlet和mysql实现宿舍管理系统

servlet与MySQL商品管理系统_servlet和mysql实现宿舍管理系统

【实例简介】servlet mysql实现的宿舍管理系统&#xff0c;以及各个功能的视频录像【实例截图】【核心代码】Sushem└── Sushem├── kk 录像│ └── kk 2017-11-13 17-11-38.avi└── Sushem├── src│ ├── dao│ │ ├── BaoxiuDao.java│ │ ├──…
阅读更多...
几个性能测试工具

几个性能测试工具

我个人认为一个优秀的软件工程师必须掌握一定的测试技能。可能有的开发工程师认为测试是测试工程师的事情&#xff0c;不是开发工程师的事情。这种开发工程师是缺一条腿的&#xff0c;离开了测试工程师&#xff0c;你如何证明你的程序没有问题。 下面是我这两天搜集的性能测试工…
阅读更多...
Bootstrap页面布局14 - BS按钮群组

Bootstrap页面布局14 - BS按钮群组

首先看看这个代码&#xff1a; <div classbtn-group><button typebutton classbtn>计算机</button><button typebutton classbtn>网络</button><button typebutton classbtn>桌面项目</button> </div> 将功能相近的按钮分成一…
阅读更多...
type const mysql_Mysql Explain之type详解

type const mysql_Mysql Explain之type详解

select version()&#xff1a;5.7.21MySQL 提供了一个 EXPLAIN 命令, 它可以对 SQL 语句进行分析, 并输出 SQL 执行的详细信息, 以供开发人员针对性优化.例如分析一条 SELECT 语句EXPLAIN 结果中的type字段Tips&#xff1a;常见的扫描方式system&#xff1a;系统表&#xff0c;…
阅读更多...
Android Intent传递数据

Android Intent传递数据

刚开始看郭大神的<>,实现以下里面的一些例子.Intent传递数据. 我们利用显示的方式进行Intent的启动. 1.启动intent并输入数据. Intent intentnew Intent(MainActivity.this,TwoActivity.class);intent.putExtra("data", "hello two");startActivity(…
阅读更多...
WCF中的标准绑定

WCF中的标准绑定

使用过WCF的童鞋们都很清楚&#xff0c;绑定是必须的。我将这些绑定总结了下。 一、标准绑定简要说明 1.basicHttpBinding基于WS-I Basic Profile 1.1 的web服务,所需的.Net Framework版本为 3.0 以上。 2.wsHttpBinding针对改进的web服务的绑定,包括WS-Security,WS-Transactio…
阅读更多...
PM2.5空气质量指数(AQI)是如何计算的

PM2.5空气质量指数(AQI)是如何计算的

源&#xff1a;PM2.5空气质量指数(AQI)是如何计算的 阅读目录 AQI如何计算　 空气污染指数分级标准AQI如何计算 具体要计算PM2.5空气质量指数(AQI)&#xff0c;SENBE申贝技术人员向您介绍如何计算的公式。比如当实测浓度小于等于0.035时&#xff0c;根据实测浓度50/0.035计算。…
阅读更多...
C++对于大型图片的加载缩放尝试

C++对于大型图片的加载缩放尝试

Qt对于图片的操作主要集中在这几个类 QImage ,QImageReader ,QPixmap 其中QImage这个类对图片的缩放有几个很不错的技巧&#xff0c;不过对于大图片却并不好使&#xff0c;当我们去看QImage的实现代码时&#xff0c;会发现其中读取QImageReader来加载图片&#xff0c;当我们去看…
阅读更多...
PHP移动互联网开发笔记（3）——运算符

PHP移动互联网开发笔记（3）——运算符

一、PHP的运算符PHP中有丰富的运算符集&#xff0c;它们中大部分直接来自于C语言。按照不同功能区分&#xff0c;运算符可以分为&#xff1a;算术运算符、字符串运算符、赋值运算符、位运算符、条件运算符&#xff0c;以及逻辑运算符等。当各种运算符在同一个表达式中时&#x…
阅读更多...
xadmin与mysql数据库_十八、Django3.0学习之引入xadmin

xadmin与mysql数据库_十八、Django3.0学习之引入xadmin

一、将xadmin导入Django工程中1.1 xadmin下载地址&#xff1a; https://github.com/sshwsfc/xadmin/tree/django2或者&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1VJPsN5GOW_xbiPb8t43oRg提取码&#xff1a;nkei1.2 下载压缩包1.3 到zip目录下&#xff0c;进行pip3 …
阅读更多...
最新文章

Copyright @ 2022~2023