webpack.config.js的使用

最新推荐文章于 2022-08-15 20:56:14 发布

鲲大先生

最新推荐文章于 2022-08-15 20:56:14 发布

阅读量373

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/Mrjianghaokun/article/details/104629357

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

引言:上节我们介绍了一个webpack的简单入门案例，这回我们来通过webpack.config.js来实现为webpack命令实现自动打包文件的功能。上节文章链接

步骤

在项目根目录下新建webpack.config.js文件,在配置文件中配置如下代码。

const path = require('path')
module.exports = {
	entry:{
		main:"./src/index.js"
	},
	output:{
		filename:"bundle.js",
		path:path.join(__dirname,"./dist")
	}
}

在package.json文件中找到script元素,然后在其中添加"dev":"webpack"键值对
打开HbuilderX编辑器,点击顶部菜单栏按钮运行->运行到终端->"npm run dev",稍等片刻即可看到打包成功的终端信息。

命令及代码解释

webpack.config.js 会作为默认的配置文件被webpack工具所读取器解析,可以设置文件的入口依赖和打包文件的出口路径，也可以在package.json文件的script元素中指定:“webpack --config webpack.config.js”。
const path = require(‘path’) : 使用node.js的require方法导入path模块，导入之后就可以使用该模块的方法。
module.exports : module.exports表示向外暴露一个导出对象，提供给webpack去接受并且读取其中配置的键值对。
entry : webpack的打包入口文件，webpack以此文件为基础,根据相关策略生成路径依赖图, 进行打包构建。这里使用的是entry的单入口写法,详情参考 webpack官方文档
output: 被打包文件的出口。filename:代表输出文件名称, path: 代表输出文件路径。
path.join(__dirname,"./dist") : 使用node.js的path模块的join方法返回"绝对路径下"的dist目录路径。
npm run dev : npm run 代表 npm 的 run 子命令用来运行相关脚本, 而dev则代表我们在package.json的script元素中配置的"dev":"webpack"命令。相当于, npm run dev 帮我们去找到了D:\webpack-demo\node_modules.bin\webpack 命令。

附:点击下载HbuilderX