webpack基础配置

最新推荐文章于 2025-04-01 14:26:47 发布

ygman

最新推荐文章于 2025-04-01 14:26:47 发布

阅读量1.3k

点赞数 1

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/one_girl/article/details/107914827

版权

这篇博客详细介绍了webpack的基础配置，包括入口、输出、配置文件、NPM脚本等。通过实例展示了如何设置entry和output，以及如何使用配置文件打包项目。还讲解了webpack的loader和插件，以及如何自动生成引入打包后js的页面。

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

webpack的基础配置已经学习过无数遍，每次都是学完就忘，这次决定记录下来，把自己学习的过程记录下来，一是为了加强记忆，二是为了以后方便回顾。

背景

webpack是一款目前来说应用特别广泛的打包工具，也是提升前端开发level的一个重要技能。本篇主要探讨下webpack的入口、输出等，比较基础如果已经非常熟悉webpack了可不必细读也可绕道。

概念

官网的定义：（官网地址）

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

webpack是一个静态模块打包器，所谓的静态模块，包括脚本、样式表和图片等等。它所做的事情是：分析项目结构，根据资源引用构建出一个依赖关系图，然后再将模块划分打包出一个或多个bundle。
在这里插入图片描述
先理解webpack的四个核心概念

入口entry：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
输出output：在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为 ./dist。
loader：处理那些非 JavaScript 文件（webpack自身只理解 JavaScript）
插件(plugins)：用于执行范围更广的任务

基本安装

先在全局安装webpack

npm install webpack webpack-cli –g

打包一个bundle.js

从 webpack v4.0.0 开始，可以不用引入一个配置文件，直接通过命令行创建，这里的entry和output就对应了上述概念中的入口和输入。

webpack <entry> [<entry>] -o <output>

举个栗子
原文件

// demo1/index.js
console.log('hello webpack')

打包

webpack index.js -o dist/bundle.js

最后生成的目录
在这里插入图片描述
我们也可以在项目目录新建一个html引入打包后的bundle.js文件查看效果。

配置文件

上面演示了命令行打包的方式，然而实际项目都比较复杂需要很多配置，所以我们尝试下用配置文件来打包。

配置

配置文件的命令如下

webpack [--config webpack.config.js]

项目结构

webpack-demo/demo2
  |- package.json
  |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js

const path = require('path');
// 通过module.exports导出一个配置对象，还可以导出为一个函数或者是Promise 有兴趣可以自己去了解
module.exports = {
   
  entry: './src/index.js',
  output: {
   
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

运行

webpack --config webpack.config.js

打包结果
在这里插入图片描述

每次都使用webpack [--config webpack.config.js]来指定配置文件也是有些繁琐的，我们可以用npm脚本来解决这个问题

NPM 脚本(NPM Scripts)

先用npm init生成一个package.json文件，然后再修改scripts项里的内容

"scripts": {
   
  "test": "echo \"Error: no test specified\" && exit 1"

最低0.47元/天解锁文章