tqv-data-operation-screen/config/webpack.common.js

/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable no-undef */
/* 动态打包(dynamically bundle)
所有依赖项（创建所谓的依赖图(dependency graph)） */
const path = require("path");
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');


const plugins = [
  //编译进度条
  new ProgressBarPlugin(),
  new MonacoWebpackPlugin({
    'vs/nls': { availableLanguages: { '*': 'zh-cn' } },
    languages: ['sql', 'javascript']
  }),
  new HtmlWebpackPlugin({
    title: "运营数据中心",
    filename: "transfer.html",
    stylefile: path.resolve(__dirname, "../src/assets/css/common.css"),
    template: path.resolve(__dirname, "../public/index.html"),
    meta: {
      charset: "utf-8",
    },
    rootEl: "<div id='app'></div>",
    favicon: path.resolve(__dirname,"../public/favicon.ico"),
    globalApi: path.resolve(__dirname,"../public/baseUrlConfig.js"),
    publicPath: './'
  }),
  new HtmlWebpackPlugin({
    filename: "index.html",
    template: path.resolve(__dirname, "../public/transfer.html"),
    inject: false
  }),
];
const name_ = 'data-operation-screen/'
module.exports = {
  entry: [path.resolve(__dirname, "../src/index.js")],
  output: {
    filename: 'static/js/[name].[hash].js',
    chunkFilename: `static/js/[name].[chunkhash:8].js`,
    // filename: '[name].js',
    // chunkFilename: `[name].[chunkhash:8].js`,
    path: path.join(__dirname, '../dist'),
  },
  plugins,
  resolve: {
    alias: {
      "@assets": path.resolve(__dirname, "../src/assets/"),
      "@mock": path.resolve(__dirname, "../src/mock/"),
      "@pages": path.resolve(__dirname, "../src/pages/"),
      "@store": path.resolve(__dirname, "../src/store/"),
      "@components": path.resolve(__dirname, "../src/components/"),
      "@router": path.resolve(__dirname, "../src/router/"),
      "@apis": path.resolve(__dirname, "../src/apis/"),
      "@utils": path.resolve(__dirname, "../src/utils/"),
      "@config": path.resolve(__dirname, '../src/config'),
      "@themes": path.join(__dirname, '../src/themes'),
      "@widget": path.join(__dirname, '../src/widget'),
    },
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    extensions: [".js", ".jsx", '.less', '.css']
  },
  module: {
    rules: /* 使用规则 */[
      // images
      {
        test: /* 匹配文件 */ /\.jpg|\.jpeg|\.png|\.gif|\.svg|\.ico/,
        include: [path.resolve(__dirname, "../src"), path.resolve(__dirname, "../public")],
        use: /* 使用loader */[{
          loader: "url-loader",
          options: /* 加载器相关的配置项 */ {
            name: 'static/[name].[ext]',
            limit: /* <=limit的图片转换成base64 */ 10000,
            mimetype: "image/jpg|image|gif/png|image/ico",
            fallback: 'file-loader',
            publicPath: '../../' //采用根路径
          },
        },
        ],
      },
      {
        test: /* 匹配文件 */ /\.gif/,
        include: [path.resolve(__dirname, "../node_modules")],
        use: /* 使用loader */[{
          loader: "url-loader",
          options: /* 加载器相关的配置项 */ {
            name: 'static/[name].[ext]',
            limit: /* <=limit的图片转换成base64 */ 10000,
            mimetype: "gif",
            fallback: 'file-loader',
            publicPath: '../../' //采用根路径
          },
        },
        ],
      },
      {
        test: /* 匹配文件 */ /\.svg/,
        include: [path.resolve(__dirname, "../src")],
        use: /* 使用loader */[{
          loader: "file-loader",
          options: /* 加载器相关的配置项 */ {
            name: 'static/[name].[ext]',
            publicPath: '../../' //采用根路径
          },
        },
        ],
      },
      {
        test: /\.(woff|woff2|ttf|eot)$/,
        // loader: 'file-loader?name=[name].[hash].[ext]'
        use: [{
          loader: 'file-loader',
          options: {
            name: 'static/[name].[ext]',
            publicPath: '../../'
          },
        }],
      },
      { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/, 
        // use: 'file-loader' ,
        use: [{
          loader: 'file-loader',
          options: {
            name: name_+'static/[name].[ext]',
            publicPath: '../../'
          },
        }],
      },
      // babel
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
            plugins: ["@babel/plugin-transform-runtime"],
          },
        },
      },
    ],
  }

};