chainWebpack长用配置集合

2022-10-25 14:11:03 浏览数 (2)

chainWebpack长用配置方式

代码语言：javascript复制
//vue.config.js
module.exports={
  chainWebpack:config=>{
  }
}
  • 1 输入输出配置
代码语言：javascript复制
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)
  • 2.设置别名
代码语言：javascript复制
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()  会把全部别名都删掉
    }
};
  • 3. 配置代理
代码语言：javascript复制
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)

5. 使用插件和添加、删除插件参数

使用插件

代码语言：javascript复制
// 添加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
          }
        ]
      }
    }
  ]);

修改参数、添加参数

代码语言：javascript复制
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];
    });
  }
};

修改插件初始化和删除插件

修改插件

代码语言：javascript复制
module.exports = {
  chainWebpack: config => {
    config.plugin(name).init((Plugin, args) => new Plugin(...args));
  }
};

删除插件

代码语言：javascript复制
module.exports = {
  chainWebpack: config => {
    config.plugins.delete("prefetch");
    // 移除 preload 插件
    config.plugins.delete("preload");
  }
};

7.有前后顺序的插件

代码语言：javascript复制
// A插件之前要调用B插件;
config
  .plugin(name)
    .before(otherName)
module.exports = {
  chainWebpack: config => {
    config
      .plugin("b")
      .use(B)
      .end()
      .plugin("a")
      .use(A)
      .before(B);
  }
};
代码语言：javascript复制
// A插件之后要调用B插件;
config.plugin(name).after(otherName);
module.exports = {
  chainWebpack: config => {
    config
      .plugin("a")
      .after("b")
      .use(A)
      .end()
      .plugin("b")
      .use(B);
  }
};

9. performace性能警告阀配置

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

使用、修改、删除loader

代码语言：javascript复制
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();
  }
};

1. 条件

代码语言：javascript复制
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");
    });
loader web 插件 代理 性能

0 人点赞