vue之webpack

1. 初始化项目及包安装

npm init 初始化一个简单的package.json文件，执行该命令后终端会依次询问 name, version, description 等字段
npm init --yes|-y 作用同上，偷懒不用一直按enter
npm inistall packageName 本地安装，安装到项目目录下，不在package.json中写入依赖
npm inistall  packageName -g 全局安装，安装在Node安装目录下的node_modules下
npm inistall  packageName --save 安装到项目目录下，并在package.json文件的dependencies中写入依赖，简写为-S
npm inistall  packageName --save-dev 安装到项目目录下，并在package.json文件的devDependencies中写入依赖，简写为-D

 

2. 一个项目引入webpack

2.1 项目结构

实现li标签奇数偶数行不同颜色

2.2 创建项目代码

项目目录下执行 npm init -y

创建src目录

 

2.3 代码配置

index.html

<! -- 如下可以快速生成ul标签，最后tab键生成 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../dist/main.js"></script>
	</head>
	<body>
		ul>li{这是第 $ 个li}*9
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../dist/main.js"></script>
	</head>
	<body>
		<ul>
			<li>这是第 1 个 li</li>
			<li>这是第 2 个 li</li>
			<li>这是第 3 个 li</li>
			<li>这是第 4 个 li</li>
			<li>这是第 5 个 li</li>
			<li>这是第 6 个 li</li>
			<li>这是第 7 个 li</li>
			<li>这是第 8 个 li</li>
			<li>这是第 9 个 li</li>
		</ul>
	</body>
</html>

index.js

import $ from "jquery"

$(function(){
	$("li:odd").css("background-color", "red")
	$("li:even").css("background-color", "pink")
})
2.4 访问如上页面，报错，浏览器不兼容

3. 引入webpack解决方案

3.1 安装webpack
npm i webpack@5.42.1 webpack-cli@4.7.2 -D

 

3.2 webpack使用--创建配置文件
module.exports = {
	mode: "development"
}
3.3 在package.json中定义执行脚本webpack
{
  "name": "change_line_color",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack" 
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "webpack": "^5.42.1",
    "webpack-cli": "^4.7.2"
  }
}

 

3.4 运行命令生成兼容文件（dist/main.js）
npm run dev
3.5 项目引用此文件

3.6 页面访问后显示正常结果

 

posted @ 2021-12-21 11:10  apoorgod  阅读(38)  评论(0)    收藏  举报