WebPack Programming


Webpack.config.js  

devServer element

This code in webpack.config.js:

devServer: {

   inline: true,

   hot:true

 }

...configures arguments to be passed to a call of webpack-dev-server

You can configure the same thing in package.json:

{

    scripts:  {“start”: “webpack-dev-server --hot --inline”}

}

Loaders element

module loaders say what webpack should do with files that are require()’d in your javascript.

 loaders: [{

  test: /\.css$/,

  loader: ‘style!css’          <--(short for style-loader!css-loader)

 }]

…says that when require(‘./foo.css’) is encountered, run it through CSS-loader and then style-loader. (Always from right to left)

Note you could also do:

var myLoaders = [’style’, ’css’];

…loader: myLoaders.join(‘!’);

style-loader will place the css from the file within <style></style> tags.

You can use module loaders without webpack at all:

require("style!css!./foo.css")

The purpose of css-loader is to resolve calls to @import and url(), outputting them to a single stream of css.

Passing arguments to loaders.  There are two ways, with query string style syntax, or with the query element:

{  test:  /\.png$/.

   loader: “url-loader?limit=1024”

}

        OR

{  test:  /\.png$/.

   loader: “url-loader”,

   query: {limit: 1024}

}

Resolve element

“These options change how modules are resolved. webpack provides reasonable defaults, but it is possible to change the resolving in detail.”

See https://webpack.js.org/configuration/resolve/ for best documentation.

  • “For example, when calling import "lodash" in ES2015, the resolve options can change where webpack goes to look for "lodash"
  • resolve.alias functions a little like routing.  You can define nicer looking paths for your imports, e.g. Utilities/utility instead of ../../utilities/utility.  Note that the dollar sign has special syntactical meaning for aliases.
  • resolve.extensions:  specify a list of extensions to be honored without having to use them in your requires & imports, e.g. extensions: [".js", ".json"]
  • resolve.enforceExtension: set this to true and your app requires using extensions on your imports, eg only require('./foo.js') will work
  • resolve.mainfiles:  this is what allows index.js, index.html to be default files for a directory, e.g. using mainFiles: ["index"] (which I believe is the default config)
  • resolve.modules: how you tell webpack to use your node_modules dir for the location of your modules, e.g. modules: ["node_modules"].  So if you want to can override this, choose a different location, add other locations, or specify preference order.

Misc

What does filename: [name].js mean?

[name] is a wildcard/alias that really only makes sense when there are multiple entry points that each compiling to different bundles.  Example:

        entry: {

                "index": "./src/index.js",

                "profile": "./src/profile.js"

        }

There will be two entry points, and to have each produce its own bundle:

        output: {

                path: "/dist",

                filename: "[name].js"

        }

So the bundles will be /dist/index.js and /dist/profile.js.

If a project had only one entry point and bundle, you might still see [name].js, and it will work as expected.  But the output filename could have been explicitly named.

Source Maps

 A source map provides a way of mapping code within a compressed file back to it’s original position in a source file.

Loaders vs. Plugins

  • Loaders work at the individual file level during or before the bundle is generated.
  • Plugins work at bundle or chunk level and usually work at the end of the bundle generation process.  That’s why ExtractTextPlugin is a plugin…because it extracts text from a bundle.

webpack-dev-server

When you run this only, it does bundling internally in the web server.  That’s why you have code that reads <script src="./bundle.js"></script> yet you don’t have a physical bundle.js file.

If you run webpack command first (typically via an npm run build command), then it will create the physical bundle.js.

Advantages

Why not just use express?

  • webpack-dev-server makes it easy to set up Live Reloading and Hot Module Replacement

Links

Tip


Links marked with arrow icons ( or ) will open in a new tab.

You will see this message only once.