0cjs! Webpack4 tutorial: Building React app without config file.
Tags: webpack, react, javascript
Published: 2018-02-03 15:42:34

---
title: "0cjs! Webpack4 tutorial: Building React app without config file."
published: true
description: I've tried to build React app without config file of webpack.
tags: webpack,react,javascript
---

~~On January, webpack4 was pre-released as beta.0.~~
On February 25, webpack4 was released 🎉
Webpack4 doesn't need a config file by default!
It made me excited and I tried to build My React app without webpack config.

# About webpack4
Please refer to the links below.

- [Release v4.0.0-beta.0 · webpack/webpack](https://github.com/webpack/webpack/releases/tag/v4.0.0-beta.0)
- [webpack 4 beta — try it today!](https://medium.com/webpack/webpack-4-beta-try-it-today-6b1d27d7d7e2)
- [Webpack 4 tutorial: All You Need to Know, from 0 Conf to Production Mode](https://www.valentinog.com/blog/webpack-4-tutorial/)
- [Release v4.0.0 · webpack/webpack](https://github.com/webpack/webpack/releases/tag/v4.0.0)


# Other tools
- babel-preset-env
- babel-preset-react
- flow

# My webpack config

```js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    'index': [
      path.resolve(__dirname, 'src/index.js')
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'public'),
    publicPath: '/',
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new webpack.optimize.UglifyJsPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
      },
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

```
# How to use webpack4

## Install
You have to install webpack 4 and webpack-cli.
From webpack 4, webpack-cli is necessary to execute webpack on command line.

```bash
npm install --save-dev webpack webpack-cli
```

## Build without config


### module-bind

First, I executed webpack with no config and no options.
Error occurred.

```
Module parse failed: Unexpected token (15:6)
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <div>
```

Above error means that babel is invalid and webpack doesn't analyze jsx syntax.
With config, below code solves this error.

```js
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      use: 'babel-loader',
    },
  ]
},
```

if you want to use babel-loader, you need to use `--module-bind` options.
usage: `--module-bind {extension}={loader-name}`

```
webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader'
```

### resolve-extensions
Though `--module-bind` option is valid, other error occurred.

```
Module not found: Error: Can't resolve './Foo' in '/path/to/src'
```

This error means that import modules failed,
The reason why this error occurred is that I've omitted extensions like below code.

```js
import Foo from 'components/Foo'
```

With config, below soloves this error.

```js
resolve: {
  extensions: ['.js', '.jsx'],
},
```

Webpack4 has `--resolve-extensions` cli-option.
Setup extensions that should be used to resolve modules (e.g. `--resolve-extensions .js,.jsx`)
Using `--module-bind` and `--resolve-extensions` options,

```
webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader' --resolve-extensions .js,.jsx 
```

### mode
Ok, Errors have been resolved 😊
But warning is displayed.

```
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. 
```

quote from [Release Note v4.0.0-beta.0](https://github.com/webpack/webpack/releases/tag/v4.0.0-beta.0)

- You have to choose (mode or --mode) between two modes now: production or development
 - production enables all kind of optimizations to generate optimized bundles
 - development enables comments and hint for development and enables the eval devtool
  - WIP: addition hints in development mode
 - production doesn't support watching, development is optimized for fast incremental rebuilds
 - production also enables module concatenating (Scope Hoisting)
 - You can configure this in detail with the flags in optimization.* (build your custom mode)
 - process.env.NODE_ENV are set to production or development (only in built code, not in config)
 - There is a hidden none mode which disables everything

`--mode` option has to be added.

```
webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader' --resolve-extensions .js,.jsx --mode production
```

### entry
You can specify the entry point.
`--entry src` means that the entry point is `src/index.js`.
`--entry src/foo.js` means that the entry point is `src/foo.js`

### output
Also, you can specify the output point.
`--output public` means that the output directory is `public`.
`--output public/index.bundle.js` means that the output directory is `public` and output file name is `index.bundle.js`.
`-o` is the shorthand of `--output`.

### Filnal

```
webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader' --resolve-extensions .js,.jsx --mode production --entry ./src --output public/index.bundle.js
```

## Other options
You can know the other options with `--help` option.

```
webpack --help
```

# Further reading
- [Release v4.0.0-beta.0 · webpack/webpack](https://github.com/webpack/webpack/releases/tag/v4.0.0-beta.0)
- [webpack 4 beta — try it today!](https://medium.com/webpack/webpack-4-beta-try-it-today-6b1d27d7d7e2)
- [Webpack 4 tutorial: All You Need to Know, from 0 Conf to Production Mode](https://www.valentinog.com/blog/webpack-4-tutorial/)
- [Keep webpack Fast: A Field Guide for Better Build Performance](https://slack.engineering/keep-webpack-fast-a-field-guide-for-better-build-performance-f56a5995e8f1)

Thank you.