| 提交 | 用户 | age | ||
| 3ac5f2 | 1 | 'use strict' |
| J | 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') | |
| 12 | ||
| 13 | const HOST = process.env.HOST | |
| 14 | const PORT = process.env.PORT && Number(process.env.PORT) | |
| 15 | ||
| 16 | const devWebpackConfig = merge(baseWebpackConfig, { | |
| 17 | module: { | |
| 18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) | |
| 19 | }, | |
| 20 | // cheap-module-eval-source-map is faster for development | |
| 21 | devtool: config.dev.devtool, | |
| 22 | ||
| 23 | // these devServer options should be customized in /config/index.js | |
| 24 | devServer: { | |
| 25 | clientLogLevel: 'warning', | |
| 26 | historyApiFallback: { | |
| 27 | rewrites: [ | |
| 28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, | |
| 29 | ], | |
| 30 | }, | |
| 31 | hot: true, | |
| 32 | contentBase: false, // since we use CopyWebpackPlugin. | |
| 33 | compress: true, | |
| 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 } | |
| 39 | : false, | |
| 40 | publicPath: config.dev.assetsPublicPath, | |
| 41 | proxy: config.dev.proxyTable, | |
| 42 | quiet: true, // necessary for FriendlyErrorsPlugin | |
| 43 | watchOptions: { | |
| 44 | poll: config.dev.poll, | |
| 45 | } | |
| 46 | }, | |
| 47 | plugins: [ | |
| 48 | new webpack.DefinePlugin({ | |
| 49 | 'process.env': require('../config/dev.env') | |
| 50 | }), | |
| 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', | |
| 58 | inject: true | |
| 59 | }), | |
| 60 | // copy custom static assets | |
| 61 | new CopyWebpackPlugin([ | |
| 62 | { | |
| 63 | from: path.resolve(__dirname, '../static'), | |
| 64 | to: config.dev.assetsSubDirectory, | |
| 65 | ignore: ['.*'] | |
| 66 | } | |
| 67 | ]) | |
| 68 | ] | |
| 69 | }) | |
| 70 | ||
| 71 | module.exports = new Promise((resolve, reject) => { | |
| 72 | portfinder.basePort = process.env.PORT || config.dev.port | |
| 73 | portfinder.getPort((err, port) => { | |
| 74 | if (err) { | |
| 75 | reject(err) | |
| 76 | } else { | |
| 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 | |
| 81 | ||
| 82 | // Add FriendlyErrorsPlugin | |
| 83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ | |
| 84 | compilationSuccessInfo: { | |
| 85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], | |
| 86 | }, | |
| 87 | onErrors: config.dev.notifyOnErrors | |
| 88 | ? utils.createNotifierCallback() | |
| 89 | : undefined | |
| 90 | })) | |
| 91 | ||
| 92 | resolve(devWebpackConfig) | |
| 93 | } | |
| 94 | }) | |
| 95 | }) | |
