ers/config/webpack.config.prod.js

/*
 * @Author: Eward 
 * @Date: 2017-08-17 21:30:40 
 * @Last Modified by: Eward
 * @Last Modified time: 2017-10-27 15:22:24
 */
"use strict";

const fs = require("fs"); //eward
const autoprefixer = require("autoprefixer");
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");
const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin");
const eslintFormatter = require("react-dev-utils/eslintFormatter");
const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const paths = require("./paths");
const getClientEnvironment = require("./env");
const os = require("os");
const HappyPack = require("happypack");
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
const AutoDllPlugin = require("autodll-webpack-plugin");
const ParallelUglifyPlugin = require("webpack-parallel-uglify-plugin");

const publicPath = paths.servedPath;
const shouldUseRelativeAssetPaths = publicPath === "./";
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
const publicUrl = publicPath.slice(0, -1);
const env = getClientEnvironment(publicUrl);

if (env.stringified["process.env"].NODE_ENV !== '"production"') {
  throw new Error("Production builds must have NODE_ENV=production.");
}

const cssFilename = "static/css/[name].[contenthash:8].css";

const extractTextPluginOptions = shouldUseRelativeAssetPaths
  ? // Making sure that the publicPath goes back to to build folder.
    { publicPath: Array(cssFilename.split("/").length).join("../") }
  : {};

const alias =
  (fs.existsSync(paths.appConfig) && require(paths.appConfig).alias) || {};

for (let i in alias) {
  alias[i] = paths.appSrc + alias[i];
}

/** ----  ---- by Eward */
const modifyVars =
  (fs.existsSync(paths.appConfig) && require(paths.appConfig).modifyVars) || {};
const moreLoaders =
  (fs.existsSync(paths.appConfig) && require(paths.appConfig).loaders) || [];
const moredPlugins =
  (fs.existsSync(paths.appConfig) && require(paths.appConfig).prodPlugins) ||
  [];
const tempVendors = require(paths.appConfig).vendors || [];

let vendors = {
  vendors: []
};
if (Array.isArray(tempVendors)) {
  vendors = {
    vendors: tempVendors
  };
}
if (tempVendors.toString() === "[object Object]") {
  vendors = tempVendors;
}
/** ----  ---- by Eward */

module.exports = {
  bail: true,
  devtool: shouldUseSourceMap ? "source-map" : false,
  entry: [require.resolve("./polyfills"), paths.appIndexJs],
  output: {
    path: paths.appBuild,
    filename: "static/js/[name].[chunkhash:8].js",
    chunkFilename: "static/js/[name].[chunkhash:8].chunk.js",
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
      path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, "/")
  },
  resolve: {
    modules: ["node_modules", paths.appNodeModules].concat(
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),
    extensions: [
      ".web.js",
      ".js",
      ".json",
      ".web.jsx",
      ".jsx",
      ".web.ts",
      ".ts",
      ".web.tsx",
      ".tsx"
    ],
    alias: Object.assign(
      //eward
      {},
      {
        "babel-runtime": path.dirname(
          require.resolve("babel-runtime/package.json")
        ),
        "react-native": "react-native-web"
      },
      alias
    ),
    plugins: [new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson])]
  },
  module: {
    strictExportPresence: true,
    rules: [
      {
        test: /\.(js|jsx)$/,
        enforce: "pre",
        use: [
          {
            options: {
              formatter: eslintFormatter,
              eslintPath: require.resolve("eslint")
            },
            loader: require.resolve("eslint-loader")
          }
        ],
        include: paths.appSrc
      },
      {
        test: /\.(ts|tsx)$/,
        loader: require.resolve("tslint-loader"),
        enforce: "pre",
        include: paths.appSrc
      },
      {
        oneOf: [
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            loader: require.resolve("url-loader"),
            options: {
              limit: 10000,
              name: "static/media/[name].[hash:8].[ext]"
            }
          },
          {
            test: /\.(js|jsx)$/,
            include: paths.appSrc,
            loaders: ["happypack/loader"]
          },
          {
            test: /\.(ts|tsx)$/,
            include: paths.appSrc,
            loader: [
              require.resolve("babel-loader"),
              require.resolve("ts-loader")
            ]
          },
          {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract(
              Object.assign(
                {
                  fallback: require.resolve("style-loader"),
                  use: [
                    {
                      loader: require.resolve("css-loader"),
                      options: {
                        importLoaders: 1,
                        minimize: true,
                        sourceMap: shouldUseSourceMap
                      }
                    },
                    {
                      loader: require.resolve("postcss-loader"),
                      options: {
                        ident: "postcss",
                        plugins: () => [
                          require("postcss-flexbugs-fixes"),
                          autoprefixer({
                            browsers: [
                              ">1%",
                              "last 4 versions",
                              "Firefox ESR",
                              "not ie < 9" // React doesn't support IE8 anyway
                            ],
                            flexbox: "no-2009"
                          })
                        ]
                      }
                    }
                  ]
                },
                extractTextPluginOptions
              )
            )
          },
          //新增对module less的支持
          {
            //eward
            test: /\.module\.less$/,
            loader: ExtractTextPlugin.extract(
              Object.assign(
                {
                  fallback: require.resolve("style-loader"),
                  use: [
                    {
                      loader: require.resolve("css-loader"),
                      options: {
                        importLoaders: 1,
                        minimize: true,
                        sourceMap: shouldUseSourceMap,
                        modules: true,
                        localIdentName: "[local]___[hash:base64:5]"
                      }
                    },
                    {
                      loader: require.resolve("postcss-loader"),
                      options: {
                        ident: "postcss",
                        plugins: () => [
                          require("postcss-flexbugs-fixes"),
                          autoprefixer({
                            browsers: [
                              ">1%",
                              "last 4 versions",
                              "Firefox ESR",
                              "not ie < 9" // React doesn't support IE8 anyway
                            ],
                            flexbox: "no-2009"
                          })
                        ]
                      }
                    },
                    {
                      loader: require.resolve("less-loader"),
                      options: {
                        modifyVars: modifyVars
                      }
                    }
                  ]
                },
                extractTextPluginOptions
              )
            )
          },
          //新增对less的支持
          {
            //eward
            test: /\.less$/,
            loader: ExtractTextPlugin.extract(
              Object.assign(
                {
                  fallback: require.resolve("style-loader"),
                  use: [
                    {
                      loader: require.resolve("css-loader"),
                      options: {
                        importLoaders: 1,
                        minimize: true,
                        sourceMap: shouldUseSourceMap
                      }
                    },
                    {
                      loader: require.resolve("postcss-loader"),
                      options: {
                        ident: "postcss",
                        plugins: () => [
                          require("postcss-flexbugs-fixes"),
                          autoprefixer({
                            browsers: [
                              ">1%",
                              "last 4 versions",
                              "Firefox ESR",
                              "not ie < 9" // React doesn't support IE8 anyway
                            ],
                            flexbox: "no-2009"
                          })
                        ]
                      }
                    },
                    {
                      loader: require.resolve("less-loader"),
                      options: {
                        modifyVars: modifyVars
                      }
                    }
                  ]
                },
                extractTextPluginOptions
              )
            )
          },
          {
            loader: require.resolve("file-loader"),
            exclude: [/\.js$/, /\.html$/, /\.json$/],
            options: {
              name: "static/media/[name].[hash:8].[ext]"
            }
          }
        ].concat(moreLoaders) //eward
      }
    ]
  },
  plugins: [
    //增加happypack进行多进程打包
    new HappyPack({
      threadPool: happyThreadPool,
      verbose: false,
      loaders: [
        {
          loader: require.resolve("babel-loader"),
          options: {
            compact: true
          }
        }
      ]
    }),
    new AutoDllPlugin({
      inject: true, // will inject the DLL bundle to index.html
      path: "/static/js",
      filename: "[name].dll.js",
      entry: vendors,
      plugins: [
        new webpack.DefinePlugin({
          "process.env": {
            NODE_ENV: JSON.stringify("production")
          }
        }),
        new ParallelUglifyPlugin({
          cacheDir: ".cache/",
          uglifyJS: {
            compress: {
              // 删除所有的 `console` 语句
              drop_console: true,
              warnings: false,
              comparisons: false
            },
            output: {
              comments: false,
              ascii_only: true
            }
          }
        })
      ]
    }),
    new InterpolateHtmlPlugin(env.raw),
    new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    new webpack.DefinePlugin(env.stringified),
    new ParallelUglifyPlugin({
      cacheDir: ".cache/",
      sourceMap: shouldUseSourceMap,
      uglifyJS: {
        compress: {
          warnings: false,
          // 删除所有的 `console` 语句
          drop_console: true,
          comparisons: false
        },
        output: {
          comments: false,
          ascii_only: true
        }
      }
    }),
    new ExtractTextPlugin({
      filename: cssFilename,
      allChunks: true
    }),
    new ManifestPlugin({
      fileName: "asset-manifest.json"
    }),
    new SWPrecacheWebpackPlugin({
      dontCacheBustUrlsMatching: /\.\w{8}\./,
      filename: "service-worker.js",
      logger(message) {
        if (message.indexOf("Total precache size is") === 0) {
          // This message occurs for every build and is a bit too noisy.
          return;
        }
        if (message.indexOf("Skipping static resource") === 0) {
          return;
        }
        console.log(message);
      },
      minify: true,
      navigateFallback: publicUrl + "/index.html",
      navigateFallbackWhitelist: [/^(?!\/__).*/],
      staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/]
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ] //eward
    .concat(moredPlugins),
  node: {
    dgram: "empty",
    fs: "empty",
    net: "empty",
    tls: "empty",
    child_process: "empty"
  }
};