AIPlatform/webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
/*const HtmlWebpackInlineSourcePlugin=require('html-webpack-inline-source-plugin');*/
const CleanWebpackPlugin = require('clean-webpack-plugin') // 清空打包目录的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
const glob = require('glob');
const proxyHost = "http://192.168.2.236:5858";
// const proxyHost = "http://192.168.2.241:5858";
// const proxyHost = "http://192.168.4.222:5858";
// const proxyHost = "http://192.168.3.117:5858";//铁钢
// const proxyHost = "http://192.168.3.113:5858";//王峰

let entries = {vendor:'lodash'},plugines = [];
function getentries() {
  let entryFiles = glob.sync('./src/js/**/*.js')
  let htmls = glob.sync('./src/html/**/*.html');
  for (var i = 0; i < entryFiles.length; i++) {
    var filePath = entryFiles[i];
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
    entries[filename] = filePath;
  }
  for (var i = 0; i < htmls.length; i++) {
    var filePath = htmls[i];
    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
    let conf = {
      filename: filename + '.html',
      template: filePath, // html模板路径
      inject: true,
      chunks: [filename, 'vendor', 'common', 'scrollBar'],
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    };
    plugines.push(new HtmlWebpackPlugin(conf));
  }
}
getentries();

module.exports = {
  entry: entries,
  output: {
    publicPath: '/', //这里要放的是静态资源CDN的地址
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'
  },
  resolve: {
    extensions: [".js", ".css", ".json"],
    alias: {
      '@': path.resolve('./src'),
      '@src': path.resolve('./src'),
      '@less': path.resolve('./src/css'),
      '@images': path.resolve('./src/images'),
      '@js': path.resolve('./src/js'),
    } //配置别名可以加快webpack查找模块的速度
  },
  plugins: [ //多入口的html文件用chunks这个参数来区分
    ...plugines,
    new CopyWebpackPlugin([{
      from: 'src/resource',
      to: path.resolve(__dirname, 'dist', 'resource'),
      flatten: true, //false会拷贝原始文件夹路径
    }]),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: '[id].css'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin()
  ],
  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: {
    noParse: /WdatePicker/,
    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'],
           //plugins:["@babel/plugin-transform-runtime"]
          }
        }
      },
      {
        test: /\.css$/,
        use: [{
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [{
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader', 'less-loader'
        ]
      },
      {
        test: /\.(png|gif|jpg|jpeg|svg|eot|ttf|woff|woff2)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10240,
            esModule: false,
            name: '[name]_[hash:6].[ext]',
            outputPath: 'images/'
          }
        }],
        exclude: /node_modules/
      }, {
        test: /.html$/,
        use: 'html-withimg-loader'
      }
    ]
  },
  // devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map   //生产环境cheap-module-source-map
  mode: 'development',
  devServer: {
    contentBase: "./dist", //静态文件根目录
    proxy: {
      '/': proxyHost
    },
    hot: true,
    openPage: 'login.html'
  }
}