webpack

最新推荐文章于 2024-07-22 10:39:47 发布

Hst1120

最新推荐文章于 2024-07-22 10:39:47 发布

阅读量301

点赞数

分类专栏： Vue.js webpack 文章标签： webpack 前端

本文链接：https://blog.csdn.net/Hst1120/article/details/122510320

版权

本文详细介绍了webpack的基本使用，包括在项目中安装和配置webpack，使用webpack-dev-server和html-webpack-plugin，以及如何处理css、less文件和图片资源。还讲解了webpack中的loader和插件作用，以及Source Map的概念和最佳实践。

摘要由CSDN通过智能技术生成

webpack基本使用

新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json
新建src源代码目录
新建src ->index.htm首页和src - >index.js脚本文件
初始化首页基本结构
运行npm install jquery -S 命令，安装jQuery
通过ES6模块化的方式导入jQuery,实现列表隔行变色效果

在项目中安装webpack

在终端运行如下的命令，安装webpack相关的两个包：
npm install webpack@5.42.1 webpack-cli@4.9.0 -D
开发,上线要用到记录到dependencies
开发要用到devDependencies
-S 是–save的简写开发部署会用到
-D 是 --save-dev的简写开发阶段会用到

在项目中配置webpack

在项目根目录中，创建名为webpack.config.js的配置文件，并初始化如下基本配置：

//使用node.js中的导出语法，向外导出一个webpack的配置对象
 module.exports = {
   
 //用mode来指定webpack构建模式，可选有devlopment和production
 mode:'development'  
}

在package.json的script节点下，新增dev脚本如下：

“scripts”:{
   
	//scripts节点下的脚本，可以通过npm run dev执行
	"dev":"webpack"
}

在终端中运行npm run dev,启动webpack进行项目的打包构建

webpack中基本使用

在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口

const path = require('path')
module.exports={
   
	//打包入口文件路径
	entry:path.join(__dirname,'src/index.js'),
	output:{
   
		//输出文件路径
		path:path.join(__dirname,'./dist')
		//输出文件的名称
		filename:'bundle.js'
	}
}