knowledgeMap/webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin') // 清空打包目录的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');
// const proxyHost = "http://173.18.12.195:5050";
const proxyHost = "http://173.18.12.205:8086/healsphere";
// const proxyHost = "http://192.168.3.113:5050";
// const proxyHost = "http://173.18.12.192:5050";
module.exports = {
  entry: {
    index: path.resolve(__dirname, 'src/js', 'index.js'),
    knowledgeTree: path.resolve(__dirname, 'src/js', 'knowledgeTree.js'),
    participle: path.resolve(__dirname, 'src/js', 'participle.js'),
    qaPage: path.resolve(__dirname, 'src/js', 'qaPage.js'),
    medicalTermMap: path.resolve(__dirname, 'src/js', 'medicalTermMap.js'),
    login: path.resolve(__dirname, 'src/js', 'login.js'),
    home: path.resolve(__dirname, 'src/js', 'home.js'),
    knowledgeUpdate: path.resolve(__dirname, 'src/js', 'knowledgeUpdate.js'),
    homeMini: path.resolve(__dirname, 'src/js', 'homeMini.js'),
    vendor: 'lodash'// 多个页面所需的公共库文件，防止重复打包带入
  },
  output: {
    publicPath: '/', //这里要放的是静态资源CDN的地址
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'
  },
  resolve: {
    extensions: [".js", ".css", ".json"],
    alias: {} //配置别名可以加快webpack查找模块的速度
  },
  plugins: [// 多入口的html文件用chunks这个参数来区分
    new HtmlWebpackPlugin({
      title: '医学知识图谱',
      template: path.resolve(__dirname, 'src/html', 'knowledgeGraph.html'),
      filename: 'knowledgeGraph.html',
      chunks: ['index', 'vendor', 'common'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({
      title: '图谱数据统计',
      template: path.resolve(__dirname, 'src/html', 'graphDataStatistics.html'),
      filename: 'graphDataStatistics.html',
      chunks: ['graphDataStatistics', 'vendor', 'common'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({
      title: '简化更新',
      template: path.resolve(__dirname, 'src/html', 'homeMini.html'),
      filename: 'homeMini.html',
      chunks: ['homeMini', 'vendor', 'common'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({
      title: '登录界面',
      template: path.resolve(__dirname, 'src/html', 'login.html'),
      filename: 'login.html',
      chunks: ['login', 'vendor', 'common'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({
      title: '主页',
      template: path.resolve(__dirname, 'src/html', 'home.html'),
      filename: 'home.html',
      chunks: ['home', 'vendor', 'common'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({
      title: '知识更新',
      template: path.resolve(__dirname, 'src/html', 'knowledgeUpdate.html'),
      filename: 'knowledgeUpdate.html',
      chunks: ['knowledgeUpdate', 'vendor', 'common'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({
      title: '描述框架',
      template: path.resolve(__dirname, 'src/html', 'knowledgeTree.html'),
      filename: 'knowledgeTree.html',
      chunks: ['knowledgeTree', 'vendor', 'common'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({
      title: '电子病历信息抽取',
      template: path.resolve(__dirname, 'src/html', 'participle.html'),
      filename: 'participle.html',
      chunks: ['participle', 'vendor', 'common'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({
      title: '智能问答',
      template: path.resolve(__dirname, 'src/html', 'qaPage.html'),
      filename: 'qaPage.html',
      chunks: ['qaPage', 'vendor', 'common'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({
      title: '医学术语映射',
      template: path.resolve(__dirname, 'src/html', 'medicalTermMap.html'),
      filename: 'medicalTermMap.html',
      chunks: ['medicalTermMap', 'vendor', 'common'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    //作用：把public 里面的内容全部拷贝到编译目录
    new CopyWebpackPlugin([{
      from: __dirname + '/src/public',
      to: __dirname + '/dist'
    }]),
    new CopyWebpackPlugin([
      {
        from: 'src/resources',
        to: path.resolve(__dirname, 'dist', 'resources'),
        flatten: true,   //false会拷贝原始文件夹路径
      }
    ]),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: '[id].css'
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(),
    new ExtractTextPlugin("stylesheets/[name].css"),
  ],
  optimization: { //webpack4.x的最新优化配置项，用于提取公共代码
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          ie8: true,
          compress: {
            properties: false,
            warnings: false
          },
          mangle: {
            screw_ie8: false,
            except: ['e']
          },
          output: {
            beautify: true
          },
          sourceMap: false
        }
      })
    ],
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: "initial",
          name: "common",
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0, // This is example is too small to create commons chunks
          reuseExistingChunk: true // 可设置是否重用该chunk
        }
      }
    }
  },

  module: {
    rules: [
      {
        // test: /.js$/,
        // enforce: 'post',
        // loader: 'es3ify-loader'
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            // {
            //   loader: MiniCssExtractPlugin.loader
            // },
            'css-loader'
          ]
        })
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            // {
            //   loader: 'style-loader', // creates style nodes from JS strings
            // },
            {
              loader: 'css-loader', // translates CSS into CommonJS
            },
            {
              loader: 'less-loader', // compiles Less to CSS
            },
          ],
        })

      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'images/', // 图片输出的路径和存储路径保持一致
            limit: 10000,
            name: '[name].[ext]'
          }
        }
      }
    ]
  },
  // devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map   //生产环境cheap-module-source-map
  mode: 'development',
  devServer: {
    // host: "172.16.8.57",
    contentBase: "./dist", //静态文件根目录
    proxy: {
      '/api': {
        target: proxyHost,
        pathRewrite: {
          '^/api': ''  // 重写路径，去掉/api前缀
        },
      },
      '/kg': { //知识图谱统计API
        target: "http://173.18.12.205:8086/healsphere",
        changeOrigin: true,
      }
    },
    hot: true,
    openPage: 'home.html'

  }
}