How to skip Javascript output in Webpack 4?

webpack output
webpack output filename function
webpack output css
webpack output is served from
webpack libraryexport
webpack hash
minicssextractplugin
bundlejs

I use Webpack 4 in a project where I only need to compile and bundle styles so far. There's no Javascript.

Here's the config I have:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    'css/bundle': path.resolve(__dirname, 'static/scss/index.scss'),
  },
  output: {
    path: path.resolve(__dirname, 'static'),
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        include: path.resolve(__dirname, 'static/scss'),
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin(),
  ],
};

The problem is that it outputs two files: bundle.css and bundle.js. Is there a way to configure Webpack so that it doesn't output the Javascript bundle? I tried to navigate the docs, tried a dozen different things, but it didn't really work.

One important note here is that if I remove the css-loader, bundling fails. So while css-loader is most likely responsible for outputting the bundle.js file, I'm not entirely sure how to avoid using it.

webpack-extraneous-file-cleanup-plugin has no effect with webpack 4.12.0.

I can suggest to remove bundle.js manually with on-build-webpack plugin:

var WebpackOnBuildPlugin = require('on-build-webpack');

// ...

plugins: [
    // ...

    new WebpackOnBuildPlugin(function () {
        fs.unlinkSync(path.join('path/to/build', 'bundle.js'));
    }),
],

css loader - How to skip Javascript output in Webpack 4?, Unfortunately, this is just the way that webpack currently works. However, we are not alone in this problem! There's a plugin to cleanup any unwanted files:. The minimum requirement for the output property in your webpack configuration is to set its value to an object and provide an output.filename to use for the output file(s): webpack.config.js. module. exports = {output: {filename: 'bundle.js',}}; This configuration would output a single bundle.js file into the dist directory. Multiple Entry Points

Unfortunately, this is just the way that webpack currently works. However, we are not alone in this problem! There's a plugin to cleanup any unwanted files:

install the plugin:

yarn add webpack-extraneous-file-cleanup-plugin -D

and then in your config:

const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin');

plugins: [
  new ExtraneousFileCleanupPlugin({
    extensions: ['.js'],
    minBytes: 1024,
    paths: ['./static']
  }),
]

Output, The callback function name used by webpack for loading of chunks in Web Workers. webpack.config.js module.exports = { // output:  The default value of output.ecmaVersion in webpack 4 is 5. output.compareBeforeEmit. boolean = true. Tells webpack to check if to be emitted file already exists and has the same content before writing to the output file system. webpack will not write output file when file already exists on disk with the same content.

I simply delete the output with a new task "cleanjs" in package.json:

"scripts": {
    "clean": "rimraf dist",
    "cleanjs": "rimraf dist/assets/js",
    "dev": "webpack-dev-server --progress --hide-modules --mode development",
    "build": "npm run clean && webpack --hide-modules --mode production && npm run cleanjs"
  },

This task is then called at the end of the build process (see the build task).

Output Management, webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging​  webpack supports ES2015+, CommonJS and AMD modules out of the box. It performs clever static analysis on the AST of your code. It even has an evaluation engine to evaluate simple expressions. This allows you to support most existing libraries out of the box. Code Splitting. webpack allows you to split your codebase into multiple chunks.

Optimization, webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging​  webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Don't output empty JS files · Issue #151 · webpack-contrib/mini-css , Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also Naming · Entry descriptor · Output filename · Dependencies · Dynamic entry Since version 4 webpack runs optimizations for you depending on the chosen webpack will enable it by default for mode development and disable for mode  Since version 4 webpack runs optimizations for you depending on the chosen mode, still all optimizations are available for manual configuration and overrides. optimization.minimize. Tell webpack to minimize the bundle using the TerserPlugin or the plugin (s) specified in optimization.minimizer. This is true by default in production mode.

How to ignore a module with webpack, @tiendq I don't want Webpack to output a JS file for CSS. is to use this plugin - https://github.com/medfreeman/ignore-assets-webpack-plugin We use ts-loader in this guide as it makes enabling additional webpack features, such as importing other web assets, a bit easier. Source Maps. To learn more about source maps, see the development guide. To enable source maps, we must configure TypeScript to output inline source maps to our compiled JavaScript files.

Comments
  • I guess this is not possible, because wp is in the first place a JavaScript bundler. I would use a plugin which cleans up the dist folder after emit..
  • I ran the cleanup task on npm level, but this solution looks sharp, thanks!
  • That’s the problem: it’s okay to run consecutive commands once, but it won’t work the same way in watch mode. I could use concurrently and run a clean task, but it feels unnatural, as if I’d be using two wrong tools instead of the right one.