webpack安装使用

文章描述:

如何在项目中安装webpack和进行使用

创建项目

1.  新建项目目录project

2. 使用命令:npm init -y

根目录生成package.json文件

3. 使用命令 :npm install jquery -S

根目录生成package-lock.json文件和node_modules/jquery

 

安装webpack

使用命令:npm install webpack@5.42.1 webpack-cli@4.7.2 -D

 

配置webpack

1. 根目录新建src目录,在src目录下面新建index.html和index.js
index.js

// 1.使用ES6导入语法, 导入jQuery
import $ from 'jquery'

$(function(){
	$('li:odd').css('background-color','red')
	$('li:even').css('background-color','pink')
})

2. webpack.config.js

// 使用Node.js 中的导出语法,向外导出一个 webpack 的配置对象
module.exports = {
	// 代表 webpack 运行的模式,可选值有两个 development 和 production
	mode:'development'
}

3.  package.json文件scripts配置

“dev”:”webpack”

运行命令 npm run dev

生成dist文件目录

 

使用webpack

index.html里面引入../dist/main.js

 

发布时间:2022/06/29

发表评论