chainWebpack长用配置集合

//vue.config.js
module.exports={
  chainWebpack:config=>{
  }
}

module.exports = {
  chainWebpack: config => {
    // 清理所有默认入口配置
    config.entryPoints.clear();
    // 增加一个入口main
    config.entry("main").add("./src/main.js");
    // 增加一个入口about
    config.entry("about").add("./src/about.js");
    config.output
      .path("dist")//输出目录
      .filename("[name].[chunkhash].js")//输出文件名
      .chunkFilename("chunks/[name].[chunkhash].js")//输出chunk名
      .libraryTarget("umd")//输出格式
      .library();//输出库
  }
};
// 其他的output配置
config.output
  .auxiliaryComment(auxiliaryComment)
  .chunkFilename(chunkFilename)
  .chunkLoadTimeout(chunkLoadTimeout)
  .crossOriginLoading(crossOriginLoading)
  .devtoolFallbackModuleFilenameTemplate(devtoolFallbackModuleFilenameTemplate)
  .devtoolLineToLine(devtoolLineToLine)
  .devtoolModuleFilenameTemplate(devtoolModuleFilenameTemplate)
  .filename(filename)
  .hashFunction(hashFunction)
  .hashDigest(hashDigest)
  .hashDigestLength(hashDigestLength)
  .hashSalt(hashSalt)
  .hotUpdateChunkFilename(hotUpdateChunkFilename)
  .hotUpdateFunction(hotUpdateFunction)
  .hotUpdateMainFilename(hotUpdateMainFilename)
  .jsonpFunction(jsonpFunction)
  .library(library)
  .libraryExport(libraryExport)
  .libraryTarget(libraryTarget)
  .path(path)
  .pathinfo(pathinfo)
  .publicPath(publicPath)
  .sourceMapFilename(sourceMapFilename)
  .sourcePrefix(sourcePrefix)
  .strictModuleExceptionHandling(strictModuleExceptionHandling)
  .umdNamedDefine(umdNamedDefine)

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
    chainWebpack: config => {
      config.resolve.alias
        .set("@$", resolve("src"))
        .set("assets", resolve("src/assets"))
        .set("components", resolve("src/components"))
        .set("layout", resolve("src/layout"))
        .set("base", resolve("src/base"))
        .set("static", resolve("src/static"))
        .delete("base"); // 删掉指定的别名
      // .clear()  会把全部别名都删掉
    }
};

module.exports = {
  chainWebpack: config => {
    config.devServer
      .port("8080")
      .open(true)
      .proxy({
        "/api": {
          target: "http://www.baidu.com",
          changeOrigin: true,
          pathRewrite: {
            "^/api": ""
          }
        }
      });
  }
};
// chain其余proxy的配置
config.devServer
  .bonjour(bonjour)
  .clientLogLevel(clientLogLevel)
  .color(color)
  .compress(compress)
  .contentBase(contentBase)
  .disableHostCheck(disableHostCheck)
  .filename(filename)
  .headers(headers)
  .historyApiFallback(historyApiFallback)
  .host(host)
  .hot(hot)
  .hotOnly(hotOnly)
  .https(https)
  .inline(inline)
  .info(info)
  .lazy(lazy)
  .noInfo(noInfo)
  .open(open)
  .openPage(openPage)
  .overlay(overlay)
  .pfx(pfx)
  .pfxPassphrase(pfxPassphrase)
  .port(port)
  .progress(progress)
  .proxy(proxy)
  .public(public)
  .publicPath(publicPath)
  .quiet(quiet)
  .setup(setup)
  .socket(socket)
  .staticOptions(staticOptions)
  .stats(stats)
  .stdin(stdin)
  .useLocalIp(useLocalIp)
  .watchContentBase(watchContentBase)
  .watchOptions(watchOptions)

// 添加API
config
  .plugin(name)
  .use(WebpackPlugin, args)

// 一个例子
const fileManager = require("filemanager-webpack-plugin");
...
//注意：use部分，不能使用new的方式建立插件实例
webpackConfig.plugin("zip").use(fileManager, [
    {
      onEnd: {
        archive: [
          {
            source: "dist",
            destination: zipName
          }
        ]
      }
    }
  ]);

module.exports = {
  chainWebpack: config => {
    // 可使用tap方式，修改插件参数
    config.plugin(name).tap(args => newArgs);

    // 一个例子
    config
      .plugin("env")
      //使用tag修改参数
      .tap(args => [...args, "SECRET_KEY"]);
    //更改html插件的title
    config.plugin("html").tap(args => {
      args[0] = "documnet的title";
      return args[0];
    });
  }
};

module.exports = {
  chainWebpack: config => {
    config.plugin(name).init((Plugin, args) => new Plugin(...args));
  }
};

module.exports = {
  chainWebpack: config => {
    config.plugins.delete("prefetch");
    // 移除 preload 插件
    config.plugins.delete("preload");
  }
};

// A插件之前要调用B插件;
config
  .plugin(name)
    .before(otherName)
module.exports = {
  chainWebpack: config => {
    config
      .plugin("b")
      .use(B)
      .end()
      .plugin("a")
      .use(A)
      .before(B);
  }
};

// A插件之后要调用B插件;
config.plugin(name).after(otherName);
module.exports = {
  chainWebpack: config => {
    config
      .plugin("a")
      .after("b")
      .use(A)
      .end()
      .plugin("b")
      .use(B);
  }
};

config.performance
  .hints(hints)//false | "error" | "warning"。打开/关闭提示
  .maxEntrypointSize(maxEntrypointSize)//入口起点表示针对指定的入口，对于全部资源，要充分利用初始加载时(initial load time)期间。此选项根据入口起点的最大致积，控制 webpack 什么时候生成性能提示。默认值是：250000
  .maxAssetSize(maxAssetSize)//资源(asset)是从 webpack 生成的任何文件。此选项根据单个资源体积，控制 webpack 什么时候生成性能提示。默认值是：250000
  .assetFilter(assetFilter)//此属性容许 webpack 控制用于计算性能提示的文件

module.exports = {
  chainWebpack: config => {
    config.module
      .rule(name)
      .use(name)
      .loader(loader)
      .options();
  }
};
//修改参数
module.exports = {
  chainWebpack: config => {
    config.module.rule(name);
    use(name)
      .loader(loader)
      .tap(options => {
        let newOptions = { ...options, xx: "黑黑" };
        return newOptions;
      });
  }
};
// 覆盖原来的loader
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule("svg");
    // 清除已有的全部 loader。
    // 若是你不这样作，接下来的 loader 会附加在该规则现有的 loader 以后。
    svgRule.uses.clear();
    svgRule.use("vue-svg-loader").loader("vue-svg-loader");
  }
};
//使原来loader忽略某个目录,使用新的loader
module.exports = {
  chainWebpack: config => {
    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons"))
      .end();
    config.module
      .rule("icons")
      .test("/.svg$/")
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      })
      .end();
  }
};

config.when(process.env.NODE_ENV !== "development", config => {
      config
        .plugin("ScriptExtHtmlWebpackPlugin")
        .after("html")
        .use("script-ext-html-webpack-plugin", [
          {
            // `runtime` must same as runtimeChunk name. default is `runtime`
            inline: /runtime\..*\.js$/
          }
        ])
        .end();
      config.optimization.splitChunks({
        chunks: "all",
        cacheGroups: {
          libs: {
            name: "chunk-libs",
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: "initial" // only package third parties that are initially dependent
          },
          elementUI: {
            name: "chunk-elementUI", // split elementUI into a single package
            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
          },
          commons: {
            name: "chunk-commons",
            test: resolve("src/components"), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true
          }
        }
      });
      // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
      config.optimization.runtimeChunk("single");
    });