[英]Is it possible to have `publicPath` configured dynamically in the browser with webpack?
[英]Webpack5 Automatic publicPath is not supported in this browser
我正在研究 webpack 4.44.2,當我轉換為 webpack5.0.0 時遇到此錯誤
錯誤 in./src/assets/sass/styles.scss 模塊構建失敗(來自./node_modules/mini-css-extract-plugin/dist/loader.js):錯誤:此瀏覽器不支持自動 publicPath E: \maktab\Control-panel\newcontrol\final-control\node_modules\css-loader\dist\cjs.js!
錯誤來自 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
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({}), ] }
styles.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");
我正在使用webpack 4.44.2,在轉換為webpack5.0.0時遇到此錯誤
./src/assets/sass/styles.scss中的錯誤模塊構建失敗(來自./node_modules/mini-css-extract-plugin/dist/loader.js):錯誤:此瀏覽器的E不支持自動publicPath: \\ maktab \\ Control-panel \\ newcontrol \\ final-control \\ node_modules \\ css-loader \\ dist \\ cjs.js!
錯誤是來自fonts.scss中的字體文件Bath
@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
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({}), ] }
styles.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");
我正在使用webpack 4.44.2,在轉換為webpack5.0.0時遇到此錯誤
./src/assets/sass/styles.scss中的錯誤模塊構建失敗(來自./node_modules/mini-css-extract-plugin/dist/loader.js):錯誤:此瀏覽器的E不支持自動publicPath: \\ maktab \\ Control-panel \\ newcontrol \\ final-control \\ node_modules \\ css-loader \\ dist \\ cjs.js!
錯誤是來自fonts.scss中的字體文件Bath
@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
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({}), ] }
styles.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");
我正在使用webpack 4.44.2,在轉換為webpack5.0.0時遇到此錯誤
./src/assets/sass/styles.scss中的錯誤模塊構建失敗(來自./node_modules/mini-css-extract-plugin/dist/loader.js):錯誤:此瀏覽器的E不支持自動publicPath: \\ maktab \\ Control-panel \\ newcontrol \\ final-control \\ node_modules \\ css-loader \\ dist \\ cjs.js!
錯誤是來自fonts.scss中的字體文件Bath
@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
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({}), ] }
styles.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");
我正在使用webpack 4.44.2,在轉換為webpack5.0.0時遇到此錯誤
./src/assets/sass/styles.scss中的錯誤模塊構建失敗(來自./node_modules/mini-css-extract-plugin/dist/loader.js):錯誤:此瀏覽器的E不支持自動publicPath: \\ maktab \\ Control-panel \\ newcontrol \\ final-control \\ node_modules \\ css-loader \\ dist \\ cjs.js!
錯誤是來自fonts.scss中的字體文件Bath
@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
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({}), ] }
styles.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");
我正在使用webpack 4.44.2,在轉換為webpack5.0.0時遇到此錯誤
./src/assets/sass/styles.scss中的錯誤模塊構建失敗(來自./node_modules/mini-css-extract-plugin/dist/loader.js):錯誤:此瀏覽器的E不支持自動publicPath: \\ maktab \\ Control-panel \\ newcontrol \\ final-control \\ node_modules \\ css-loader \\ dist \\ cjs.js!
錯誤是來自fonts.scss中的字體文件Bath
@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
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({}), ] }
styles.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");
我正在使用webpack 4.44.2,在轉換為webpack5.0.0時遇到此錯誤
./src/assets/sass/styles.scss中的錯誤模塊構建失敗(來自./node_modules/mini-css-extract-plugin/dist/loader.js):錯誤:此瀏覽器的E不支持自動publicPath: \\ maktab \\ Control-panel \\ newcontrol \\ final-control \\ node_modules \\ css-loader \\ dist \\ cjs.js!
錯誤是來自fonts.scss中的字體文件Bath
@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
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({}), ] }
styles.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");
我正在使用webpack 4.44.2,在轉換為webpack5.0.0時遇到此錯誤
./src/assets/sass/styles.scss中的錯誤模塊構建失敗(來自./node_modules/mini-css-extract-plugin/dist/loader.js):錯誤:此瀏覽器的E不支持自動publicPath: \\ maktab \\ Control-panel \\ newcontrol \\ final-control \\ node_modules \\ css-loader \\ dist \\ cjs.js!
錯誤是來自fonts.scss中的字體文件Bath
@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
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({}), ] }
styles.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");
注意index.html
中<script>
的標簽,默認類型不是module
作品
<script src="./build/bundle.js"></script>
創建錯誤
<script type="module" src="./build/bundle.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.