webpack教程：如何从头开始设置 webpack 5( 二 ) 本文已经过原作者TaniaRascia授权

接着，在index.js中我们动态插入一些 dom 元素到页面中，内容如下：
// Create heading nodeconst heading = document.createElement('h1')heading.textContent = 'Interesting!'// Append heading node to the DOMconst app = document.querySelector('#root')app.append(heading)重新构建，在进入 dist 目录下面，用 http-server 运行 html 文件。
http-server可以在页面上看到，我们注入的 "Interesting!" ，还会注意到捆绑文件已缩小。
注意:在安装HtmlWebpackPlugin后，你会看到一个DeprecationWarning ，因为插件在升级到webpack 5后还没有完全摆脱deprecation警告。
Clean我们还需要设置clean-webpack-plugin,在每次构建后清除dist文件夹中的所有内容。这对于确保不遗留任何旧数据很重要。
clean-webpack-plugin-删除/清理构建文件夹
const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const {CleanWebpackPlugin} = require('clean-webpack-plugin')module.exports = {/* ... */plugins: [/* ... */new CleanWebpackPlugin(),],}Modules and Loaderswebpack 使用 loader 预处理一些加载的文件，如 js 文件、静态资源(如图像和CSS样式)和编译器(如TypeScript和Babel) 。 webpack 5也有一些内置的资产加载器。
在我们的项目中，有一个HTML文件，该文件可以加载并引入一些 JS，但实际上并没有执行任何操作。那么这个webpack配置要做的主要事情是什么？

将 JS 编译为浏览器可以理解的版本
导入样式并将 SCSS 编译为 CSS
导入图像和字体
（可选）设置React或Vue

Babel (JavaScript)Babel是一个工具，可让使用最新的 JS 语法。
建立一个规则来检查项目中（node_modules之外）的任何.js文件，并使用babel-loader进行转换。 Babel 还有一些其他的依赖项：

babel-loader-使用 Babel 和 webpack 传输文件。
@babel/core-将ES2015+ 转换为向后兼容的 JavaScript
@babel/preset-env-Babel 的智能默认设置
@babel/plugin-proposal-class-properties-自定义 Babel 配置的示例（直接在类上使用属性）

npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-env @babel/plugin-proposal-class-propertieswebpack.config.js

module.exports = {/* ... */module: {rules: [// JavaScript{test: /\.js$/,exclude: /node_modules/,use: ['babel-loader'],},],},}

如果是 TypeScript 项目，使用的是typescript-loader而不是babel-loader 。
现在Babel已经设置好了，但是我们的Babel插件还没有。可以在index.js中添加一些新的语法来证明它还不能正常工作。

// 创建没有构造函数的类属性class Game {name = 'Violin Charades'}const myGame = new Game()// 创建 p 节点const p = document.createElement('p')p.textContent = `I like ${myGame.name}.`const heading = document.createElement('h1')heading.textContent = 'Interesting!'const app = document.querySelector('#root')app.append(heading, p)

文章插图
要解决这个问题，只需在项目的根目录中创建一个.babelrc文件。可以使用preset-env和plugin-proposal-class-properties添加更多默认值。
{"presets": ["@babel/preset-env"],"plugins": ["@babel/plugin-proposal-class-properties"]}现在运行npm run build 一切准备就绪。
Images假设我们需要引用一张图片并直接导入到 JS 文件中，这样是无法正常工作的。为了演示，创建 src/ images 并向其中添加图像，然后尝试将其导入到index.js文件中。
src/index.js
import example from './images/example.png'/* ... */运行构建时，再次看到错误：

文章插图
webpack有一些内置的asset modules，可用于静态资源。对于图像类型，我们将使用asset/resource,注意，这里是一个type ，而不是loader 。
webpack.config.js

module.exports = {/* ... */module: {rules: [// Images{test: /\.(?:ico|gif|png|jpg|jpeg)$/i,type: 'asset/resource',},],},}

构建后，可以在dist文件夹查看。
字体和内联webpack 还有一个asset module，可以使用asset/inline内联某些数据，例如svgs和字体。
src/index.js
import example from './images/example.svg'/* ... */webpack.config.js

module.exports = {/* ... */module: {rules: [// Fonts and SVGs{test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,type: 'asset/inline',},],},}

Styles同样的需要使用 style loader才能在脚本中执行类似import 'file.css'的操作。
现在很多人都在使用CSS-in-JS、styled-components和其他工具来将样式引入到他们的 JS 应用程序中。