J'utilise Webpack dans un projet php et j'ai effectué quelques refactorisations pour effectuer une importation dynamique afin de réduire la taille du rendu de mon JS.
Mais j'ai cette erreur car il manque un '/' avant le nom du fichier car le chemin est '/public/vendors/dist/...' :
Not allowed to load local resource: file:///C:/app/projets_name/public/vendors/js/dist452.bc790b53.js
Error loading custom function: ChunkLoadError: Loading chunk 954 failed.
(error: file:///C:/app/projets_name/public/vendors/js/dist954.21bc36fc.js)
voici ma config webpack
const path = require('path')
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const {WebpackManifestPlugin} = require('webpack-manifest-plugin');
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const {WebpackLaravelMixManifest} = require('webpack-laravel-mix-manifest');
// const Dotenv = require('dotenv-webpack');
const dev = process.env.NODE_ENV === "dev"
const cssLoaders = [
// Creates `style` nodes from JS strings
dev ? "style-loader" : MiniCssExtractPlugin.loader,
// Translates CSS into CommonJS
{
loader: "css-loader",
options: {importLoaders: 1},
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
// browsers: 'last 2 versions'
},
],
],
},
},
},
]
let config_webpack = {
mode: dev ? "development" : "production",
entry: {
app: ['./resources/scss/app.scss', './resources/js/src/app.js']
},
watch: dev,
output: {
path: path.resolve(__dirname, "public/vendors/dist"),
publicPath: path.resolve(__dirname, "public/vendors/js/dist"),
filename: dev ? '[name].js' : '[name].[chunkhash:8].js',
clean: true,
},
devtool: dev ? "cheap-module-source-map" : false,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.css$/i,
use: cssLoaders
},
{
test: /\.s[ac]ss$/i,
use: [
...cssLoaders,
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 10kb
}
},
generator: {
filename: 'images/[hash][ext][query]'
}
}
]
},
optimization: {
minimize: !dev,
minimizer: [
new TerserPlugin({
terserOptions: {
sourceMap: true,
},
}),
new CssMinimizerPlugin(),
],
},
plugins: [],
resolve: {
alias: {
functions: path.resolve(__dirname, 'resources/js/functions/'),
modules: path.resolve(__dirname, 'resources/js/modules/'),
components: path.resolve(__dirname, 'resources/js/components/'),
},
},
}
config_webpack.plugins.push(new MiniCssExtractPlugin({
filename: dev ? '[name].css' : '[name].[contenthash:8].css',
}))
if (!dev) {
config_webpack.plugins.push(new WebpackManifestPlugin({
publicPath: "",
// fileName: path.resolve(__dirname, 'public/manifest.json'),
}))
config_webpack.plugins.push(new CleanWebpackPlugin({
dry: true,
verbose: true,
}))
}
module.exports = config_webpack
J’ai est des revoir le publicPath dans ma config mais ça ne marche pas. Il y’a toujours le ‘/’ qui manque.
Je recherche un idée de solution ou si je dois passer à la ViteJs alors je voudrais une config qui résoudrait le problème.