1. About webPack configuration files

In Demo01, we use webpack xxxxx.js to specify file names for code packaging, which is inconvenient.

Webpack is highly configurable. Webpack.config. js is the default configuration file name for Webpack. When running webpack directly, Webpack is packaged according to webpack.config.js by default.

Webpack has four core concepts:

  • The entrance (entry)
  • Output (output)
  • loader
  • The plug-in (plugins)

Specific reference webpack document: www.webpackjs.com/concepts/

2. Directory structure

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

src/hello.js

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

src/index.js

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

3. Write a WebPack configuration file

webpack.config.js

const path = require("path"); Module. exports = {mode: 'development', // There are development modes and production modes entry: {SRC: Resolve: {path: path.resolve(__dirname, "dist"), "app.bundle.js" } };Copy the code

4. Run the package command

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

webpack
Copy the code

After successful packaging, dist/app.bundle.js is generated in the demo02 directory

5. Verify the packaging results

node dist/app.bundle.js
Copy the code

Output: Hello world!

6. Source address

Demo code address: github.com/SimpleCodeC…

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