'use strict' const path = require('path') const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const baseWebpackConfig = require('./webpack.base.conf') const HtmlWebpackPlugin = require('html-webpack-plugin') function resolve(dir) { return path.join(__dirname, '..', dir) } const HOST = process.env.HOST const PORT = process.env.PORT && Number(process.env.PORT) const devEnv = require('../config/dev.env') const devWebpackConfig = merge(baseWebpackConfig, { mode: 'development', module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) }, // cheap-module-eval-source-map is faster for development devtool: config.dev.devtool, // these devServer options should be customized in /config/index.js devServer: { clientLogLevel: 'warning', historyApiFallback: true, hot: true, compress: true, host: HOST || config.dev.host, port: PORT || config.dev.port, open: config.dev.autoOpenBrowser, overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false, publicPath: devEnv.ASSETS_PUBLIC_PATH, proxy: config.dev.proxyTable, watchOptions: { poll: config.dev.poll }, headers: { 'content-security-policy': "base-uri 'self'; frame-ancestors 'none'; img-src 'self' data: https: http:; media-src 'self' https:; style-src 'self' 'unsafe-inline'; font-src 'self'; manifest-src 'self'; script-src 'self';" } }, plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env') }), new webpack.HotModuleReplacementPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, favicon: resolve('favicon.ico'), title: 'Admin FE', templateParameters: { BASE_URL: devEnv.ASSETS_PUBLIC_PATH + config.dev.assetsSubDirectory, }, }), ] }) module.exports = new Promise((resolve, reject) => { resolve(devWebpackConfig) })