2 const utils = require('./utils')
3 const webpack = require('webpack')
4 const config = require('../config')
5 const merge = require('webpack-merge')
6 const path = require('path')
7 const baseWebpackConfig = require('./webpack.base.conf')
8 const CopyWebpackPlugin = require('copy-webpack-plugin')
9 const HtmlWebpackPlugin = require('html-webpack-plugin')
10 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 const portfinder = require('portfinder')
13 const HOST = process.env.HOST
14 const PORT = process.env.PORT && Number(process.env.PORT)
16 const devWebpackConfig = merge(baseWebpackConfig, {
18 rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
20 // cheap-module-eval-source-map is faster for development
21 devtool: config.dev.devtool,
23 // these devServer options should be customized in /config/index.js
25 clientLogLevel: 'warning',
28 { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
32 contentBase: false, // since we use CopyWebpackPlugin.
34 host: HOST || config.dev.host,
35 port: PORT || config.dev.port,
36 open: config.dev.autoOpenBrowser,
37 overlay: config.dev.errorOverlay
38 ? { warnings: false, errors: true }
40 publicPath: config.dev.assetsPublicPath,
41 proxy: config.dev.proxyTable,
42 quiet: true, // necessary for FriendlyErrorsPlugin
44 poll: config.dev.poll,
48 new webpack.DefinePlugin({
49 'process.env': require('../config/dev.env')
51 new webpack.HotModuleReplacementPlugin(),
52 new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 new webpack.NoEmitOnErrorsPlugin(),
54 // https://github.com/ampedandwired/html-webpack-plugin
55 new HtmlWebpackPlugin({
56 filename: 'index.html',
57 template: 'index.html',
60 // copy custom static assets
61 new CopyWebpackPlugin([
63 from: path.resolve(__dirname, '../static'),
64 to: config.dev.assetsSubDirectory,
71 module.exports = new Promise((resolve, reject) => {
72 portfinder.basePort = process.env.PORT || config.dev.port
73 portfinder.getPort((err, port) => {
77 // publish the new Port, necessary for e2e tests
78 process.env.PORT = port
79 // add port to devServer config
80 devWebpackConfig.devServer.port = port
82 // Add FriendlyErrorsPlugin
83 devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 compilationSuccessInfo: {
85 messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
87 onErrors: config.dev.notifyOnErrors
88 ? utils.createNotifierCallback()
92 resolve(devWebpackConfig)