minix-template/build/webpack.dev.conf.js

minix template

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const fs = require('fs')
const ip = require('ip').address()
const { merge } = require('webpack-merge')
const webpackCommonConf = require('./webpack.common.conf')
const { webpack } = require('webpack')

const watchMode =
  (process.env.watchMode && process.env.watchMode === 'true') || true

function generateEntry(projectName) {
  let entries = fs.readdirSync(
    path.resolve(__dirname, `../src/${projectName}/pages`)
  )
  return entries
}

module.exports = (env) => {
  const { projectName = 'rich' } = env || process.env.projectName
  let urlWithPagePath = generateEntry(projectName).join('|')
  let bundleConfig = merge(webpackCommonConf(env), {
    mode: 'development',
    devtool: 'nosources-source-map',
    watch: watchMode,
  })
  webpack(bundleConfig, (err, stats) => {
    if (err) {
      console.error('COMPILE ERROR', err.stack)
    }
  })

  let devConfig = merge(webpackCommonConf(env), {
    // watch: true,
    watchOptions: {
      aggregateTimeout: 10,
      poll: false,
      ignored: /node_modules/,
    },
    mode: 'development',
    output: {
      publicPath: path.join(
        __dirname,
        '..',
        `src/${env.projectName || 'rich'}/dist`
      ),
    },
    // devtool: 'inline-source-map',
    devtool: 'nosources-source-map', // fix:开发模式远程调试
    devServer: {
      static: [
        {
          directory: path.join(__dirname, '..', 'public'),
        },
        {
          directory: path.join(
            __dirname,
            '..',
            `src/${env.projectName || 'rich'}/dist`
          ),
        },
      ],
      open: [
        `/web/preview.html?page=app.js&entrys=${encodeURI(
          urlWithPagePath
        )}&projectName=${projectName}`,
      ],
      hot: true,
      host: ip,
      port: 9000,
      compress: true,
      historyApiFallback: true,
      client: {
        logging: 'info',
        overlay: true,
        progress: true,
      },
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/web/index.html',
        hash: true,
        title: 'minix',
      }),
    ],
    stats: {
      colors: true,
    },
  })
  // console.log('devConfig', JSON.stringify(devConfig, null, 4))
  return devConfig
}