webpack的安装与配置

原创已于 2023-03-17 22:36:22 修改 · 185 阅读

CC 4.0 BY-SA版权

文章标签：

于 2023-03-17 20:30:28 首次发布

5 篇文章

订阅专栏

本文介绍了如何使用webpack进行前端项目工程化，包括新建项目、安装jQuery、配置webpack、设置运行模式，以及通过npm运行dev脚本实现编译。通过这些步骤，可以解决项目兼容性和性能优化问题。

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

webpack：前端项目工程化的具体解决方案，可处理兼容性，性能优化等

一、搭建项目

（1）新建空白目录，运行npm init -y，配置package.json
（2）安装jQuery，运行npm install jquery -S

在这里插入图片描述

（3）在index.js中引入jQuery
在这里插入图片描述

终端运行如下命令

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

在根目录下创建webpack.config.js

//使用node.js中的导出语法，向外导出一个webpack的配置文件
module.exports = {
	//webpack的运行模式，可选development和production
	mode:'development'
}

在package.json中的scripts节点下新增dev脚本

 "scripts": {
		  "dev": "webpack"//script节点下的脚本，可以通过npm run 执行 例如：npm run dev
  },

在终端运行如下命令

npm run dev

引用dist文件下的main.js文件即可