icssDService/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 webpack = require('webpack');
const proxyHost = "http://192.168.2.236:5050";

module.exports = {
  entry: {
    index: path.resolve(__dirname, 'src', 'index.js'),
    page: path.resolve(__dirname, 'src', 'page.js'),
    information: path.resolve(__dirname, 'src/js', 'information.js'),
    disclaimer: path.resolve(__dirname, 'src/js', 'disclaimer.js'),
    scale: path.resolve(__dirname, 'src/js', 'scale.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: 'index',
      template: path.resolve(__dirname, 'src/html', 'index.html'),
      filename: 'index.html',
      chunks: ['index', 'vendor', 'common'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({
      title: 'page',
      template: path.resolve(__dirname, 'src/html', 'page.html'),
      filename: 'page.html',
      chunks: ['page', 'vendor', 'common'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({
      title: 'information',
      template: path.resolve(__dirname, 'src/html', 'information.html'),
      filename: 'information.html',
      chunks: ['information', 'vendor', 'common'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({
      title: 'drugInfo',
      template: path.resolve(__dirname, 'src/html', 'drugInfo.html'),
      filename: 'drugInfo.html',
      chunks: ['drugInfo', 'vendor', 'common'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({
      title: 'disclaimer',
      template: path.resolve(__dirname, 'src/html', 'disclaimer.html'),
      filename: 'disclaimer.html',
      chunks: ['vendor', 'common', 'disclaimer'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({
      title: 'scale',
      template: path.resolve(__dirname, 'src/html', 'scale.html'),
      filename: 'scale.html',
      chunks: ['vendor', 'common', 'scale'],
      inject: true,
      hash: true, //防止缓存
      minify: {
        removeAttributeQuotes: true, //压缩 去掉引号
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true //删除空白符与换行符
      }
    }),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: 'css/[name].css',
      chunkFilename: '[id].css',
    }),
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(),
  ],
  optimization: { //webpack4.x的最新优化配置项，用于提取公共代码
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          warnings: false,
          parse: {},
          compress: {},
          mangle: true, // Note `mangle.properties` is `false` by default.
          output: null,
          toplevel: false,
          nameCache: null,
          ie8: true,
          keep_fnames: 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: [{// 多个loader是有顺序要求的，从右往左写，因为转换的时候是从右往左转换的
        test: /\.js$/,
        use: "imports-loader?$=jquery"
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it uses publicPath in webpackOptions.output
            },
          },
          'css-loader',
        ],
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      { //file-loader 解决css等文件中引入图片路径的问题
        // url-loader 当图片较小的时候会把图片BASE64编码，大于limit参数的时候还是使用file-loader 进行拷贝
        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: {
    contentBase: path.join(__dirname, "dist"), //静态文件根目录
    proxy: {
      '/api': proxyHost
    },
    hot: true
  }
}