我正在开发webpack 4.44.2,当我转换为webpack 5.0.0时,我面临这个错误
错误。/src/资产/sass/styles.scss模块构建失败(来自。/node_modules/mini-css-exexted-plugin/dist/loader.js):错误:此浏览器不支持自动公共路径在E:\maktab\Control-board\newControl\final-Control\node_modules\css-loader\dist\cjs.js!
错误来自字体文件bath in fonts。scss
@font-face {
font-family: "Janna LT";
src: local("Janna LT"), url(../fonts/janna.woff) format("woff");
font-weight: normal;
}
@font-face {
font-family: "Janna LT";
src: local("Janna LT"), url(../fonts/janna-bold.woff) format("woff");
font-weight: bold;
}
我的src结构https://i.stack.imgur.com/vKyfW.png
Dist结构https://i.stack.imgur.com/mLgmF.png
webpack.config.js
js prettyprint-override">const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
'main': './src/index.js',
},
output: {
path: path.join(__dirname, "/dist"),
filename: '[name].js',
},
devServer: {
contentBase: path.join(__dirname, "/dist"),
port: 8087,
writeToDisk: true,
overlay :true
},
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: "html-loader",
}
]
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.(png|svg|jpe?g|gif)$/,
exclude: /fonts/,
use: [
{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: "/assets/images",
}
}
]
},
{
test: /\.(svg|eot|woff|woff2|ttf)$/,
exclude: /images/,
use: [
{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: "assets/fonts",
}
}
]
},
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: "index.html",
template: "./src/index.html",
chunks: ['main']
}),
new MiniCssExtractPlugin({filename: "assets/css/styles.css"}),
new OptimizeCSSAssetsPlugin({}),
]
}
风格。scss
@import "base/fonts";
@import "base/global";
@import "base/typography";
@import "base/links";
@import "components/components";
@import "components/demo";
index.js
import './assets/sass/styles.scss';
import 'normalize.css/normalize.css';
console.log("hellow from webpack5");
该错误是由mini-css-exexted-plugin 1.3.8及更低版本与Webpack 5组合中的错误引起的。当样式表使用url(...)
引用资源时触发它,并且Webpack配置中未显式设置public Path
选项。
我花时间在这里复制和报告这个问题:https://github.com/webpack-contrib/mini-css-extract-plugin/issues/707
昨天,1.3.9版已经发布,其中包含此问题的修复程序。您应该能够通过升级来解决此错误。
我遇到了同样的问题。我的代码编译到dist文件夹中,没有任何进一步的结构。以下代码适用于我,并且很简单,因为我需要一个空路径。
'module': {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ''
}
},
{
loader: "css-loader"
}
]
}
]
}
你也可以疯狂地做这样的事情:
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: (resourcePath, context) => {
return path.relative(path.dirname(resourcePath), context) + '/';
},
},
},
您可以在这里找到详细信息:https://webpack.js.org/plugins/mini-css-extract-plugin/#the-publicpath-option-as-function
建议的解决方案对我不起作用。然而,我发现将publicPath
设置为空字符串就可以了。
output: {
publicPath: '',
...
}
把jade编译为一个可供浏览器使用的单文件,只需要简单的执行: $ make jade.js 如果你已经安装了uglifyjs (npm install uglify-js),你可以执行下面的命令它会生成所有的文件。其实每一个正式版本里都帮你做了这事。 $ make jade.min.js 默认情况下,为了方便调试Jade会把模板组织成带有形如 __.lineno = 3 的行号的形式。 在浏览器
Next.js 支持 IE11 和所有的现代浏览器使用了@babel/preset-env。为了支持 IE11,Next.js 需要全局添加Promise的 polyfill。有时你的代码或引入的其他 NPM 包的部分功能现代浏览器不支持,则需要用 polyfills 去实现。 ployflls 实现案例为polyfills。
AdminLTE 与 Bootstrap 4 支持的浏览器一样。Bootstrap 支持 主流平台和浏览器,稳定版在 Windows 上,我们支持 Internet Explorer 10-11 / Microsoft Edge。更多详细信息,请点击此处。 你可以在 我们的 .browserslistrc 文件 找到支持的浏览器情况及其版本: # https://github.com/browse
主要内容:HTML5 浏览器支持,将 HTML5 元素定义为块元素,实例,为 HTML 添加新元素,实例,Internet Explorer 浏览器问题,完美的 Shiv 解决方案,实例你可以让一些较早的浏览器(不支持HTML5)支持 HTML5。 HTML5 浏览器支持 现代的浏览器都支持 HTML5。 此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理。 正因为如此,你可以 "教会" 浏览器处理 "未知" 的 HTML 元素。 甚至你可以教会 IE6 (Windows
看看AMP规范,考虑到定制样式元素对CSS变量的依赖,这意味着当前的浏览器支持范围很窄。请看:我可以使用参考资料吗 我猜非自定义样式有一个“优雅的退路”,因为不理解CSS变量的浏览器会忽略那个CSS。 是否有AMP的浏览器兼容性/支持矩阵?
Docusaurus 允许网站通过 浏览器列表配置(browserslist configuration) 来定义其要支持的所有浏览器。 目的 网站需要在向后兼容性和文件体积之间做平衡。由于旧的浏览器不支持现代的 API 或语法,因此需要更多代码才能实现相同的功能,这会增加网站的加载时间,从而对所有其他用户造成不利的影响。为权衡起见,Docusaurus 打包工具仅支持浏览器列表中所定义的浏览器版