Webpack4
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 | cnpm install -D webpack@4 |
在项目根目录中,创建名为 webpack.config.js
的 webpack 配置文件
在 webpack 的配置文件中,初始化如下基本配置:
1 | module.exports = { |
说明
将
mode
选项设置为development
或production
以启用此环境的默认值
在 package.json 配置文件中的 scripts 节点下,新增 dev 脚本如下:
1 | "scripts": { |
在终端中运行 命令,启动 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个配置 babel-loader 的选项:
- 使用 webpack 的配置文件
- 在你的 npm scripts 中使用
--module-bind
通过配置文件形式
给 webpack 添加一个配置文件,以最经典的方式使用 babel-loader
。
创建一个名为 webpack.config.js
的新文件并配置 loader(加载器) :
webpack.config.js 代码:
1 | module.exports = { |
除非您要自定义 entry point(入口点) ,否则无需指定它
scripts中配置参数形式
还有另一种方法来使用 webpack 的 loader(加载器)。
该参数不是特定于 webpack 4 的。 从版本 3 开始就有了。
要在没有配置文件的情况下使用 babel-loader ,请在 package.json 中配置你的 npm scripts,如下所示:
package.json 代码:
1 | "scripts": { |
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 | const HtmlWebPackPlugin = require("html-webpack-plugin"); |
接下来在 ./src/index.html
中创建一个 HTML 文件:
index.html 代码:
1 |
|
然后再次运行构建:
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 | body { |
配置插件和 loader(加载器):
webpack.config.js 代码:
1 | const HtmlWebPackPlugin = require("html-webpack-plugin"); |
最后在 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 | "scripts": { |
保存并关闭文件。
现在,通过运行以下命令:
CommandLine 代码:
1 | cnpm run start |
你会看到 webpack dev server 在浏览器中启动你的应用程序。
webpack dev server 非常适合开发。