πŸ“¦ webpack secrets

・1 min read

What webpack secrets or less commonly known features do you know? This also includes loaders or plugins that not everyone might be aware of. Please share so we can all become webpack enlightened. πŸ˜‰

I'll start. Did you know that you can write your webpack config in TypeScript if you have the ts-node dev dependency installed? Type checking for my webpack config? Yes please!

Did you find this post useful? Show some love!
DISCUSSION (5)
 

webpack-shell-plugin allows you to run arbitrary shell commands as part of your build. We've used this for a couple of complicated file-moving maneuvers that webpack would've otherwise choked on a bit.

 

Thanks for the share Dane! This looks very handy.

 

For those using TypeScript, the Fork TS Checker Webpack plugin is a must for any somewhat large project.

It allows you to run the TypeScript type checker in a separate process which results in faster builds.

Realytics / fork-ts-checker-webpack-plugin

Webpack plugin that runs typescript type checker on a separate process.

Fork TS Checker Webpack Plugin

Npm version Build Status

Webpack plugin that runs typescript type checker on a separate process.

Installation

This plugin requires minimum webpack 2.3, typescript 2.1 and optionally tslint 4.0

npm install --save-dev fork-ts-checker-webpack-plugin

Basic webpack config (with ts-loader)

var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
var webpackConfig = {
  context: __dirname, // to automatically find tsconfig.json
  entry: './src/index.ts'
  module: {
    rules: [
      {
        test: /\.tsx?$/
        loader: 'ts-loader',
        options: {
          // disable type checker - we will use it in fork plugin
          transpileOnly: true 
        }
      }
    ]
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin()
  ]
};

Motivation

There is already similar solution - awesome-typescript-loader. You can add CheckerPlugin and delegate checker to the separate process. The problem with awesome-typescript-loader was that, in our case it…

Where I used to work, we had a very large project and it brought down the initial webpack build time from 2 minutes to 25-30 seconds.

And it looks like they also have an alpha out for webpack 5.

 

I usually find maintaining webpack configurations difficult. With either splitting prod and development configs or conditionally do some stuff based on an environment, that can get messy real quick.

I've been using the following for configuring some parts based on the environment for instance. I feel it has been keeping most of the config terse and easier to read.

kentcdodds / webpack-config-utils

Utilities to help your webpack config be easier to read

webpack-config-utils

Utilities to help your webpack config be easier to read

Build Status Code Coverage Dependencies version downloads MIT License

All Contributors PRs Welcome Donate Code of Conduct Roadmap Examples

The problem

Webpack configuration is a JavaScript object which is awesomely declarative. However, often the webpack config file is can easily turn into an imperative mess in the process of creating the configuration object.

This solution

The goal of this project is to provide utilities to make it easier to compose your config object so it's easier for people to read. It has some custom methods and also comes bundled with some other projects to expose some helpful utility functions.

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev webpack-config-utils

Usage

It is expected that you use this in your webpack.config.js file.

Protip: You can name your config file webpack.config.babel.js and it'll be automagically transpiled! (Make sure you have babel-register installed.) So…



 

Thanks for sharing Thomas. πŸ”₯ Is there anything Kent C. Dodds can't do? πŸ˜‚

Classic DEV Post from Nov 17 '18

Why is the software industry so competitive?

It seems like software developers are often pitted against one another in some ...

Nick Taylor
Just some dev on the Shotgun team #TypeScript #reactjs #JavaScript #nodejs, c#/asp.net once upon a time.

Thanks for visiting dev.to

A Beginner's Guide to dev.to