package.json
-
name 包名称
-
version 版本号 语义化
-
main 包执行的入口
-
scripts 自定义脚本
//package.json
{
"name": "try",
"version": "1.0.0",
"description": "",
"main": "module.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
自带的 npm 也升级到了5.0的确带来了不少便利,大概讲一下 npm 5 的一些大的变化:
- 使用npm install xxx命令安装模块时,不再需要–save选项,会自动将模块依赖信息保存到 package.json 文件;
- 安装模块操作(改变 node_modules 文件夹内容)会生成或更新 package-lock.json 文件;
- 发布的模块不会包含 package-lock.json 文件;
- 如果手动修改了 package.json 文件中已有模块的版本,直接执行npm install不会安装新指定的版本,只能通过npm install xxx@yy更新
cnpm install lodash --save
{
"name": "try",
"version": "1.0.0",
"description": "",
"main": "module.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"lodash": "^4.17.21"
}
}
- 开发环境依赖
npm install lodash --save-dev
使用命令 --save 或者说不写命令 --save ,都会把信息记录到 dependencies 中;
dependencies 中记录的都是项目在运行时需要的文件;
使用命令 --save-dev 则会把信息记录到 devDependencies 中;
devDependencies 中记录的是项目在开发过程中需要使用的一些文件,在项目最终运行时是不需要的;也就是说我们开发完成后,最终的项目中是不需要这些文件的;
- 只安装生成环境,与功能相关的依赖都应该放这里
npm install lodash --only==prod
- 只安装开发环境,放构建工具、检测工具像eslint,等开发需要的工具
npm install lodash --only==dev
{
"name": "try",
"version": "1.0.0",
"description": "",
"main": "module.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"lodash": "^4.17.21"
},
"dependencies": {
"lodash": "^4.17.21"
}
}
语义化版本
允许依赖的版本是动态的
-
^version 中版本和小版本
^1.0.1->1.x.x 1.x.x中最新的版本
-
~version 小版本
~1.0.1->1.0.x 1.0.x中最新的版本
-
version 特定版本
scripts
"dev":"webpack-dev-server",
运行 npm run dev
会在本地开启一个webpack开发服务器
"build":"eslint ./src&&webpack"
运行 npm run build
对代码格式做校验,然后执行webpack配置
npm install过程
- 寻找报版本信息文件(package.json),依照它来进行安装
- 查找package.json中的依赖,并检查项目中其他的版本信息文件
- 如果发现了新包,就更新版本信息文件
自定义配置
src下index.js是默认入口文件,如果需要更改的话,需要自定义配置
新建webpack.config.js,webpack在运行的时候,如果发现有一个webpack.config.js,就会去走webpack.config.js里指定的配置
-
entry 工程资源入口,可以是一个文件也可以是多个,webpack可以以此为切口依次寻找模块,进行打包
-
output
- path 出口文件夹路径
- filename 打包结果文件名
-
__dirname 当前文件所在文件夹的绝对路径。
-
path.join(path1,path2,path3…)
作用:将路径片段使用特定的分隔符(window:\)连接起来形成路径,并规范化生成的路径。若任意一个路径片段类型错误,会报错。
//webpack.config.js
const path = require("path");
module.exports={
entry:'./app.js',
output:{
path:path.join(__dirname,'dist'),
filename:'bundle.js'
}
}
运行webpack-dev-dev-server,可以在命令行启动全局安装的webpack-dev-server,webpack-dev-server
- webpack-dev-server --open直接打开浏览器运行项目
- 提供文件变化监听,如果项目文件有更新,会自动打包,并刷新页面
Loader
loder提供扩展功能,需要额外安装,如css-loader,
每个版本webpack module的写法不一样,要去找文档看
- css-loader 解析css文件
- style-loader 渲染css样式
const path = require("path");
module.exports={
entry:'./app.js',
output:{
path:path.join(__dirname,'dist'),
filename:'bundle.js'
},
devServer:{
port:8080,
static:{
publicPath:'/dist'
}
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
}
]
}
]
}
}
Plugin
去除注释换行空格,减小资源体积,安装 uglifyjs-webpack-plugin
Webpack5无法使用uglifyjs-webpack-plugin压缩js, 使用terser-webpack-plugin
const path = require("path");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
module.exports={
entry:'./app.js',
output:{
path:path.join(__dirname,'dist'),
filename:'bundle.js'
},
devServer:{
port:8080,
static:{
publicPath:'/dist'
}
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
}
]
}
]
},
plugins: [
new UglifyJSPlugin(),
]
}