vue-cli中的webpack配置详解

var cssLoader = {
loader: 'css-loader',options: { //options是loader的选项配置
minimize: process.env.NODE_ENV === 'production',//生成环境下压缩文件
sourceMap: options.sourceMap //根据参数是否生成sourceMap文件
}
}
function generateLoaders (loader,loaderOptions) { //生成loader
var loaders = [cssLoader] // 默认是css-loader
if (loader) { // 如果参数loader存在
loaders.push({
loader: loader + '-loader',options: Object.assign({},loaderOptions,{ //将loaderOptions和sourceMap组成一个对象
sourceMap: options.sourceMap
})
})
}
if (options.extract) { // 如果传入的options存在extract且为true
return ExtractTextPlugin.extract({ //ExtractTextPlugin分离js中引入的css文件
use: loaders,//处理的loader
fallback: 'vue-style-loader' //没有被提取分离时使用的loader
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
return { //返回css类型对应的loader组成的对象 generateLoaders()来生成loader
css: generateLoaders(),postcss: generateLoaders(),less: generateLoaders('less'),sass: generateLoaders('sass',{ indentedSyntax: true }),scss: generateLoaders('sass'),stylus: generateLoaders('stylus'),styl: generateLoaders('stylus')
}
}

//引入压缩文件的组件,该插件会对生成的文件进行压缩，生成一个.gz文件
var CompressionWebpackPlugin = require('compression-webpack-plugin')

webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',//目标文件名
algorithm: 'gzip',//使用gzip压缩
test: new RegExp( //满足正则表达式的文件会被压缩
'.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),threshold: 10240,//资源文件大于10240B=10kB时会被压缩
minRatio: 0.8 //最小压缩比达到0.8时才会被压缩
})
)
}

var port = process.env.PORT || config.dev.port //端口号
var autoOpenBrowser = !!config.dev.autoOpenBrowser //是否自动打开浏览器
var proxyTable = config.dev.proxyTable //http的代理url

var app = express() //启动express
var compiler = webpack(webpackConfig) //webpack编译

//webpack-dev-middleware的作用
//1.将编译后的生成的静态文件放在内存中,所以在npm run dev后磁盘上不会生成文件
//2.当文件改变时,会自动编译。
//3.当在编译过程中请求某个资源时，webpack-dev-server不会让这个请求失败，而是会一直阻塞它，直到webpack编译完毕
var devMiddleware = require('webpack-dev-middleware')(compiler,{
publicPath: webpackConfig.output.publicPath,quiet: true
})

//webpack-hot-middleware的作用就是实现浏览器的无刷新更新
var hotMiddleware = require('webpack-hot-middleware')(compiler,{
log: () => {}
})
//声明hotMiddleware无刷新更新的时机:html-webpack-plugin 的template更改之后
compiler.plugin('compilation',function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit',function (data,cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})

//将代理请求的配置应用到express服务上
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context,options))
})

//使用connect-history-api-fallback匹配资源
//如果不匹配就可以重定向到指定地址
app.use(require('connect-history-api-fallback')())

// 应用devMiddleware中间件
app.use(devMiddleware)
// 应用hotMiddleware中间件
app.use(hotMiddleware)

// 配置express静态资源目录
var staticPath = path.posix.join(config.dev.assetsPublicPath,config.dev.assetsSubDirectory)
app.use(staticPath,express.static('./static'))

var uri = 'http://localhost:' + port

//编译成功后打印uri
devMiddleware.waitUntilValid(function () {
console.log('> Listening at ' + uri + 'n')
})
//启动express服务
module.exports = app.listen(port,function (err) {
if (err) {
console.log(err)
return
}
// 满足条件则自动打开浏览器
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
}
})

// 在终端显示ora库的loading效果
var spinner = ora('building for production...')
spinner.start()

// 删除已编译文件
rm(path.join(config.build.assetsRoot,config.build.assetsSubDirectory),err => {
if (err) throw err
//在删除完成的回调函数中开始编译
webpack(webpackConfig,function (err,stats) {
spinner.stop() //停止loading
if (err) throw err

// 在编译完成的回调函数中,在终端输出编译的文件
process.stdout.write(stats.toString({
colors: true,modules: false,children: false,chunks: false,chunkModules: false
}) + 'nn')
})
})