image.png
默认零配置：拥有默认入口和出口
image.png

初始化

环境

node

安装

创建目录初始化项目

  1. npm init -y

安装指定版本的 webpack 和 webpack-cli

  1. npm i webpack@4 webpack-cli@3 --save--dev

查看 webpack 的版本

  1. node_modules/.bin/webpack -v

image.png

简单例子

image.png
编写完后运行，引入到 html 文件中

  1. // 运行 webpack
  2. node_modules/.bin/webpack
  3. // 或者直接简单点儿
  4. webapck

image.png
页面如下
image.png

通过npm script 运行 webpack

image.pngimage.png

Entry

image.png
image.png

Output

image.png
image.png
image.png
多页面配置
image.png
再次打包，出现了两个 js 文件
image.png

Loaders

image.png

常见loader

image.png

Plugins