J'ai ce webpack.config.js :

const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = [{
entry: ['./app/clientside/app.scss', './app/clientside/app.js'],
plugins: [
    new HtmlWebpackPlugin({
        title: 'Caching',
    }),
],
output: {
path: __dirname + '/private_html/_app/dist',
publicPath: '',
filename: '[contenthash].bundle.js'
},
module: {
rules: [
  {
    test: /\.scss$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[contenthash].bundle.css',
        },
      },
      { loader: 'extract-loader' },
      { loader: 'css-loader' },

                { loader: 'postcss-loader',
                    options: {
                         plugins: () => [autoprefixer()]
                    }
                },
                {
                    loader: 'sass-loader',
                    options: {
                        implementation: require('sass'),
                        sassOptions: {
                            includePaths: ['./node_modules']
                        }
                    }
                },
    ]
  },
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
    },
     ] },
}];

Les fichiers css et js sont générés, mais dans le fichier index.html seul le fichier js est inclus :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Caching</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<script src="dd9a13efe757661de1fe.bundle.js"></script>
</body>
</html>

Je m'attendais à avoir un élément de lien faisant référence au fichier css. J'ai essayé google mais je n'arrive pas à trouver la bonne direction/les bons mots-clés. Comment puis-je réparer ça?

0
Lennart 31 oct. 2020 à 16:35

1 réponse

Meilleure réponse

J'envisagerais probablement d'utiliser [MiniCssExtractPlugin][1] à cette fin qui, avec le HtmlWebpackPlugin, vous permettrait d'obtenir la balise de lien dans vos fichiers HTML, pointant vers vos fichiers CSS.

Je cite le HtmlWebpackPlugin [documentation][2] :

Si vous avez des actifs CSS dans la sortie de webpack (par exemple, CSS extrait avec le MiniCssExtractPlugin), ceux-ci seront inclus avec des balises dans l'élément du HTML généré.

Vous pouvez également consulter ce SO [réponse][3] qui suggère des moyens supplémentaires d'insérer du CSS en HTML.

Si vous le souhaitez, vous pouvez partager un lien vers votre projet, et je peux essayer de vous aider plus spécifiquement. [1] : https://webpack.js.org/plugins/mini -css-extract-plugin/ [2] : https://webpack.js.org/plugins/html-webpack -plugin/ [3] : https://stackoverflow.com/a/50770543/6098812

1
bentz123 4 nov. 2020 à 20:51