vue - webpack.dev.conf.js

描述：开发时的配置.(配置开发时的一些操作)

例如这里，是否自动打开浏览器（默认true）

'use strict'

// build/util.js
const utils = require('./utils')
// node_modules里面的webpack
const webpack = require('webpack')
// config/index.js
const config = require('../config')
// 对象合并
const merge = require('webpack-merge')
// 路径
const path = require('path')

// 引入webpack.base.conf.js配置
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

// 配置
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map开发速度更快(只检测修改了的文件进行更新，而不是全部)
devtool: config.dev.devtool,

/**
*  这里配置开发服务器
*/
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
// 是否开启HMR
hot: true,
// 内容
contentBase: false, // 因为我们使用CopyWebpackPlugin
// 是否压缩
compress: true,

host: HOST || config.dev.host,
port: PORT || config.dev.port,

// config => config/index.js
open: config.dev.autoOpenBrowser,

overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
// 如果不开启，则不提示友好的错误信息！
quiet: true, // FriendlyErrorsPlugin所必需的
watchOptions: {
poll: config.dev.poll,
}
},

/**
* 配置插件
*/
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR在更新时在控制台中显示正确的文件名。
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// 复制到自定义静态源
new CopyWebpackPlugin([
{
// 来自(可以是对象，可以是String)
from: path.resolve(__dirname, '../static'),
// 走向(可以是对象，可以是String)
to: config.dev.assetsSubDirectory,
// 忽略此类文件
ignore: ['.*']
}
])
]
})

/**
* 模块导出(Promise)
*/
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {

if (err) {
reject(err)
} else {
// 发布新的端口，这是e2e测试所必需的
process.env.PORT = port
// 添加开发服务器到端口地址
devWebpackConfig.devServer.port = port

// 添加 FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))

resolve(devWebpackConfig)
}
})
})