npm补充
本质：解决Node中第三方包共享的问题，安装Node时连带一起安装的，不需要单独安装
npm -v 查看版本
npm init 初始化
npm install 包名 下载第三方模块
使用下载的第三方包 dayjs(处理日期时间格式)
dayjs包
const dayjs = require(`dayjs`)
console.log(dayjs().format('YYYY-MM-DD'));
nrm包(全局包)
作用：切换安装包的来源，默认是国外npm官网，速度慢。手动切换
1.npm i nrm -g
2.nrm ls
3.nrm use taobao
错误提示：www.yuque.com/megasu/al5x…
nodemon包(全局包)
作用：自动检测代码的修改，自动重新运行。nodemon .\index.js启用
1.npm i -g nodemon
2.使用nodemon代替node
3.nodemon .\index.js
卸载包
npm uninstall 包名
webpack基本概念
本质：node的一个第三方模块
作用：自动化打包代码,智能剔除和修改
注意：根目录文件不能webpack，会导致同名
使用步骤
1.npm init
2.npm install webpack webpack-cli -D
3.配置scripts 在scripts里添加"build": "webpack"
4.新建目录src
5.新建src/add/add.js 定义求和函数导出
export const addFn = (a, b) => a + b
6.新建src/index.js导入使用
import {addFn} from './add/add'
console.log(addFn(10, 20));
7.运行打包命令 npm run build 或者yarn build
配置入口出口
作用：从哪里开始打包，打包后输出到哪里
1.新建webpack.config.js(默认) 与src文件并列同级
2.填入配置
const path = require("path")
module.exports = {
entry: "./src/main.js", // 入口
output: {
path: path.join(__dirname, "dist"), // 出口路径
filename: "bundle.js" // 出口文件名
}
}
3.修改
const path = require("path")
module.exports = {
entry: "./src/dio.js", // 入口
output: {
path: path.join(__dirname, "dist"), // 出口路径
filename: "jojo.js" // 出口文件名
}
}
4.运行打包命令
npm run build
提交仓库忽略node_modules
1.创建.gitignore,与src同级
2.在内输入node_modules,表示提交时，忽略node文件
3.上传即可
导入导出
// es6 导入方式
import {addFn,obj} from './add/add'
import dayjs from 'dayjs'
// 默认导入
import abc from './utils/uitls'
console.log(addFn(10, 20));
console.log(obj);
console.log(dayjs().format(`YYYY-MM`));
// 导出
export const addFn = (a, b) => a + b
export const obj = {name:`hm`}
const sayHi = () => {
console.log('SayHi')
}
// 默认导出
export default sayHi
<script src="./main.js"></script>
🐇 总结
导入
1.import {名称} form '模块'
2.import dayjs form 'dayjs'
导出
export const 名称 = 数据 要配合解构导出
export default 默认导出 没有解构 一个js文件只能有一个默认导出
自动生成(打包)HTML,引入JS
作用： html-webpack-plugin插件, 让webpack打包后生成html文件并自动引入打包后的js
1.下载包
npm install html-webpack-plugin -D
2.config配置
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...省略其他代码
plugins: [
new HtmlWebpackPlugin({
template: './public/public.html' // 以此为基准生成打包后html文件
})
]
}
3.新建文件打包观察
4.打包成功
加载器-CSS
作用：处理JS文件以外文件
原因：webpack默认只认JS/JSON文件，其他文件不认识
1.下载包 - CSSloader/style-loader
作用：解析CSS原文件/自动插入文件中
npm install style-loader css-loader -D
2.config配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...其他代码
module: {
rules: [ // loader的规则
{
test: /\.css$/, // 匹配所有的css文件
// use数组里从右向左运行
// 先用 css-loader 让webpack能够识别 css 文件的内容并打包
// 再用 style-loader 将样式, 把css插入到dom中
use: [ "style-loader", "css-loader"]
}
]
}
3.新建src/css/index.css
ul,li{
list-style: none;
}
4.引入到index.js(这里是入口需要产生关系，才会被webpack找到打包)
import "./css/index.css"; // 导入css
5.跑起来
加载器处理less
1.下载包
npm install less less-loader -D
2.config设置
module: {
rules: [ // loader的规则
// ...省略其他
{
test: /\.less$/,
// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
use: [ "style-loader", "css-loader", 'less-loader']
}
]
}
注意：重名部分不要CV
3.新建src/less/index.less
@size:24px;
ul, li{
font-size: @size
}
4.导入
import './less/index.less' // 导入less
5.跑起来
加载器处理图片上传
1.版本5不用下载，config设置在rules里
rules: [
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配后缀
type: "asset",
},
]
2.导入大图，小图
// 插入大图
import LOGO from "./assets/logo_small.png";
document.body.style.backgroundImage = `url(${LOGO})`
// 插入小图
body {
background: url(../assets/favicon.ico);
}
3.跑起来
自动(刷新)run build
dist删了还是会打包上传
1.下载包
npm install webpack-dev-server -D
2.配置package.json
"scripts": {
"build": "webpack",
"serve": "webpack serve"
},
3.运行指令-启动webpack开发服务器
npm run serve
#或者 yarn serve
4.config中配置
module.exports = {
// development 开发环境
// production 生成环境(最终用于上线的环境)
mode: "development",
devServer: {
open: true, // 自动打开 浏览器
port: 3000, // 端口号
},
5.跑起来，只有保存，不刷新页面都会自动刷新
