Webpack 详解：网站资源打包的现代方式
Webpack究竟是什么？
第一个 Webpack 应用
添加装载机
添加插件
使用开发服务器
总结
感谢阅读
管理资源可能是一项繁琐的任务。幸运的是，现在有了打包工具可以简化这项工作。在本文中，我们将介绍Webpack，它是目前最流行的打包工具之一。
Webpack乍一看似乎非常令人生畏，但本文将确保您拥有足够的知识来自行配置Webpack 。
Webpack究竟是什么？
让我们看看谷歌是如何定义它的：“webpack 是一个开源的 JavaScript 模块打包器。它主要用于 JavaScript，但如果包含相应的加载器，它也可以转换前端资源，例如 HTML、CSS 和图像。webpack 接收带有依赖关系的模块，并生成代表这些模块的静态资源。”
你可能在定义中遇到了一些新术语，例如“装载机”。在继续之前，我们先来了解一下这些术语：
-
加载器：加载器是第三方扩展，可以帮助webpack处理各种文件扩展名。例如，有用于CSS 的加载器、用于图像的加载器等等。
加载器的目标是将文件（JavaScript除外）转换为模块。文件转换为模块后，webpack 就可以将其作为依赖项用于你的项目中。
-
插件：插件是第三方扩展程序，可以改变webpack 的工作方式。例如，有用于提取HTML、CSS以及处理微前端的插件。
第一个 Webpack 应用
让我们从小处着手。创建一个新文件夹，然后使用命令初始化一个新的 Node 项目npm init -y。使用以下命令安装webpack相关依赖项。npm i -D webpack webpack-cli
注意：Webpack依赖项应该始终是开发依赖项。
初始化以下文件：
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpack Demo</title>
</head>
<body>
<script src="../dist/bundle.js"></script>
</body>
</html>
// src/index.html
console.log("Hello Webpack!")
最后，将以下脚本添加到您的package.json：
"scripts": {
"build": "webpack --config webpack.config.js"
}
现在你可以使用它npm run build来生成dist/bundle.js和运行public/index.html以利用生成的软件包。
添加装载机
你可能会想：“就为了这个，要花这么多功夫？”别担心，我的朋友， Webpack 的神奇之处就在这里。
使用并更新添加file-loader到我们的项目中npm i -D file-loaderwebpack.config.js
module.exports = {
// ...
module: {
// defining the rules for additional modules, other than .js files
// you can very well use rules for .js files too, eg: using babel-loader
rules: [
{
// files the rule applies to (using RegEx is a good practice)
test: /\.(png|jpe?g|svg)$/,
// loaders & configuration
use: [
{
loader: 'file-loader',
// if you skip the options, the default options will be used
options: {
name: '[name].[ext]',
outputPath: 'images/',
},
},
],
},
],
},
};
现在您可以将图像文件导入到您的项目中。
// src/index.js
// NOTE: you can use ES Modules import/export statements
import natureImg from './assets/nature.jpg'
const img = document.createElement('img')
img.src = natureImg
document.body.appendChild(img)
运行build脚本生成文件。打开public/index.html
添加插件
现在我们来优化HTML 的处理方式，以便webpack自动将脚本文件添加到页面中。html-webpack-plugin使用以下命令添加脚本文件npm i -D html-webpack-plugin。
// webpack.config.js
// ...
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
};
移除script标签public/index.html。Webpack会注入脚本。它还会在dist文件夹中生成一个额外的文件，你可以使用该文件。index.html
使用开发服务器
频繁刷新页面会让人非常烦恼。为了解决这个问题，我们有webpack-dev-server……
使用以下命令安装依赖项npm i -D webpack-dev-server：
// webpack.config.js
// ...
module.exports = {
// ...
devServer: {
port: 3000, // default: 8000
},
};
最后，您还需要添加另一个脚本：
"start": "webpack serve --config webpack.config.js"
现在你可以使用它npm start来启动webpack 服务器了。
总结
这就是关于webpack你需要知道的一切……它只是一个模块打包器，允许你使用加载器和插件根据你的需求进行配置。你可以在以下文章中查看一些其他可用的插件：
希望你已经克服了对使用webpack的恐惧，并且这篇文章能对你的开发之旅有所帮助！
我目前正在开发一个使用完全自定义配置的Webpack 的项目，欢迎查看：
ruppysuppy /加密众筹
🤑💰 基于以太坊区块链的众筹平台，助您将创意项目变为现实
感谢阅读
需要一位顶尖的软件开发自由职业者来解决您的开发难题吗？请通过Upwork联系我。
想联系我？请在领英上联系我。
关注我的博客，即可在Medium上获取每两周更新的精彩内容。
常问问题
以下是一些我经常被问到的问题。希望这个常见问题解答部分能解答您的疑问。
-
我是新手，应该如何学习前端Web开发？
请参考以下文章： -
您愿意指导我吗？
抱歉，我已经工作很忙了，没有时间指导任何人。