How to prevent Webpack from generating styles, ejs templates in a js bundle?

R

ramanovsky2022-01-26 15:40:32

Building projects

ramanovsky, 2022-01-26 15:40:32

There is this config:

const wpConf = {
  entry: {
    index: "./src/pages/index.ejs",
    about: "./src/pages/about.ejs",
    styles: "./src/css/styles.css"
  },
  output: {
    clean: true,
    filename: 'js/[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          { loader: "postcss-loader" },
        ],
      },
      {
        test: /\.ejs$/,
        use: [
          { loader: 'ejs-loader', options: { esModule: false } },
        ],
      }
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: 'css/[id].css',
    }),
    new HtmlWebpackPlugin({
      filename: `index.html`,
      chunks: ['index', 'styles'],
      template: `./src/pages/${title}.ejs`,
    }),
    new HtmlWebpackPlugin({
      filename: `about.html`,
      chunks: ['about', 'styles'],
      template: `./src/pages/${title}.ejs`,
    }),
  ],
  resolve: {
    extensions: ['.js', '.json', '.ejs'],
  },
};

How to remove ejs templates and styles from webpack bundle, webpack ?

I now have this output:

asset js/about.bundle.js 1.1 KiB [emitted] [minimized] (name: about)
  asset js/index.bundle.js 1.1 KiB [emitted] [minimized] (name: index)
  asset js/runtime.bundle.js 924 bytes [emitted] [minimized] (name: runtime)
  asset js/styles.bundle.js 138 bytes [emitted] [minimized] (name: styles)
assets by path *.html 1.12 KiB
  asset about.html 572 bytes [emitted]
  asset index.html 570 bytes [emitted]
asset css/styles.css 139 bytes [emitted] (name: styles)

I want webpack to not generate the `styles.bundle.js` file because it has already generated `css/styles.css`, why do I need some empty js file, there is this:

"use strict";(self.webpackChunkfrontend_boilerplate=self.webpackChunkfrontend_boilerplate||[]).push([[532],{894:()=>{}},e=>{e(e.s=894)}]);

Likewise with ejs, it doesn't remove the templating code:

(self.webpackChunkfrontend_boilerplate=self.webpackChunkfrontend_boilerplate||[]).push([[179],{617:(module,__unused_webpack_exports,__webpack_require__)=>{module.exports=function(obj){obj||(obj={});var __t,__p="";with(obj)__p+='<!DOCTYPE html>\n<html class="no-js" lang="ru">\n<head>\n  '+(null==(__t=__webpack_require__(89)({title}))?"":__t)+'\n</head>\n<body class="body-content">\n  '+(null==(__t=__webpack_require__(732)())?"":__t)+"\n  "+(null==(__t=__webpack_require__(162)())?"":__t)+"\n</body>\n</html>\n";return __p}},162:module=>{module.exports=function(obj){obj||(obj={});var __t,__p="";with(obj)__p+='<footer class="footer">\n  <p>...</p>\n</footer>\n';return __p}},89:module=>{module.exports=function(obj){obj||(obj={});var __t,__p="";with(obj)__p+='<meta charset="utf-8">\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\n<title>'+(null==(__t=title)?"":__t)+"</title>\n";return __p}},732:module=>{module.exports=function(obj){obj||(obj={});var __t,__p="";with(obj)__p+='<header class="header">\n</header>\n';return __p}}},_=>{_(_.s=617)}]);

Reply

Answer the question

In order to leave comments, you need to log in

[[+comments_count]] answer(s)

T

twolegs, 2022-01-26
@twolegs

You get the files that you specified in entry.

I want webpack to not generate `styles.bundle.js` because it already generated `css/styles.css`,

Remove `styles: "./src/css/styles.css"` from entry. In a good way, you need index.js, inside which you need to import all your css. You can’t do without a js file at all, because. yet the main task of webpack is to collect js.

Same with ejs,

Same thing, remove all ejs from entrypoints. HtmlWebpackPlugin will generate html according to the template, nothing else needs to be specified in entry.