1. Zero configuration of webpack

Webpack 4 supports zero configuration packaging (no webpack.config.js configuration file is required), first we can directly run webpack index.js (entry index.js) to compile packaging.

2. Directory structure

Create hello.js and index.js in the demo01 directory

// '--' represents directory, '-' represents file
--demo01
  --src
    -hello.js
    -index.js
Copy the code

hello.js

export function sayHello() { console.log('hello world! '); }Copy the code

index.js

import { sayHello } from './hello';
sayHello();
Copy the code

3. Run the webpack command

(You have global Webpack and webPack-CLI installed by default)

webpack ./src/index.js
Copy the code

After successful packaging, dist/main.js is generated in the demo01 directory

4. Verify the packaging results

node dist/main.js
Copy the code

Output: Hello world!

5. To summarize

  • Want to learn more about webpack commands?

    View the webpack parameter options by executing webpack –help.

  • Why main.js after packaging?

    When no output file name is specified for Webpack, webpack defaults to main.

    Try this: webpack. / SRC /index.js — output. /dist/[name]-[hash].js

  • Why is the main.js code so complicated?

    The Webpack generates a Runtime and manifest to manage the interaction of all modules, and this code is packaged into main.js.

    About the runtime and manifest: webpack.docschina.org/concepts/ma…

  • Code compressed?

    When no packaging mode for WebPack is specified, webpack defaults to use production mode for packaging, so the code is compressed.

    Try this: webpack. / SRC /index.js –mode development

6. Source address

Demo code address: github.com/SimpleCodeC…

Warehouse code address (and directory): github.com/SimpleCodeC…