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

1.下载vue-cli

[html]view plaincopy npminstallvue-cli-g

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

2.安装webpack项目模版

[html]view plaincopy vueinit<template-name><project-name> 比如：

[html]view plaincopy vueinitwebpackmy-project 之后可以在当前目录下下载该模版，然后[html]view plaincopy npminstall

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

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

首先对目录结构进行说明， 1.build目录，主要利用webpack与node插件启动一些相关服务的js文件 2.config目录主要是针对开发环境，生产环境，测试环境的配置信息 3.src是我们自己开发时的源码目录（可指定修改名称） 4.static是一些第三方库的包用到的静态资源目录（可指定修改名称） 说明每个文件： 主要入口文件，dev-server.js文件，几乎每一句话都进行了注释，有些地方，涉及了其他关联文件，下面也会有相应的注释的方式[html]view plaincopy //引入检查版本js模块require('./check-versions')()//引入配置文件信息模块varconfig=require('../config')//判断开发环境if(!process.env.NODE_ENV)process.env.NODE_ENV=JSON.parse(config.dev.env.NODE_ENV)//引入nodejs的path模块，进行一些路径的操作，详情可以查看node官方的apivarpath=require('path')//引入nodejs的一个框架express,可以帮助我们快速搭建一个node服务github/expressjs/expressvarexpress=require('express')//引入node为webpack提供的一个模块服务github/webpack/webpackvarwebpack=require('webpack')//可以指定打开指定的url使用指定的浏览器或者应用，详情可以去看一下github/sindresorhus/opnvaropn=require('opn')//一个可以设置帮助我们进行服务器转发代理的中间件/chimurai/http-proxy-middlewarevarproxyMiddleware=require('http-proxy-middleware')//根据当前启动环境选择加载相应的配置文件，webpack.prod.conf与webpack.dev.conf文件的说明后面也有varwebpackConfig=process.env.NODE_ENV==='testing'?require('./webpack.prod.conf'):require('./webpack.dev.conf')//端口号的设置varport=process.env.PORT||config.dev.port//获取需要代理的服务api///chimurai/http-proxy-middlewarevarproxyTable=config.dev.proxyTable//启动一个express服务varapp=express()//加载webpack配置varcompiler=webpack(webpackConfig)//webpack的开发中间件，专门为webpack提供的一个简单的中间件，可以让文件都加载内存中，不去读写硬盘，并且当文件被改动的时候，不会刷新页面就会部署成功vardevMiddleware=require('webpack-dev-middleware')(compiler,{publicPath:webpackConfig.output.publicPath,quiet:true})//一个为webpack提供的热部署中间件。/glenjamin/webpack-hot-middlewarevarhotMiddleware=require('webpack-hot-middleware')(compiler,{log:()=>{}})//当html被改变的时候，让html被强制部署，使用这个中间件html-webpack-plugin，/ampedandwired/html-webpack-plugincompiler.plugin('compilation',function(compilation){compilation.plugin('html-webpack-plugin-after-emit',function(data,cb){hotMiddleware.publish({action:'reload'})cb()})})//遍历代理的配置信息,并且使用中间件加载进去Object.keys(proxyTable).forEach(function(context){varoptions=proxyTable[context]if(typeofoptions==='string'){options={target:options}}app.use(proxyMiddleware(context,options))})//当访问找不到的页面的时候，该中间件指定了一个默认的页面返回/bripkens/connect-history-api-fallbackapp.use(require('connect-history-api-fallback')())//使用中间件app.use(devMiddleware)//热部署app.use(hotMiddleware)//根据配置信息拼接一个目录路径，然后将该路径下的文件交给express的静态目录管理varstaticPath=path.posix.join(config.dev.assetsPublicPath,config.dev.assetsSubDirectory)app.use(staticPath,express.static('./static'))varuri='http://localhost:'+portdevMiddleware.waitUntilValid(function(){console.log('>Listeningat'+uri+'\n')})//导出的对象module.exports=app.listen(port,function(err){if(err){console.log(err)return}//whenenvistesting,don'tneedopenitif(process.env.NODE_ENV!=='testing'){opn(uri)}}) webpack.base.conf.js[html]view plaincopy varpath=require('path')varconfig=require('../config')//工具类，下面会用到varutils=require('./utils')//工程目录，就是当前目录build的上一层目录varprojectRoot=path.resolve(__dirname,'../')varenv=process.env.NODE_ENV//是否在开发环境中使用cssSourceMap,默认是false,该配置信息在config目录下的index.js中可以查看varcssSourceMapDev=(env==='development'&&config.dev.cssSourceMap)varcssSourceMapProd=(env==='production'&&config.build.productionSourceMap)varuseCssSourceMap=cssSourceMapDev||cssSourceMapProd//导出的对象，就是webpack的配置项，详情可以参考的webpack的配置说明，这里会将出现的都一一说明一下module.exports={//指明入口函数entry:{app:'./src/main.js'},//输出配置项output:{//路径，从config/index读取的，值为：工程目录下的dist目录，需要的自定义的也可以去修改path:config.build.assetsRoot,//发布路径，这里是的值为/，正式生产环境可能是服务器上的一个路径,也可以自定义publicPath:process.env.NODE_ENV==='production'?config.build.assetsPublicPath:config.dev.assetsPublicPath,filename:'[name].js'},//配置模块如何被解析，就是import或者require的一些配置resolve:{//当使用require或者import的时候，自动补全下面的扩展名文件的扩展名，也就是说引入的时候不需要使用扩展名extensions:['','.js','.vue','.json'],//当我们require的东西找不到的时候，可以去node_modules里面去找，fallback:[path.join(__dirname,'../node_modules')],//别名,在我们require的时候，可以使用这些别名，来缩短我们需要的路径的长度alias:{'vue$':'vue/dist/mon.js','src':path.resolve(__dirname,'../src'),'assets':path.resolve(__dirname,'../src/assets'),'components':path.resolve(__dirname,'../src/components')}},//同上resolveLoader:{fallback:[path.join(__dirname,'../node_modules')]},//对相应文件的编译使用什么工具的配置module:{//loader之前的配置，会对.vue,.js的文件用eslint进行编译,include是包含的文件，exclude是排除的文件，可以使用的正则preLoaders:[{test:/\.vue$/,loader:'eslint',include:[path.join(projectRoot,'src')],exclude:/node_modules/},{test:/\.js$/,loader:'eslint',include:[path.join(projectRoot,'src')],exclude:/node_modules/}],//这里也是相应的配置，test就是匹配文件，loader是加载器，//query比较特殊，当大小超过10kb的时候，会单独生成一个文件，文件名的生成规则是utils提供的方法，当小于10kb的时候，就会生成一个base64串放入js文件中loaders:[{test:/\.vue$/,loader:'vue'},{test:/\.js$/,loader:'babel',include:[path.join(projectRoot,'src')],exclude:/node_modules/},{test:/\.json$/,loader:'json'},{test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,loader:'url',query:{limit:10000,name:utils.assetsPath('img/[name].[hash:7].[ext]')}},{test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader:'url',query:{limit:10000,name:utils.assetsPath('fonts/[name].[hash:7].[ext]')}}]},//eslint的配置eslint:{formatter:require('eslint-friendly-formatter')},//vue-loader的配置vue:{loaders:utils.cssLoaders({sourceMap:useCssSourceMap}),postcss:[require('autoprefixer')({browsers:['last2versions']})]}}

f.js[html]view plaincopy varconfig=require('../config')varwebpack=require('webpack')///survivejs/webpack-merge提供一个合并生成新对象函数varmerge=require('webpack-merge')varutils=require('./utils')varbaseWebpackConfig=require('./webpack.base.conf')varHtmlWebpackPlugin=require('html-webpack-plugin')varFriendlyErrors=require('friendly-errors-webpack-plugin')//在浏览器不刷新的情况下，也可以看到改变的效果，如果刷新失败了，他就会自动刷新页面Object.keys(baseWebpackConfig.entry).forEach(function(name){baseWebpackConfig.entry[name]=['./build/dev-client'].concat(baseWebpackConfig.entry[name])})module.exports=merge(baseWebpackConfig,{module:{//后面会有对utils的解释,这里是对单独的css文件，用相应的css加载器来解析loaders:utils.styleLoaders({sourceMap:config.dev.cssSourceMap})},//在开发模式下，可以在webpack下面找到js文件，在f12的时候，devtool:'#eval-source-map',//将webpack的插件放入plugins:[//通过插件修改定义的变量newwebpack.DefinePlugin({'process.env':config.dev.env}),//webpack优化的这个一个模块，/glenjamin/webpack-hot-middleware#installation--usagenewwebpack.optimize.OccurrenceOrderPlugin(),//热加载newwebpack.HotModuleReplacementPlugin(),//当编译出现错误的时候，会跳过这部分代码newwebpack.NoErrorsPlugin(),//filename生成的文件名，template是模版用的文件名,/ampedandwired/html-webpack-pluginnewHtmlWebpackPlugin({filename:'index.html',template:'index.html',//让打包生成的html文件中css和js就默认添加到html里面，css就添加到head里面，js就添加到body里面inject:true}),newFriendlyErrors()]})

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 环境5env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境6index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件7assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径8assetsSubDirectory: 'static', // 编译输出的二级目录9assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名10productionSourceMap: true, // 是否开启 cssSourceMap11// Gzip off by default as many popular static hosts such as12// 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-plugin15productionGzip: false, // 是否开启 gzip16productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名17 },18 dev: { // dev 环境19env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境20port: 8080, // 运行测试页面的端口21assetsSubDirectory: 'static', // 编译输出的二级目录22assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名23proxyTable: {}, // 需要 proxyTable 代理的接口（可跨域）24// CSS Sourcemaps off by default because relative paths are "buggy"25// with this option, according to the CSS-Loader README26// (/webpack/css-loader#sourcemaps)27// In our experience, they generally work as expected,28// just be aware of this issue when enabling this option.29cssSourceMap: false // 是否开启 cssSourceMap30 }31 }