在Angular中自定义Webpack配置「终于解决」

在Angular中自定义Webpack配置「终于解决」本文章只针对AngularCLI8版本1.安装angular-builderscnpmi@angular-builders/custom-webpack-Dcnpmi@angular-devkit/build-angular-D2.更改angular.json配置”projects”:{…”[your-porject]”:{…..

大家好,欢迎来到IT知识分享网。

本文章只针对Angular CLI 8版本

1.安装angular-builders

cnpm i @angular-builders/custom-webpack -D
cnpm i @angular-devkit/build-angular -D

2.更改angular.json配置 

"projects": {
  ...
  "[your-porject]": {
    ...
    "architect": {
      ...
      "[architect-target]": {
        "builder": "@angular-builders/custom-webpack:[browser|server|karma|dev-server]"
        "options": {
          "customWebpackConfig":{
             "path":'./webpack.config.js',
             "mergeStrategies": {
                "externals": "replace",
                "module.rules": "prepend"
             }
           },
          "indexTransform": "./index-html-transform.js",
          ...
        }    

解释一下:
[architect-target]:类似项目中的”build”或者”serve”(也就是ng build/serve)命令,
builder:angular.json:默认的配置是@angular-devkit/build-angular:browser,这个是angular内部的配置,
换成@angular-builders/custom-webpack就可以使用自定义的配置,配置只接受browser|server|karma|dev-server这四个选项
customWebpackConfig.path:自定义的webpack的路径
customWebpackConfig.mergeStrategies:webpack配置合并方式,只能是append|prepend|replace。默认为append
     append:将自定义配置的字段添加到的默认配置项中
     prepend:字面意思,将自定义配置的字段添加到默认配置加载程序数组的最前面。
     
replace:自定义的配置完全替换默认配置,使用自定义的配置
indexTransform:index-html-transform.js是用来更改dist目录下index.html文件里面的内容

举个例子:

//   angular.json
 ...
    "architect": {
        ...
        "build": {
            "builder": "@angular-builders/custom-webpack:browser",
            "options": {
                "customWebpackConfig": {
                    "path": "./webpack-prod.config.js"
                },
               "indexTransform": "./index-html-transform.js"
            }
        },
        "serve": {
            "builder": "@angular-builders/custom-webpack:dev-server",
            "options": {
                "customWebpackConfig": {
                    "path": "./webpack-dev.config.js"
                }
            }
        },
       ...
    }

此时如果我们想要ng build的时候复制静态资源,或者抽离出某个js库,就可以这么干

// webpack-prod.config.js

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = (config, options) => {
  config.plugins.push(
    new CopyPlugin([
      { from: path.join(__dirname, "src/utils"), to: path.join(__dirname, "dist/utils") }
    ])
  );
  if(!config.optimization.splitChunks.cacheGroups.moment){
    config.optimization.splitChunks.cacheGroups.moment = {
      name:'momentFile/moment', // 打包到dist/momentFile/moment
      chunks: 'all',
      test: /moment\.js/,
      enforce: true
    }
  }

  return config;
};

打包后的目录
在Angular中自定义Webpack配置「终于解决」

更改index.html内容

// index-html-transform.js

module.exports = (targetOptions, indexHtml) => {
    const i = indexHtml.indexOf('</body>');
    const config = `<script src="momentFile/moment.js" type="module"></script>`;
    return `${indexHtml.slice(0, i)}
              ${config}
              ${indexHtml.slice(i)}`;
  };

打包后的index.html页面在Angular中自定义Webpack配置「终于解决」

 

具体使用可以参考这里

 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/24428.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信