2025年webpack使用详解

大家好，我是讯享网，很高兴认识大家。

基本命令

npm init -y
npm install webpack webpack-cli --save-dev
执行 npx webpack，会将我们的脚本作为入口起点 src/index.js，然后输出为 main.js
loader系统中baber 转译ES6
npx webpack 打包构建
npx webpack --config webpack.config.js 构建

目录结构

配置文件

 const path = require('path'); module.exports = { 
    entry: './src/index.js', output: { 
    filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { 
    rules: [ { 
    test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } };

讯享网

脚本启动

考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本
通过向 npm run build 命令和你的参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build – --colors。
在这里插入图片描述
讯享网

资源管理

grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。

加载 CSS

为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中安装并添加 style-loader 和 css-loader：

加载图片

假想，现在我们正在下载 CSS，但是我们的背景和图标这些图片，要如何处理呢？使用 file-loader，我们可以轻松地将这些内容混合到 CSS 中：

加载字体

那么，像字体这样的其他资源如何处理呢？file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。

加载数据

管理输出

并且一旦开始对文件名使用哈希(hash)]并输出多个 bundle，手动地对 index.html 文件进行管理，一切就会变得困难起来。

HtmlWebpackPlugin

html-webpack-plugin
创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。
如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的名称，会发生什么？生成的包将被重命名在一个构建中，但是我们的index.html文件仍然会引用旧的名字。我们用 HtmlWebpackPlugin 来解决这个问题。

清理 /dist 文件夹

clean-webpack-plugin
每次构建前清理 /dist 文件夹
注意

讯享网const { 
   CleanWebpackPlugin} = require('clean-webpack-plugin'); // plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ 
    title: 'Output Management' }) ],

开发

source map

为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

开发工具

每次要编译代码时，手动运行 npm run build 就会变得很麻烦。

webpack 中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码：

webpack’s Watch Mode
观察模式
如果其中一个文件被更新，代码将被重新编译，所以你不必手动运行整个构建。
webpack-dev-server
–save-dev webpack-dev-server
webpack-dev-middleware
–save-dev express webpack-dev-middleware
中间件(middleware)
webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。接下来是一个 webpack-dev-middleware 配合 express server 的示例。

首先，安装 express 和 webpack-dev-middleware：

模块热替换

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。