Webpack4入门

Webpack4

webpack 概述

官方文档:https://webpack.html.cn/

webpack 4 带来了什么是新特性?大规模的性能改进,零配置和智能的默认设置。

webpack 4 中零配置的概念适用于:

  • entry point(入口点) 默认为 ./src/index.js
  • output(输出) 默认为 ./dist/main.js
  • production(生产)development(开发) 模式 (无需为生产和开发环境创建2个单独的配置)

目前还是建议用Webpack4不建议使用Webpack5

Webpack4

  • babel-loader@7
  • babel-core 6.x

Webpack5

  • babel-loader@8
  • babel-core 7.x

基本配置

添加cnpm

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

创建项目

1
mkdir demo002 && cd $_

运行 命令,安装 webpack 相关的包 (需要管理员身份)

1
2
cnpm install -D webpack@4
cnpm install -D webpack-cli

在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件

在 webpack 的配置文件中,初始化如下基本配置:

1
2
3
module.exports = {
mode: 'development' // mode 用来指定构建模式
}

说明

mode 选项设置为 developmentproduction 以启用此环境的默认值

在 package.json 配置文件中的 scripts 节点下,新增 dev 脚本如下:

1
2
3
"scripts": { 
"dev": "webpack"
},

在终端中运行 命令,启动 webpack 进行项目打包。

1
cnpm run dev

将原来引入的js文件改为dist目录下的main.js文件

从 webpack 4 开始,不再必须定义 entry point(入口点) :它将默认为 ./src/index.js

用 Babel 7 转译 Javascript ES6

现代 Javascript 主要是用 ES6 编写的。

但并非每个浏览器都知道如何处理 ES6 。 我们需要某种转换。

这个转换步骤称为 transpiling(转译)。 transpiling(转译)是指采用 ES6 并使旧浏览器可以理解的行为。

Webpack 不知道如何进行转换但是有 loader(加载器) :将它们视为转译器。

babel-loader 是一个 webpack 的 loader(加载器),用于将 ES6 及以上版本转译至 ES5 。

要开始使用 loader ,我们需要安装一堆依赖项。 尤其是:

  • babel-core
  • babel-loader
  • babel-preset-env 用于将 Javascript ES6 代码编译为 ES5

我们开始动手吧:

CommandLine 代码:

1
cnpm i babel-core babel-loader@7 babel-preset-env --save-dev

接下来,通过在项目文件夹中创建名为 .babelrc 的新文件来配置 Babel :

.babelrc 代码:

1
2
3
{
"presets": ["env"]
}

此时我们有2个配置 babel-loader 的选项:

  • 使用 webpack 的配置文件
  • 在你的 npm scripts 中使用 --module-bind

通过配置文件形式

给 webpack 添加一个配置文件,以最经典的方式使用 babel-loader

创建一个名为 webpack.config.js 的新文件并配置 loader(加载器) :

webpack.config.js 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};

除非您要自定义 entry point(入口点) ,否则无需指定它

scripts中配置参数形式

还有另一种方法来使用 webpack 的 loader(加载器)。

该参数不是特定于 webpack 4 的。 从版本 3 开始就有了。

要在没有配置文件的情况下使用 babel-loader ,请在 package.json 中配置你的 npm scripts,如下所示:

package.json 代码:

1
2
3
4
"scripts": {
"dev": "webpack --mode development --module-bind js=babel-loader",
"build": "webpack --mode production --module-bind js=babel-loader"
}

HTML webpack 插件

webpack 需要两个额外的组件来处理HTML:html-webpack-plugin 和 html-loader。

添加依赖项:

CommandLine 代码:

1
cnpm i html-webpack-plugin html-loader --save-dev

然后更新 webpack 配置:

webpack.config.js 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [{
loader: "html-loader",
options: {
minimize: true
}
}]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};

接下来在 ./src/index.html 中创建一个 HTML 文件:

index.html 代码:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>webpack 4 quickstart</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

然后再次运行构建:

CommandLine 代码:

1
npm run build

并查看 ./dist 文件夹。 您应该看到生成的 HTML 。

没有必要在 HTML 文件中引入您的 Javascript :bundle(包) 会自动注入。

在浏览器中打开 ./dist/index.html :您应该看到 React 组件正常工作!

正如您所看到的,在处理 HTML 方面没有任何改变。

webpack 4 仍然是一个针对 Javascript 的模块打包器。

但是有计划将 HTML 添加为模块(HTML作为 entry point(入口点))

CSS webpack 插件

webpack 不知道如何将 CSS 提取到一个文件中。

在过去,这是 extract-text-webpack-plugin 的工作。

不幸的是,这个插件与 webpack 4 不太兼容。

根据 Michael Ciniawsky 的说法:

extract-text-webpack-plugin 的维护已经成为了一个很大的负担,这已经不是第一次因为它的问题,而使升级 webpack 主版本变的而复杂和繁琐

mini-css-extract-plugin 可以解决这些问题。

注意:确保将 webpack 更新到 4.2.0 版。 否则 mini-css-extract-plugin 将无效!

使用以下命令安装该插件和 css-loader :

CommandLine 代码:

1
npm i mini-css-extract-plugin css-loader --save-dev

接下来创建一个用于测试的 CSS 文件:

css 代码:

1
2
3
body {
line-height: 2;
}

配置插件和 loader(加载器):

webpack.config.js 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};

最后在 entry point(入口点) import(导入) CSS:

index.js 代码:

1
import style from "./main.css";

然后再次运行构建:

CommandLine 代码:

1
npm run build

并查看 ./dist 文件夹。你应该看到生成的CSS!

回顾一下:extract-text-webpack-plugin 不适用于webpack 4 。请改用 mini-css-extract-plugin 代替。

webpack dev server

每当你对代码进行更改时,运行 npm run dev ? 远非我们的理想。

使用 webpack 配置开发服务器只需一分钟。

配置好的 webpack dev server 将在浏览器中启动您的应用程序。

每次更改文件时,它都会自动刷新浏览器的窗口。

要设置 webpack dev server,请安装包:

CommandLine 代码:

1
cnpm i webpack-dev-server --save-dev

接下来打开 package.json 并调整 scripts ,如下所示:

package.json 代码:

1
2
3
4
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},

保存并关闭文件。

现在,通过运行以下命令:

CommandLine 代码:

1
cnpm run start

你会看到 webpack dev server 在浏览器中启动你的应用程序。

webpack dev server 非常适合开发。