我最近将我们的 webpack 版本从 4.0 更新到 5.0。这是我在 packake.json 文件中使用的 webpack 及其加载器版本。
"css-loader": "^3.4.0",
"file-loader": "^6.2.0",
"ts-loader": "^6.2.1",
"typescript": "^3.9.9",
"url-loader": "^4.1.1",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4",
"webpack-node-externals": "^3.0.0"
除了 ts-loader 之外，我们都将依赖项设置为最新版本，在本例中我们使用的是节点 14。
我保持 webpack.config 几乎没有任何变化，除了功能
config.output这是我们在服务器包中使用的索引文件
const path = require('path');
const webpack = require('webpack');
module.exports = (nextConfig = {}) => {
return Object.assign({}, nextConfig, {
webpack(config, options) {
const { isServer } = options;
config.output.chunkLoadingGlobal = 'loginServiceJsonP'; // this function get updated
config.output.hotUpdateGlobal = 'loginServiceWebpackJsonp'; // this function get updated
config.module.rules.push({
test: /\.(jpe?g|png|svg|gif|ico|webp|woff2)$/,
use: [{
loader: require.resolve('url-loader'),
options: {
limit: false,
fallback: require.resolve('file-loader'),
publicPath: '/',
/**
* The `require` call we see here, is resolved exclusively
* by webpack.
* @param p the original image path.
* @return {string} Returns the image url with the CDN prefixed.
*/
postTransformPublicPath: (p) => `require('@amzn/ring-site-assets-resolver/src/setup-webpack-assets.js').assetsEndpoint + ${p}`,
outputPath: `${isServer ? '../' : ''}../dist/assets/login`, // put assets in /dist/assets/login
name: '[path][name]-[contenthash].[ext]', // use contenthash to generate hash based on content and NOT build
context: 'static/' // use to strip /static/ from output
},
}],
});
config.module.rules.push({
test: /\.static-js$/,
loader: require.resolve('url-loader'),
options: {
limit: false,
fallback: require.resolve('file-loader'),
publicPath: '/',
/**
* The `require` call we see here, is resolved exclusively
* by webpack.
* @param p the original image path.
* @return {string} Returns the image url with the CDN prefixed.
*/
postTransformPublicPath: (p) => `require('@amzn/ring-site-assets-resolver/src/setup-webpack-assets.js').assetsEndpoint + ${p}`,
outputPath: '../dist/assets/login', // put assets in /dist/assets/login
name: '[path][name]-[contenthash].js', // use contenthash to generate hash based on content and NOT build
context: 'static/' // use to strip /static/ from output
},
});
config.module.rules.push({
test: /\.css$/i,
use: [
{
loader: require.resolve('url-loader'),
options: {
limit: false,
fallback: require.resolve('file-loader'),
publicPath: '/',
/**
* The `require` call we see here, is resolved exclusively
* by webpack.
* @param p the original image path.
* @return {string} Returns the image url with the CDN prefixed.
*/
postTransformPublicPath: (p) => `require('@amzn/ring-site-assets-resolver/src/setup-webpack-assets.js').assetsEndpoint + ${p}`,
outputPath: '../dist/assets/login', // put assets in /dist/assets/login
name: '[path][name]-[contenthash].css', // use contenthash to generate hash based on content and NOT build
context: 'static/' // use to strip /static/ from output
},
},
{
// To inline url("../icons/arrow-down.svg") in common-styles.css.
loader: require.resolve('postcss-loader'),
options: {
postcssOptions: {
config: false,
plugins: [
require('postcss-url')({ url: 'inline' })
]
}
}
}
]
});
if (typeof nextConfig.webpack === 'function') {
return nextConfig.webpack(config, options);
}
return config;
}
});
}
我已经验证输出路径是正确的，我们正在将代码部署到在 ecr docker 上运行的 aws code-pipeline。 Docker 镜像与我们本地机器共享相同的路径。
我们的本地资源文件路径是
<servicePackage>/dist/assets/login<servicePackage>/webpack/withAssets
当我将服务器代码部署到 ecr 时，静态资源无法渲染，并出现如下错误
Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to execute script from '<service endpoint url>/404' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
VM733:73 Uncaught TypeError: Cannot read properties of undefined (reading 'initRingSiteHeapJS')
at <anonymous>:73:22
at consent-manager.js?l…&loggedIn=0:1:23208
at Array.forEach (<anonymous>)
at consent-manager.js?l…&loggedIn=0:1:23118
at e.value (consent-manager.js?l…&loggedIn=0:1:23292)
at e.value (consent-manager.js?l…&loggedIn=0:1:11932)
at HTMLDocument.<anonymous> (consent-manager.js?l…&loggedIn=0:1:26709)
想知道我是否缺少配置或索引文件中的任何设置？
感谢任何提示和帮助！！
有人帮忙解答一下为什么webpack 5升级会引入这个问题，是依赖问题还是配置问题？
对于 MIME 类型的前两个错误，这是因为 CSS 样式作为 HTML 文件发送，您可以通过将 CSS 文件导入到主 JS 文件中来修复它，然后从 HTML webpack 中删除所有 CSS 链接标签即可解决该问题。
我自己项目的一个例子：
import "./styles/style.css";
import "./styles/utils.css";
import "./styles/var.css";
加载器的 Webpack 配置文件：
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
],
},
您可以省略 Bable 和 Img 加载器，第一个样式加载器可以解决您的问题。