包管理工具 npm
package.json
项目的名称、版本号、项目描述、其他库的信息和依赖库的版本号等
创建package.json
- 手动从零创建项目，
npm init –y - 通过脚手架创建项目，脚手架会帮助我们生成
package.json，并且里面有相关的配置
配置信息详解
{
"name": "demo", //项目的名称
"version": "1.0.0", //当前项目的版本号
"description": "", //描述
"main": "Demo.js", //入口
"privage": "true", //设置私有
"scripts": { //快捷脚本
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [], //npm搜索关键字
"author": "", //作者
"license": "ISC", //开源协议
"dependencies": {}, //项目依赖库
"devDependencies": {},//开发环境依赖库
"peerDependencies": {},//对等依赖
"browserslist": {} //浏览器兼容情况
}
安装package.json所有依赖: npm install
package-lock.json
确定具体依赖版本
npm命令
//默认开发与生产
npm install webpack
//开发环境
npm install webpack -D
//全局安装
npm install webpack -g
//卸载
npm uninstall package
//重新构建
npm rebuild
//清除缓存
npm cache clean
更换镜像
查看npm镜像：
npm config get registry # npm config get registry
我们可以直接设置npm的镜像:
npm config set registry https://registry.npm.taobao.org
包管理工具 yarn
由Facebook、Google、Exponent 和 Tilde 联合推出
为了弥补早期npm的缺陷
//初始化
yarn init -y
//安装包
yarn add package
//开发依赖
yarn add package -D
//删除
yarn remove package
//重新构建
yarn install -force
cnpm工具
方便国内用户使用,并设置淘宝的镜像
//全局安装并设置taobao镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
//或者安装再进行镜像安装
cnpm config get registry # https://r.npm.taobao.org/
npx工具
npm自带的工具,用于调用当前模块包,而不是全局包
npx webpack --version
发布自己的npm包基本操作
-
npm init -y修改自己的包的信息文件 - 注册npm账号
npmjs.com - 命令行登录
npm login - 发布自己包/更新包
npm publish - 删除自己的包
npm unpublish - 让包过期
npm deprecate
- 发布自己包/更新包
包管理工具pnpm
通过硬链接技术,更高效,更快速。避免重复的包
硬链接
指电脑文件系统直接访问的一个存储单元
//windows创建硬连接
mklink /H bbb.js aaa.js(原文件)
//mac
ln bbb.js aaa.js
软连接(符号连接)
快捷方式,绝对路径或者相对路径的形式指向其他文件的的引用
//win软链接
mklink bbb.js aaa.js
命令
//安装包
pnpm add <package>
//初始化package.json
pnpm init
//安装package.json所有依赖
pnpm install
//卸载
pnpm remove <package>
//运行脚本
pnpm <cmd>
//获取store目录
pnpm store path
//释放无用缓存
pnpm store prune
非扁平化node_module
node中的内置模块path
为了屏蔽Windows和Linux的差异
windows目录使用 \
linux使用 /
//导入模块
const path = require("path)
//获取后缀
path.extname(filepath)
//获取文件名+后缀
path.basename(filepath)
//获取目录
path.dirname(filepath)
//路径拼接
path.join(path1,path2)
//路径拼接,返回绝对路径
path.resolve(path1,path2,...)
webpack基本使用
webpack的cmd命令
-
--entry绝对路径 -
--output-filename文件名 -
--output-path./文件夹名 -
--config指定webpack.config.js的名称
webpack.config.js基本配置
const path = require("path")
module.exports = {
context: "", //设置上下文路径,默认上下文路径是,package.json中的webpack命令的目录
//配置模式,默认是production(生产)
mode: "development",//(开发)
//入口文件
entry: "./src/main.js",
//输出配置
output: {
clean:true,
filename: "bundle.js",
path: path.resolve(__dirname, "./build") //path必须是绝对路径
},
//模块处理
module: {
rules: [
//...规则
]
}
}
css处理
css-loader
加载css
style-loader
解析css
- 安装
npm install css-loader -D
npm install style-loader -D - config配置
module: { rules: [ test: /\.css$/, use: [ { loader:"style-loader" }, { loader:"css-loader" } ] ] }
less处理
less-loader
需要依赖css-loader,style-loader
- 安装
npm install less-loader -D - config配置
module: { rules: [ test: /\.less$/, use: [ { loader:"style-loader" }, { loader:"css-loader" }, { loader:"less-loader" } ] ] }
css的兼容性处理
postcss-loader
依赖插件:
autoprefixer
自动添加前缀插件postcss-preset-env
包含auto...更强大
- 安装
npm install postcss-loader -D - config配置
module: { rules: [ test: /\.less$/, use: [ { loader:"style-loader" }, { loader:"css-loader" }, { loader:"postcss-loader", options: { postcssOptions: { plugins: [ "postcss-preset-env" ] } } } ] ] }
单独配置
配置postcss.config.js
module.exports = {
plugins: [
"postcss-preset-env"
]
}
webpack.config.js 也需要配置 postcss-loader
图片处理
asset module type 插件
资源打包类型:
- asset
自动配置,小图片使用base64,大图片打包url- asset/resource
打包,并设置URL- asset/inline
base64编码
config 配置(asset类型)
module: {
rules: [
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset", //资源打包类型
parser: {
dataUrlCondition: {
maxSize: 100 * 1024 //配置最大图片使用URL打包
}
},
generator: { //图片命名
//占位符
filename: "img/[name]_[hash:8][ext]"
}
]
}
Babel工具
ES6 转 ES5
安装
npm install @babel/cli @babel/core -D
可选插件:
-
@babel/plugin-transform-arrow-functions
箭头函数转换 -
@babel/plugin-transform-block-scoping
const转换
配置
module: {
rules: [
test: /\.js$/,
use:[
{
loader:"babel-loader",
options: {
plugins: [
"@babel/plugin-transform-arrow-functions" //箭头函数转换
]
}
}
]
]
}
@babel/preset-env 预设
比如常见的预设有三个：
- env (ES6 => ES5)
- react
- TypeScript
cmd命令
npx babel src --out-dir dist --presets=@babel/preset-env
babel.config.js配置
module.exports = {
plugins: [
"@babel/preset-env"
]
}
Vue处理
安装
npm install vue-loader -D
webpack.config.js配置
const { VueLoaderPlugin } = require("vue-loader/dist/index)
module: {
rules: [
test: /\.vue$/,
loader: "vue-loader"
]
},
plugins: [
new VueLoaderPlugin()
]
webpack对文件路径的解析和配置
webpack.config.js 配置 resolve
resolve: {
extensions:[".jsx",".ts",".vue","js","json"],
//配置路径别名
alias: {
utils: path.resolve(__dirname,"./src/utils")
}
}
webpack中插件的使用
CleanWebpackPlugin
自动删除
dist输出文件夹.了解即可,webpack新版本不适用了
安装
npm i clean-webpack-plugin -D
webpack.config.js配置
const { CleanWebpackPlugin } = require("clean-webpack-plugin)
plugins: [
new CleanWebpackPlugin()
]
HtmlWebpackPlugin
打包HTML文件
安装
npm i html-webpack-plugin -D
webpack.config.js配置
const HtmlWebpackPlugin = require("html-webpack-plugin)
plugins: [
new HtmlWebpackPlugin({
title: "首页",
template: "./index.html" //自己指定模板地址
})
]
DefinePlugin
插入全局常量
安装
npm i define-plugin -D
默认注入变量
process.env.Node_ENV 用来判断生产环境还是开发
webpack.config.js配置
const { DefinePlugin } = require("webpack")
plugins: [
new DfinePlugin({
"BASE_URL": "'1+1'"
})
]
webpack本地服务器
提供了几种可选的方式：
-
webpack watch mode(自动编译不刷新) -
webpack-dev-server（常用,自动编译且刷新） webpack-dev-middleware
使用
webpack-dev-server安装
npm i webpack-dev-server -D
在package.json中使用
"scripts": {
"serve": "webpack serve --config webpack.config.js"
}
热模块替换 HMR
webpack.config.js配置
devServer: {
hot: true, //默认为true
host: "0.0.0.0", //部署到整个网段
open: true, //是否打开服务器
compress: true, //是否gzip压缩
port: 8888 //本地服务器端口
}
指定哪个模块需要hmr
vue和react组件中默认支持
if(module.hot) {
module.hot.accept("./utils/math.js")
}
配置合拼 webpack-merge
module.exports = merge(commonConfig,{
配置...
})
