akfun/src/webpack/webpack.dev.conf.js

前端脚手架：支持Vue技术栈和react技术栈

const webpack = require('webpack');
const path = require('path');
const { merge } = require('webpack-merge');
const utils = require('./loaderUtils');
const getBaseWebpackConfig = require('./webpack.base.conf'); // 获取webpack基本配置
const getProjectConfig = require('../config/index'); // 用于获取当前项目配置文件
const entrys2htmlWebpackPlugin = require('../utils/entrys2htmlWebpackPlugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = (akfunConfig) => {
  let config = akfunConfig || getProjectConfig(); // 优先使用外部传进来的项目配置
  const curEnvConfig = config.dev || {}; // 当前执行环境配置
  // 获取webpack基本配置
  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig, config, 'dev');
  const curWebpackConfig = config.webpack || {};

  // 获取页面模板地址
  let curHtmlTemplate = path.resolve(__dirname, '../initData/template/index.html');
  if (curWebpackConfig.template) {
    curHtmlTemplate = curWebpackConfig.template; // akfun.config.js中的webpack配置
  }

  let curTarget = ['web', 'es5'];
  if (curWebpackConfig.target) {
    curTarget = curWebpackConfig.target; // akfun.config.js中的webpack配置
  }

  const webpackDevConfig = merge(baseWebpackConfig, {
    target: curTarget,
    mode: curEnvConfig.NODE_ENV, // development模式，会启动NamedChunksPlugin、NamedModulesPlugin服务
    output: {
      publicPath: curEnvConfig.assetsPublicPath // 引用地址：配置发布到线上资源的URL前缀
    },
    resolve: {
      // dev环境默认使用 require
      conditionNames: ['require'],
      ...baseWebpackConfig.resolve
    },
    module: {
      rules: utils.styleLoaders({
        envConfig: curEnvConfig, // 当前环境变量
        webpackConfig: curWebpackConfig // 当前webpack配置
      })
    },
    // devtool: '#cheap-module-eval-source-map', // 本地开发环境中的取值
    devtool: curEnvConfig.productionSourceMap ? curEnvConfig.devtool || 'eval-source-map' : 'eval', // 开发环境
    optimization: {
      chunkIds: 'named', // named 对调试更友好的可读的 id。
      emitOnErrors: true
      // minimize: false
    },
    plugins: []
  });

  if (!curEnvConfig.closeHotReload) {
    // 开启热更新能力
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    webpackDevConfig.plugins.push(new webpack.HotModuleReplacementPlugin());

    // 所有入口文件添加 热更新入口文件
    if (webpackDevConfig.entry) {
      const devClientPath = path.resolve(__dirname, '../dev-client'); // 从 akfun 中获取
      // add hot-reload related code to entry chunks
      Object.keys(webpackDevConfig.entry).forEach((name) => {
        webpackDevConfig.entry[name] = [devClientPath].concat(webpackDevConfig.entry[name]);
      });
    }
  }

  // 支持 cssExtract 配置
  if (curEnvConfig.cssExtract || curEnvConfig.cssExtract === undefined) {
    webpackDevConfig.plugins.push(
      new MiniCssExtractPlugin({
        // filename: utils.assetsPath('index.css'),
        filename: '[name].css',
        chunkFilename: '[name].css',
        ignoreOrder: false
      })
    );
  }

  if (!curEnvConfig.closeHtmlWebpackPlugin) {
    // 使用用户自定义的多入口配置，生产对应的多页面多模板（优先使用用户的自定义页面模板）
    const htmlWebpackPluginList = entrys2htmlWebpackPlugin(webpackDevConfig.entry, curHtmlTemplate);
    htmlWebpackPluginList.forEach((htmlWebpackPlugin) => {
      webpackDevConfig.plugins.push(htmlWebpackPlugin);
    });
  }

  // 判断当前环境是否有自定义plugins
  if (curEnvConfig.plugins && Array.isArray(curEnvConfig.plugins)) {
    // 添加自定义webpack插件
    webpackDevConfig.plugins.push(...curEnvConfig.plugins);
  }

  return webpackDevConfig;
};