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
发表评论