lixin-web/webpack.config.js

vue and bootstrap

const path = require("path");
const webpack = require("webpack");
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
const WebpackMd5Hash = require("webpack-md5-hash");
const Dashboard = require("webpack-dashboard");
const DashboardPlugin = require("webpack-dashboard/plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const OpenBrowserPlugin = require("open-browser-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
const { host, port, url, api } = require("./build/config");
const vueConfig = require("./build/vue-loader.config");
module.exports = () => {
  // const isDevEnv = env ? env.dev : false
  const isDevEnv = process.env.NODE_ENV === "dev";

  const root = "webapp";

  var entry = {
    lx: `./${root}/js`,
    lottery: `./${root}/js/lottery.js`,
    admin: `./${root}/js/admin.js`,
    // 'data-report-bridge': `./${root}/js/data-report-bridge`
  };

  if (isDevEnv) {
    entry.layout = `./${root}/js/layout.js`;
  }

  const extractCss = new ExtractTextPlugin("css/[name].min.css");

  var webpackConf = {
    entry,
    output: {
      path: path.resolve(__dirname, `${root}/dist`),
      pathinfo: isDevEnv,
      filename: "js/[name].bundle.js",
      publicPath: "/dist/",
      chunkFilename: "js/chuck/[id].[chunkhash:7].js",
      jsonpFunction: "lxJsonp"
    },
    // externals: {
    //   jquery: 'jQuery'
    // },
    module: {
      rules: [
        {
          test: /\.(jpe?g|png|gif|svg)$/i,
          exclude: [
            /.preload\.(jpe?g|png)$/i,
            path.resolve(__dirname, `${root}/css/_gaga_temp`)
          ],
          use: [
            `${isDevEnv ? "file-loader?name=img/[name].[ext]" : "url-loader?limit=6000&name=img/[hash:7].[ext]"}`,
            "img-loader?minimize"
          ]
        },
        {
          test: /\.(jpe?g|png|gif|svg)$/i,
          include: path.resolve(__dirname, `${root}/css/_gaga_temp`),
          use: [
            `file-loader?name=img/[${isDevEnv ? "name" : "hash:7"}].[ext]`,
            "img-loader?minimize"
          ]
        },
        {
          test: /\.(jpe?g|png|webp)$/i,
          include: /.preload\.(jpe?g|png|webp)$/i,
          use: ["file-loader?name=img/[name].[ext]", "img-loader?minimize"]
        },
        {
          test: /\.(ttf|eot|svg|otf|woff(2)?)(\?[a-z0-9=&.]+)?$/,
          loader: `file-loader?name=font/[${isDevEnv ? "name" : "hash:7"}].[ext]`
        },
        {
          test: /\.vue$/,
          exclude: path.resolve(__dirname, `${root}/component/backup`),
          loader: "vue-loader",
          options: vueConfig
        },
        {
          test: /\.html$/,
          loader: "html-loader"
        },
        {
          test: /(iview.src).*?js$/,
          loader: "babel-loader"
        },
        {
          test: /\.jsx?$/,
          // exclude: /node_modules/,
          include: [
            path.resolve(__dirname, `${root}/js`),
            path.resolve(__dirname, `${root}/store`),
            path.resolve(__dirname, `${root}/router`),
            path.resolve(__dirname, `${root}/component`)
          ],
          loader: "babel-loader"
        },
        {
          test: /\.css$/,
          use: isDevEnv
            ? ["style-loader", "css-loader"]
            : extractCss.extract({
                use: [
                  {
                    loader: "css-loader"
                  }
                ]
              })
        },
        {
          test: /\.less$/,
          use: isDevEnv
            ? ["style-loader", "css-loader", "less-loader"]
            : extractCss.extract({
                use: [
                  {
                    loader: "css-loader"

                    // options: {

                    //   minimize:{discardComments: {removeAll: true}}

                    // }
                  },
                  {
                    loader: "less-loader"
                  }
                ]
              })
        },
        {
          test: /\.scss$/,
          use: isDevEnv
            ? ["style-loader", "css-loader", "sass-loader"]
            : extractCss.extract({
                use: [
                  {
                    loader: "css-loader"
                  },
                  {
                    loader: "sass-loader"
                  }
                ]
              })
        }
      ]
    },
    resolve: {
      extensions: [".js", ".jsx", ".json", ".vue"],
      alias: {
        _Will: path.resolve(__dirname, "webapp/js/util/Will"),
        _vuex: path.resolve(__dirname, "webapp/js/vuex"),
        "vue-mixins": path.resolve(__dirname, "webapp/js/mixins")
      }
    },
    resolveLoader: {
      moduleExtensions: ["-loader"]
    },
    plugins: [
      new CommonsChunkPlugin({
        name: "commons",
        chunks: Object.keys(entry).filter(i => i !== 'layout')
      }),
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
      }),
      new webpack.DefinePlugin({
        isDevEnv
      }),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new LodashModuleReplacementPlugin({ collections: true }),
      new WebpackMd5Hash(),
      new webpack.optimize.ModuleConcatenationPlugin()
    ],
    devServer: {
      contentBase: `${root}/`,
      staticOptions: {
        index: "login.html"
      },
      host,
      port,
      quiet: true,
      proxy: {
        "/api/*": {
          target: api
        }
      }
    }
  };

  if (isDevEnv) {
    webpackConf.plugins.push(
      //different webpack-dev-server --open ,not to force yourself to open a new tab when Webpack is ready to play!
      new OpenBrowserPlugin({
        url
      }),
      // new DashboardPlugin(new Dashboard().setData),
      new webpack.LoaderOptionsPlugin({
        debug: true
      })
    );

    Object.assign(webpackConf, {
      // fast but can not debug
      // devtool: '#cheap-eval-source-map',
      devtool: "#cheap-source-map",
      performance: {
        hints: false
      }
    });
  } else {
    // vueConfig.loaders = {
    //   css: ExtractTextPlugin.extract({
    //     use: 'css-loader?minimize!postcss-loader',
    //     fallback: 'vue-style-loader' // <- this is a dep of vue-loader
    //   }),
    //   less: ExtractTextPlugin.extract({
    //     use: 'css-loader?minimize!postcss-loader!less-loader',
    //     fallback: 'vue-style-loader' // <- this is a dep of vue-loader
    //   }),
    //   scss: ExtractTextPlugin.extract({
    //     use: 'css-loader?minimize!postcss-loader!sass-loader',
    //     fallback: 'vue-style-loader' // <- this is a dep of vue-loader
    //   }),
    // }
    webpackConf.plugins.push(
      extractCss
      //HtmlWebpackPlugin webpack 3 bug
      // ,new HtmlWebpackPlugin(),
      // new PreloadWebpackPlugin({
      //   include: ['report-bridge']
      // })
    )

    if(!process.env.npm_config_uncompress){
      const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
      webpackConf.plugins.push(
        // new UglifyJsPlugin({
        //   compress: {
        //     warnings: false,
        //     drop_console: true,
        //     drop_debugger: true
        //   },
        //   output: { comments: false }
        // }),
        new ParallelUglifyPlugin({
          uglifyJS: {
            // These pass straight through to uglify.
            compress: {
              warnings: false,
              drop_console: true,
              drop_debugger: true
            },
            output: { comments: false }
          },
        })
      );
    }



    if (process.env.npm_config_report) {
      const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
        .BundleAnalyzerPlugin;
      webpackConf.plugins.push(
        new BundleAnalyzerPlugin({ analyzerMode: "static" })
      );
    }

    if (process.env.npm_config_icon) {
      const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
      webpackConf.plugins.push(
        new FaviconsWebpackPlugin({
          logo: `./${root}/img/icon-app.png`,
          emitStats: true,
          prefix: "icons/",
          // The name of the json containing all favicon information
          statsFilename: "iconstats.json",
          icons: {
            firefox: false,
            appleStartup: false
          }
        })
      );
    }
  }

  return webpackConf;
};