Getting Started with Webpack 4.x

Overview

New Project

npm init -y

Install webpack & webpack-cli

(c)npm install -D webpack
(c)npm install -D webpack-cli

# 查看webpack版本
(npx )webpack --version

Try packing

src/index.js

document.write('Hello Webpack -Mazey')

dist/index.html

<!doctype html>
<html>
    <head>
        <title>Start Webpack</title>
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
</html>

webpack.config.js

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

The project command line runs:

webpack --config webpack.config.js --mode development

# 出现
Hash: 1ae48c1f7dc49168e983
Version: webpack 4.6.0
Time: 63ms
Built at: 2018-05-03 14:37:02
    Asset      Size  Chunks             Chunk Names
bundle.js  2.84 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/index.js] 38 bytes {main} [built]

At this point , there is a bundle.js file under dist/ , open dist/index.html and Hello Webpack -Mazey appears .

Custom scripts in package.json

{
  // ...
  "scripts": {
    "dev": "webpack --config webpack.config.js --mode development",
    "build": "webpack --mode production"
  },
  // ...
}


# or

{
  // ...
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors",
    "deploy": "NODE_ENV=production webpack -p"
  },
  // ...
}

Then the command line npm run devrun is equivalent to webpack --config webpack.config.js --mode development.

1. Entry [entry]

grammar

1. Single entry syntax

entry: string|Array<string>

Example:

// ...
entry: './src/index.js'
// ...

# 等于

// ...
entry: {
    main: './src/index.js'
}
// ...

2. Object syntax

entry: {[entryChunkName: string]: string|Array<string>}

Example:

// ...
entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
}
// ....

2. Output [output]

grammar

// ...
output: {
    filename: <output filename>,
    path: <path>
}
// ...

filename: The filename to use for the output file.
path: Absolute path to the target output directory.

Example:

const path = require('path')

const config = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

module.exports = config

If multiple entries are configured, placeholders are required to ensure that each file has a unique name .

// ...
filename: '[name].js',
// ...

3. Mode [mode]

grammar

mode: string

development: will set the value of process.env.NODE_ENV to development. Enable NamedChunksPlugin and NamedModulesPlugin.
production: will set the value of process.env.NODE_ENV to production. Enable FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin and UglifyJsPlugin.

After setting the mode , it is not necessary to bring it after the command --mode development.

Fourth, the loader? [loader]

grammar

module: {
    rules: [
      { test: <.*>, use: <loader> },
      { test: <.*>, use: <loader> }
    ]
}

test: Identifies the file or files that should be converted by the corresponding loader.
use: Indicates which loader should be used when converting.

Example:

const path = require('path')

const config = {
  // ...
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' }
    ]
  }
}

module.exports = config

When encountering require()/import" the path that is parsed as .css in the statement", use css-loader to convert it before packaging .

Five, plug-ins [plugins]

grammar

const <PluginName> = require(<plugin-name>)
// ...
plugins: [
    new <PluginName>({
        <attribute>: <value>
    })
]

To use a plugin, you just need require()it and add it to the plugins array.