最近在vue-cli⽣成的webpack模板项⽬的基础上开发了⼀些项⽬，开发过程中遇到很多坑，并且需要改动build和config⾥⾯⼀些相关的配置，查阅，学习，总结，分享。
⼀、配置⽂件结构
本⽂主要分析开发（dev）和构建（build）两个过程涉及到的⽂件，以下是有关的配置⽂件
├─build
│├─build.js
│├─check-versions.js
│├─dev-client.js
│├─dev-server.js
│├─utils.js
附庸
│├─f.js
│├─f.js
│├─f.js
│├─f.js
│└─f.js
├─config
│├─v.js
│├─index.js
│├─v.js
│└─v.js
├─...
└─package.json柴西
⼆、指令
⾸先看package.json⾥⾯的scripts字段，
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/f.js --single-run",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
}
运⾏”npm run dev”的时候执⾏的是build/dev-server.js⽂件，运⾏”npm run build”的时候执⾏的是build/build.js⽂件，我们可以从这两个⽂件开始进⾏代码阅读分析。
三、build⽂件夹
build/dev-server.js
执⾏”npm run dev”时候最先执⾏的build/dev-server.js⽂件。该⽂件主要完成下⾯⼏件事情：
1. 检查node和npm的版本
2. 引⼊相关插件和配置
3. 创建express服务器和webpack编译器 4. 配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware） 5. 挂载代理服务和中间件
6. 配置静态资源
7. 启动服务器监听特定端⼝（8080）
8. ⾃动打开浏览器并打开特定⽹址（localhost:8080） 说明： express服务器提供静态⽂件服务，不过它还使⽤了http-proxy-middleware，⼀个http请求代理的中间件。前端开发过程中需要使⽤到后台的API的话，可以通过配置proxyTable来将相应的后台请求代理到专⽤的API服务器。
详情请看代码注释：
// 检查NodeJS和npm的版本
require('./check-versions')()
// 获取配置
var config = require('../config')
// 如果Node的环境变量中没有设置当前的环境（NODE_ENV），则使⽤config中的配置作为当前的环境if (!v.NODE_ENV) {
}
// ⼀个可以调⽤默认软件打开⽹址、图⽚、⽂件等内容的插件
// 这⾥⽤它来调⽤默认浏览器打开dev-server监听的端⼝，例如：localhost:8080
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
会计 审计// ⼀个express中间件，⽤于将http请求代理到其他服务器
// 例：localhost:8080/api/xxx --> localhost:3000/api/xxx
// 这⾥使⽤该插件可以将前端开发中涉及到的请求代理到API服务器上，⽅便与服务器对接
var proxyMiddleware = require('http-proxy-middleware')
// 根据 Node 环境来引⼊相应的 webpack 配置
var webpackConfig = v.NODE_ENV === 'testing'
require('./f')
: require('./f')
/
/ dev-server 监听的端⼝，默认为config.dev.port设置的端⼝，即8080
var port = v.PORT || config.dev.port
// ⽤于判断是否要⾃动打开浏览器的布尔变量，当配置⽂件中没有设置⾃动打开浏览器的时候其值为 false var autoOpenBrowser = !!config.dev.autoOpenBrowser
// 定义 HTTP 代理表，代理到 API 服务器
var proxyTable = config.dev.proxyTable
// 创建1个 express 实例
var app = express()
// 根据webpack配置⽂件创建Compiler对象
var compiler = webpack(webpackConfig)
// webpack-dev-middleware使⽤compiler对象来对相应的⽂件进⾏编译和绑定
// 编译绑定后将得到的产物存放在内存中⽽没有写进磁盘
// 将这个中间件交给express使⽤之后即可访问这些编译后的产品⽂件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
// webpack-hot-middleware，⽤于实现热重载功能的中间件
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {}
})
// 当html-webpack-plugin提交之后通过热重载中间件发布重载动作使得页⾯重载
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
// 将 proxyTable 中的代理请求配置挂在到express服务器上
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
// 格式化options，例如将'ample'变成{ target: 'ample' }
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})
// handle fallback for HTML5 history API
// 重定向不存在的URL，常⽤于SPA
app.use(require('connect-history-api-fallback')())
// serve webpack bundle output
// 使⽤webpack开发中间件
// 即将webpack编译后输出到内存中的⽂件资源挂到express服务器上 app.use(devMiddleware)
// enable hot-reload and state-preserving
/
/ compilation error display
// 将热重载中间件挂在到express服务器上
app.use(hotMiddleware)
// serve pure static assets
// 静态资源的路径
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
// 将静态资源挂到express服务器上
app.use(staticPath, express.static('./static'))
// 应⽤的地址信息，例如：localhost:8080
var uri = 'localhost:' + port
// webpack开发中间件合法（valid）之后输出提⽰语到控制台，表明服务器已启动
devMiddleware.waitUntilValid(function () {
console.log('> Listening at ' + uri + '\n')
})
// 启动express服务器并监听相应的端⼝（8080）
if (err) {
console.log(err)
return
}
// when env is testing, don't need open it
// 如果符合⾃动打开浏览器的条件，则通过opn插件调⽤系统默认浏览器打开对应的地址uri
if (autoOpenBrowser && v.NODE_ENV !== 'testing') {
opn(uri)
}
})
build/f.js
从代码中看到，dev-server使⽤的webpack配置来⾃build/f.js⽂件（测试环境下使⽤的是build/f.js，这⾥暂时不考虑测试环境）。⽽build/f.js中⼜引⽤了f.js，所以这⾥我先分析f.js。
f.js主要完成了下⾯这些事情：
1. 配置webpack编译⼊⼝
2. 配置webpack输出路径和命名规则
3. 配置模块resolve规则
4. 配置不同类型模块的处理规则
说明：这个配置⾥⾯只配置了.js、.vue、图⽚、字体等⼏类⽂件的处理规则，如果需要处理其他⽂件可以在module.rules⾥⾯配置。
具体请看代码注释：
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./f')
// 给出正确的绝对路径
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
// 配置webpack编译⼊⼝
entry: {
app: './src/main.js'
},
// 配置webpack输出路径和命名规则
output: {
// webpack输出的⽬标⽂件夹路径（例如：/dist）
path: config.build.assetsRoot,
// webpack输出bundle⽂件命名格式
filename: '[name].js',
/
/ webpack编译输出的发布路径
publicPath: v.NODE_ENV === 'production'
config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
// 配置模块resolve的规则
resolve: {
// ⾃动resolve的扩展名
extensions: ['.js', '.vue', '.json'],
// resolve模块的时候要搜索的⽂件夹
modules: [
剩余人生店
resolve('src'),
resolve('node_modules')
],
// 创建路径别名，有了别名之后引⽤模块更⽅便，例如
// import Vue from 'vue/dist/vuemon.js'可以写成 import Vue from 'vue'
alias: {
'vue$': 'vue/dist/vuemon.js',
'src': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components')
}
},
// 配置不同类型模块的处理规则
module: {
rules: [
{// 对src和test⽂件夹下的.js和.vue⽂件使⽤eslint-loader
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: "pre",
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{// 对所有.vue⽂件使⽤vue-loader
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{// 对src和test⽂件夹下的.js⽂件使⽤babel-loader
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{// 对图⽚资源⽂件使⽤url-loader，query.name指明了输出的命名规则
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{// 对字体资源⽂件使⽤url-loader，query.name指明了输出的命名规则
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
build/f.js
接下来看f.js，这⾥⾯在f的基础上增加完善了开发环境下⾯的配置，主要包括下⾯⼏件事情：
1. 将hot-reload相关的代码添加到entry chunks
2. 合并基础的webpack配置
3. 使⽤styleLoaders
4. 配置Source Maps
5. 配置webpack插件
详情请看代码注释：
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
// ⼀个可以合并数组和对象的插件
var merge = require('webpack-merge')
var baseWebpackConfig = require('./f')
// ⼀个⽤于⽣成HTML⽂件并⾃动注⼊依赖⽂件（link/script）的webpack插件
var HtmlWebpackPlugin = require('html-webpack-plugin')
// ⽤于更友好地输出webpack的警告、错误等信息
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks
Object.).forEach(function (name) {
<[name] = ['./build/dev-client'].[name])
})
中间偃麦草
// 合并基础的webpack配置
/
/ 配置样式⽂件的处理规则，使⽤styleLoaders
ospfmodule: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// 配置Source Maps。在开发中使⽤cheap-module-eval-source-map更快
devtool: '#cheap-module-eval-source-map',
// 配置webpack插件
plugins: [
new webpack.DefinePlugin({
'v': v
}),
/
/ github/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
// 后页⾯中的报错不会阻塞，但是会在编译结束后报错
new webpack.NoEmitOnErrorsPlugin(),
// github/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
build/utils.js和f.js
前⾯的webpack配置⽂件中使⽤到了utils.js和f.js这两个⽂件，utils主要完成下⾯3件事：
1. 配置静态资源路径
2. ⽣成cssLoaders⽤于加载.vue⽂件中的样式
3. ⽣成styleLoaders⽤于加载不在.vue⽂件中的单独存在的样式⽂件
var utils = require('./utils')
var config = require('../config')
var isProduction = v.NODE_ENV === 'production'
// css加载器
loaders: utils.cssLoaders({
sourceMap: isProduction
config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
}),
// 编译css之后⾃动添加前缀
postcss: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
}
build/build.js
讲完了开发环境下的配置，下⾯开始来看构建环境下的配置。执⾏”npm run build”的时候⾸先执⾏的是build/build.js⽂件，build.js主要完成下⾯⼏件事：
1. loading动画
2. 删除创建⽬标⽂件夹
3. webpack编译
4. 输出信息
说明： webpack编译之后会输出到配置⾥⾯指定的⽬标⽂件夹；删除⽬标⽂件夹之后再创建是为了去除旧的内容，以免产⽣不可预测的影
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议