webpack教程三：使用webpack的配置文件

最新推荐文章于 2025-05-14 11:09:53 发布

不睡觉的怪叔叔

最新推荐文章于 2025-05-14 11:09:53 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web

本文链接：https://blog.youkuaiyun.com/qq_35732147/article/details/90229009

Web 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍Webpack的配置与使用，包括配置文件的创建、NPM脚本的使用及打包输出内容解读，帮助读者理解Webpack如何高效整合项目资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用webpack的配置文件

二、使用NPM脚本

三、打包输出内容介绍

一、使用webpack的配置文件

进入上一节创建的webpack-demo目录，再新建一个src文件，放入以下几个文件：

header.js：

function Header(){
    var webContent = document.getElementById('webContent');
    var header = document.createElement('div');
    header.innerText = '网页标题';
    webContent.appendChild(header);
}
 
export default Header;

content.js:

function Content(){
    var webContent = document.getElementById('webContent');
    var content = document.createElement('div');
    content.innerText = '网页主体';
    webContent.appendChild(content);
}
 
export default Content;

footer.js:

function Footer(){
    var webContent = document.getElementById('webContent');
    var footer = document.createElement('div');
    footer.innerText = '网页页脚';
    webContent.appendChild(footer);
}
 
export default Footer;

index.js:

import Header from './header.js';
import Content from './content.js';
import Footer from './footer.js';
 
new Header();
new Content();
new Footer();

紧接着在webpack-demo的根目录创建dist文件夹，在dist文件夹中放入：

dist.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="webContent"></div>
 
    <script src="./main.js"></script>
</body>
</html>

然后，就可以使用webpack来进行对以上js文件的打包操作了：

可以发现，上面的js文件四个js文件：header.js、content.js、footer.js和index.js，都已经被打包成同一个文件main.js，并放置在dist文件夹中。

用浏览器打开，dist.html文件可以发现main.js的逻辑与预期相符：

那么webpack是怎么能理解这些文件结构目录从而能很好的将各个文件打包呢？

因为webpack有一个配置文件（webpack.config.js）的机制，以满足项目中打包操作的种种复杂设置，默认情况下，webpack有一个默认配置文件，里面包含了webpack的默认配置信息。

现在，可以在webpack-demo根目录中新建一个webpack.config.js配置文件：

webpack.config.js:

const path = require('path');

module.exports = {
    entry: './src/index.js',                // 打包的入口文件路径
    output: {
        filename: 'main.js',                // 出口文件的文件名
        path: path.resolve(__dirname, 'dist')       // 出口文件的绝对路径
    }
}

在配置文件中通过指定entry属性来配置入口文件信息，通过指定output属性来配置出口文件信息，其中path.resolve方法的作用是：把一个路径或路径片段的序列解析为一个绝对路径。所以这里出口文件的路径就是e:/webpack-demo/dist。

因此前面的npx webpack指令相当于npx webpack --config webpack.config.js，我们可以来尝试一下：

很明显，结果是一样的。

二、使用NPM脚本

因为打包的命令行指令可能比较长，所以我们可以使用NPM脚本的方式来进行快捷操作。

首先在package.json中加入一行NPM脚本：

然后就可以用新增加的NPM脚本进行打包了：

三、打包输出内容介绍

前面已经看到，在控制台中使用webpack进行打包操作，控制台会显示很多信息：

那么每一项都表示什么意思呢？

Hash —— 表示本次打包的唯一哈希值，即进行一次打包操作会有一个唯一的哈希值进行标识。
Version —— 当前webpack的版本。
Time —— 本次打包耗费的时间。
Built at —— 本次打包的日期时间
Asset —— 出口文件的文件名
Size —— 出口文件的大小

上面的配置文件其实等同于：

const path = require('path');

module.exports = {
    entry: {
        main: './src/index.js'              // 打包的入口文件路径
    },                
    output: {
        filename: 'main.js',                // 出口文件的文件名
        path: path.resolve(__dirname, 'dist')       // 出口文件的绝对路径
    }
}

Chunk Names 就表示entry属性中的main，而Chunks就表示main属性在entry对象中的位置索引（有时会有多个入口文件）。

Entrypoint —— 入口文件的Chunk Names以及对应的出口文件
接下来的内容就是表示被打包的所有文件
WARNING in configuration —— 表示需要在配置文件中指定mode属性，可以指定为"production"或者"development"，默认情况下为"production"。

例如：

webpack.config.js:

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'              // 打包的入口文件路径
    },                
    output: {
        filename: 'main.js',                // 出口文件的文件名
        path: path.resolve(__dirname, 'dist')       // 出口文件的绝对路径
    }
}