webpack入门（五）：webpack.config.js

缺乏、安全感 2022-05-28 00:27 240阅读 0赞

有的同学可能在学习webpack的时候看到项目目录里会有webpack.config.js 文件，

那么，这个文件是干嘛的呢？

在上一篇中，我们学会了如何打包 js 文件，再来回忆一下我们是如何打包的：

我们使用了 webpack run1.js  bundle.js  这个命令，意思是从run1.js 开始，把 run1.js 还有所有依赖的文件

共同打包成一个 bundle.js 文件；

但是除了上面的方法之外，我们还可以把要打包的信息啥的都写入一个单独的文件：webpack.config.js,

最后，我打包的时候只需要使用  webpack 这个命令就可以了，是不是简单很多；

我们还是根据上一篇中的例子来说明这个webpack.config.js 文件；

第一步：下载webpack（过程略，前面已经说过）

第二步：创建我们的项目，webpack\_temp;

第三步：在项目目录下创建一个index.html ,   一个run1.js  ,  一个  run2.js ,还有我们本节要说的webpack.config.js文件；

每个文件的具体代码请copy上一节的内容；

第四步：我们来写最关键的webpack.config.js文件；

module. exports = \{

entry: "./run1.js",

output: \{

path: \_\_dirname,

filename: "bundle.js"

\}

\};

这里的  entry : "要打包的文件是哪个，也就是从哪个开始"

output:\{

path: \_\_dirname  是当前路径的意思，也就是打包完成后生成的文件放在什么地方，

filename:" 我们要打包成的文件的名字"

\}

第五步：我们使用命令：webpack

![70][]

第六步：运行我们的index.html文件即可；

总结：本节内容和上一节的内容是相同的，只是使用了不一样的方式来打包，以后的项目中我们使用创建webpack.config.js

的方式来进行，实际开发中也是用这个方式，能够简化我们的操作，不容易出错；

[70]: /images/20220528/61c2e17e85ff4aeea33c5659b494aece.png

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关【Webpack】Webpack基础入门

目录 1. 模块化相关概念 1.1 模块化的概念 1.2 模块化规范

红太狼/ 2023年02月17日 11:13/ 0 赞/ 304 阅读

相关 WebPack入门

前端模块化新选择：WebPack Webpack具有Grunt、Gulp对于静态资源自动化构建的能力，但更重要的是，Webpack弥补了requireJS在模块化方面的缺陷，

以你之姓@/ 2022年07月16日 06:45/ 0 赞/ 46 阅读

相关 webpack入门（五）

resolveing 一般问题的解决 1. –display-error-details 提供给你更多的出错信息。 2. 查问配置文档关于 `resolve

曾经终败给现在/ 2022年06月17日 05:27/ 0 赞/ 155 阅读

相关 webpack入门

安装nodejs、npm省略，webpack版本使用2.6.1 1、安装webpack 由于使用npm安装很慢，因此切换成cnpm，安装命令： npm insta

拼搏现实的明天。/ 2022年06月14日 10:06/ 0 赞/ 247 阅读

相关 webpack入门

webpack可以打包的不仅仅是js了，css，sass，图片都可以进行打包，下面有入门的一步一步的简单示例：概念：webpack是模块加载器兼打包工具，它能

ゞ浴缸里的玫瑰/ 2022年05月30日 12:21/ 0 赞/ 256 阅读

相关 webpack入门（五）：webpack.config.js

有的同学可能在学习webpack的时候看到项目目录里会有webpack.config.js 文件，那么，这个文件是干嘛的呢？在上一篇中，我们学会了如何打包 j

缺乏、安全感/ 2022年05月28日 00:27/ 0 赞/ 241 阅读

相关 webpack入门

文章目录前言安装开始项目结构 webpack配置 loader加载器 plu

悠悠/ 2022年03月16日 11:24/ 0 赞/ 273 阅读

相关 Webpack入门

Webpack入门简介 Webpack是一个前端构建工具，本文将简要介绍它最常用的功能，并创建一个基于webpack的前端开发环境。范例项目包含两个页

绝地灬酷狼/ 2022年01月05日 17:51/ 0 赞/ 183 阅读

相关 Webpack入门

Webpack入门简介 Webpack是一个前端构建工具，本文将简要介绍它最常用的功能，并创建一个基于webpack的前端开发环境。范例项目包含两个页

小灰灰/ 2021年12月12日 02:55/ 0 赞/ 334 阅读

相关 Webpack 入门

为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出

系统管理员/ 2021年09月15日 01:28/ 0 赞/ 485 阅读