【发布时间】：2022-08-07 00:38:56
【问题描述】：
当我通过 angular-cli 使用自定义 webpack 打包时，我遇到了如下所示的问题：
我的 package.json 如下：
\"dependencies\": {
\"@angular/animations\": \"13.2.4\",
\"@angular/common\": \"13.2.4\",
\"@angular/compiler\": \"13.2.4\",
\"@angular/core\": \"13.2.4\",
\"@angular/forms\": \"13.2.4\",
\"@angular/localize\": \"^13.2.4\",
\"@angular/platform-browser\": \"13.2.4\",
\"@angular/router\": \"13.2.4\",
\"@auth0/angular-jwt\": \"^5.0.2\",
\"@ng-bootstrap/ng-bootstrap\": \"^11.0.0\",
\"@types/lodash\": \"^4.14.175\",
\"big-integer\": \"^1.6.50\",
\"bootstrap\": \"4.5.2\",
\"buffer\": \"^6.0.3\",
\"core-js\": \"2.6.9\",
\"crc-32\": \"^1.2.0\",
\"crypto-browserify\": \"^3.12.0\",
\"file-saver\": \"^2.0.5\",
\"jquery\": \"3.6.0\",
\"jquery-ui-dist\": \"1.12.1\",
\"jssha\": \"3.1.2\",
\"lodash\": \"^4.17.21\",
\"popper.js\": \"1.16.1\",
\"resize-observer-polyfill\": \"^1.5.1\",
\"rxjs\": \"~6.6.7\",
\"snappyjs\": \"^0.6.0\",
\"style-loader\": \"^3.3.1\",
\"tslib\": \"^2.0.0\",
\"webpack\": \"^5.67.0\",
\"zone.js\": \"~0.11.4\"
},
\"devDependencies\": {
\"@angular-builders/custom-webpack\": \"^13.1.0\",
\"@angular-devkit/build-angular\": \"13.2.5\",
\"@angular-devkit/core\": \"~13.2.5\",
\"@angular/cli\": \"13.2.5\",
\"@angular/compiler-cli\": \"~13.2.4\",
\"@angular/language-service\": \"~13.2.4\",
\"@angular/platform-browser-dynamic\": \"~13.2.4\",
\"@babel/core\": \"^7.12.10\",
\"@babel/preset-env\": \"^7.12.11\",
\"@ngtools/webpack\": \"^13.2.5\",
\"@types/angular\": \"^1.6.57\",
\"@types/bootstrap\": \"^4.5.0\",
\"@types/chrome-apps\": \"0.0.13\",
\"@types/file-saver\": \"^2.0.1\",
\"@types/jasmine\": \"^3.6.5\",
\"@types/jquery\": \"^3.5.1\",
\"@types/jqueryui\": \"^1.12.10\",
\"@types/node\": \"14.0.4\",
\"@types/w3c-web-usb\": \"^1.0.4\",
\"@typescript-eslint/eslint-plugin\": \"^5.14.0\",
\"@typescript-eslint/parser\": \"^5.14.0\",
\"babel-loader\": \"^8.2.2\",
\"base-href-webpack-plugin\": \"^3.0.0\",
\"bower\": \"1.8.8\",
\"bower-art-resolver\": \"^2.0.0\",
\"clean-webpack-plugin\": \"^3.0.0\",
\"copy-dir\": \"^0.3.0\",
\"copy-webpack-plugin\": \"^10.2.4\",
\"cross-env\": \"^7.0.3\",
\"css-loader\": \"^3.6.0\",
\"css-to-string-loader\": \"^0.1.3\",
\"dts-bundle\": \"^0.7.3\",
\"eslint\": \"^8.10.0\",
\"eslint-config-google\": \"^0.14.0\",
\"eslint-webpack-plugin\": \"^3.1.1\",
\"exports-loader\": \"^0.6.4\",
\"expose-loader\": \"^3.0.0\",
\"extend\": \"^3.0.2\",
\"file-loader\": \"^5.0.2\",
\"gettext-parser\": \"1.1.2\",
\"html-loader\": \"^0.5.1\",
\"html-webpack-plugin\": \"^5.5.0\",
\"http-rewrite-middleware\": \"0.1.6\",
\"imports-loader\": \"^0.7.1\",
\"jasmine-core\": \"^3.7.1\",
\"jasmine-spec-reporter\": \"~5.0.0\",
\"karma\": \"^6.3.16\",
\"karma-chrome-launcher\": \"~3.1.0\",
\"karma-coverage\": \"~2.0.3\",
\"karma-jasmine\": \"~4.0.0\",
\"karma-jasmine-html-reporter\": \"^1.5.4\",
\"karma-sabarivka-reporter\": \"^3.2.5\",
\"less\": \"^4.1.0\",
\"less-loader\": \"^6.2.0\",
\"lint-staged\": \"^12.3.4\",
\"mini-css-extract-plugin\": \"^2.5.3\",
\"ng-mocks\": \"^11.10.1\",
\"null-loader\": \"^0.1.1\",
\"postcss-loader\": \"3.0.0\",
\"prettier\": \"^1.16.4\",
\"raw-loader\": \"0.5.1\",
\"script-loader\": \"^0.7.0\",
\"shelljs\": \"^0.8.5\",
\"string-replace-loader\": \"^3.0.0\",
\"type-check\": \"^0.4.0\",
\"typedoc\": \"^0.22.12\",
\"typescript\": \"^4.3.5\",
\"url-loader\": \"^3.0.0\",
\"webpack-cli\": \"^4.9.2\",
\"webpack-crx\": \"^1.0.7\",
\"webpack-dev-middleware\": \"^3.7.2\",
\"webpack-dev-server\": \"^4.7.4\"
}
我通过\'@angular-builders/custom-webpack\'来使用webpack自定义打包：
\"build\": {
\"builder\":\"@angular-builders/custom-webpack:browser\",
\"options\": {
\"customWebpackConfig\": {
\"path\": \"html5-access.webpack-config.js\",
\"replaceDuplicatePlugins\": true
},
\"outputPath\": \"target/web-build/webclient\",
\"index\": \"src/main/webapp/webclient/chrome-client/index.html\",
\"main\": \"src/main/webapp/webclient/chrome-client/resources/main.js\",
\"polyfills\": \"src/main/webapp/webclient/polyfills.ts\",
\"tsConfig\": \"tsconfig.app.json\"
}
}
并且我已经在webpack中配置了css打包规则：
module: {
rules: [
{
test: /\\.css$/,
use: [
\"style-loader\",
\"css-loader\",
\"postcss-loader\",
]
}
]
},
resolve: {
alias: {
WMKS: webmks,
webmksCss: webmksCss,
fileSaver: fileSaver,
popperJs: popperJs,
jquery: jquery,
\"jquery-ui\": jqueryui,
jqueryuiCss: jqueryuiCss,
bootstrapJS: bootstrapJS,
bootstrapCss: bootstrapCss
},
extensions: [\".ts\", \".js\"]
}
其中 \'webmks\' 和 \'webmksCss\' 来自根目录之外的其他文件，其他的是来自 node_moudule 的调用。
但这不是问题，我试过降级\'postcss-loader\'或重新安装node_moudle，但仍然报同样的错误。
为什么会出现这个问题？我怎么解决这个问题？
-
似乎 postcss-loader 在 style-loader 之后由 Angular cli 触发
标签： webpack angular-cli postcss-loader