web-dev-qa-db-fra.com

Le chemin public MiniCssExtractPlugin ne fonctionne pas

J'utilise MiniCssExtractPlugin pour lazyloader des fichiers CSS dans mon application React.

j'ai donné l'option publicPath pour MiniCssExtractPlugin mais il ne prend pas cette valeur d'option, il prend l'option output.publicPath.

config:
   {
     test: /\.(css)?$/,
     use: [{
            loader : MiniCssExtractPlugin.loader,
            options : {
              publicPath : '../'
            }
          },
          'css-loader'
        ],

     }

De l'aide???

webpack-4mini-css-extract-plugin
6
Nr.

On dirait que votre pas le seul confond , 52 commentaires sur la façon de faire les choses correctement. Le problème de publicPath dans html-webpack-plugin était similaire et a aidé. Cependant, la plus grande aide a été de npm run eject sortir de create-react-app et inspecter le webpack.config.js des dossiers.

TL; DR: Vous devez spécifier le chemin de sauvegarde dans le constructeur du plugin.

new MiniCssExtractPlugin({
  // Options similar to the same options in webpackOptions.output
  filename: "assets/css/[name].css",
}),

Vous devrez peut-être repenser la logique de sortie du module. Évitez de spécifier un chemin imbriqué dans module.output.path par exemple. public/assets/js, définissez plutôt le répertoire racine : public et définissez l'imbrication de la clé filename: assets/js/[name].js.

Vous pouvez ensuite spécifier un publicPath dans le principal module.output que vous utiliseriez pour sous-domaines ou CDN etc.

La configuration complète finale a fonctionné pour moi:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

const publicPath = '/';

module.exports = {
  entry: './_src/_js/index.js',
  output: {
    filename: 'assets/js/[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: publicPath,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/images/[name].[ext]',
            },
          },
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader','eslint-loader']
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "assets/css/[name].css",
    }),
    new HtmlWebpackPlugin({
      inject: true,

    }),
  ]
};
17
sansSpoon