xiaoben-as2-php/export-report-web/webpack.config.js

const path = require('path')

const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const htmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
  .BundleAnalyzerPlugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: {
    report: './src/report.js'
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    open: true,
    //开启HMR 功能
    hot: true,
    //表示就算 HMR 没有生效，也不刷新浏览器
    hotOnly: true,
    // host: '0.0.0.0'
  },
  // optimize: {
  //   concatenateModules: true
  // },
  module: {
    //只是js 和 babel 之间的桥梁，并没有编译的功能
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            //presets 预置 针对自己的项目
            /**
             * ,{
              "targets": {
                "browsers": ["last 2 versions", "safari >= 7"]
              },
              modules:false,
              useBuiltIns: 'usage',
              corejs:2
            }
             */
            presets: [['@babel/preset-env']],
            plugins: [['@babel/plugin-transform-runtime']]
          }
        }
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          /**
           * importLoaders:2
           * 如果没有这个选项 则只有在js 中引入的样式文件会走less 和 postcss 两个loader，在样式文件中通过import 引入别的样式文件则不会走less 和 postcss 两个loader
           * 加入这个选项是为了无论在哪里引入样式文件都会走下面两个loader
           */
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
              //css模块化 通过 import style from 'style.css' 然后页面上通过 style.module  的语法实现模块化，可以避免全局样式冲突
              //modules: true
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.(jpg|png|jpeg|svg)$/,
        use: {
          //url-loader非常类似 file-loader 只是多了一个limit 的限制，为了项目优化
          loader: 'url-loader',
          options: {
            limit: 1024 * 10,
            outputPath: 'image/'
          }
        }
      }
    ]
  },
  output: {
    //针对入口多文件打包占位符非常有用
    filename: '[name].js',
    path: path.resolve(__dirname, './dist')
  },
  externals: {
    jquery: 'jQuery'
  },
  plugins: [
    new MiniCssExtractPlugin(), //打包后运行 引入的是output里面所有生成的文件
    new htmlWebpackPlugin({
      template: './src/index.html'
    }),
    //需要删除的文件夹目录 --- 打包前运行['dist']
    new CleanWebpackPlugin(),
    //代码分析工具
    new BundleAnalyzerPlugin(),
    //去除压缩js的时候去除提示信息
    new UglifyJsPlugin({
      uglifyOptions: {
        warnings: false
      }
    }),
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
}