npm包管理工具

1，认识npm

npm即node的包管理器

是Node.js默人的、以JavaScript编写的软件包管理系统

npm已经是前端工程师的标配

在npm上我们可以很方便的下载我们所需要的的包，如jquery，vue等

官网 npm官方网站

2，下载

先下载node.js（因为node中自带有npm，所以无需多下载npm）

node官网

然后使用node.js的命令工具查看node版本

$ node -v
# 查看node版本

查看自己的npm版本

$ node npm -v
#查看npm工具的版本

更新npm

$ npm i npm

3,切换npm包下载的地址

因为npm官方网址需要翻墙才能下载包，而且下载速度会有写迟缓，所以这里我们更推荐使用淘宝的镜像npm

使用nrm工具切换淘宝库
```
$ npx nrm use taobao
```
使用nrm工具切换为官方库
```
$ npx nrm use npm
```

4,常用命令

查看全局安装了那些包

$ npm list -g

查看版本

$ npm jquery -v

指定下载包的版本(在包名后添加@符号后跟版本号)

$ npm i jquery@1.1.2

5，npm中的包描述文件

初始化包描述文件package.json

$ npm init
# 初始化包描述文件
> This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.See `npm help init` for definitive documentation on these fields
and exactly what they do.Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.Press ^C at any time to quit.
# 包的名称（默认为文件名）
package name: ddd
# 版本号（默认为1.0.0）
version: (1.0.0)
# 包的描述
description: 这是一个··········
# 主文件是什么（主执行文件）默认是index.js
entry point: (index.js)app.jstest command:
# 包的存放类型
git repository: git
# 被搜索的关键字
keywords:vue ajax
# 作者
author:miu
# 规范类型（默认为ISO）
license: (ISC)MITAbout to write to D:\HTML\前端案例\Vue\ddd\package.json:{"name": "ddd","version": "1.0.0","description": "45456","main": "app.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"repository": {"type": "git","url": "git"},"keywords": ["vue","ajax"],"author": "miu","license": "MIT"
}# 是否完成初始化
Is this OK? (yes) > yes

完成操作后会在文件内生成一个包描述文件package-lock.json

{"name": "ddd","version": "1.0.1","description": "miaoshuwenjian","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"repository": {"type": "git","url": "git"},"keywords": ["vue","ajax"],"author": "miu","license": "MIT""dependencies": {"vue": {"version": "2.6.12","resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz","integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="}}
}

“dependencies”:可以看见文件依赖的包

“scripts”: 可以调用执行代码

跳过描述文件(npm init -y)可以快速描述初始化文件

D:\HTML\前端案例\Vue\ddd>npm init -y
Wrote to D:\HTML\前端案例\Vue\ddd\package.json:{"name": "ddd","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}

当文件中的某一个模块丢失时可以使用npm install将包描述文件中的依赖包重新下载回来（包描述文件不能删除）

webpack5

1，认识

webpack是一个模块打包器（构建工具），他的主要目标是将js文件打包到一起，打包后的文件用于在浏览器中使用，但他能够胜任转换（transform）、打包（bundel）或包裹（package）任何资源。

树结构

在一个入口文件中引入所有资源，形成依赖关系图
模块

模块可以是引入的第三方包（node），也可以是系统的内置模块，还能是用户自定义的某种文件，对于webpack来说（img/js/css/html/·····）
chunk

打包过程中被操作的模块文件叫做chunk，例如一个异步加载的模块就是一个chunk
bundel

bundel是最后打包后的文件，最终文件可以和chunk长得一模一样但是大部分情况下它是chunk的集合

为了优化最后生产出的bundel数量可能不等于chunk的数量，因为有可能多个chunk被组合到了一个bundel中

2,webpack安装与体验

安装webpack5之前需要安装脚手架（注意全局安装）

即webpack-cli

安装命令（全局安装）
```
$ npm i -g webpack webpack-cli -D
```
-D是开发环境的安装
本地安装
```
$ npm i webpack webpack-cli -D
```

3，打包

开发模式（会有一些注释，变量名没有简化）

$ webpack 文件当前目录 -o 文件打包目录 --mode=development

生产模式（没有注释，变量名大多为单字母）

$ webpack 文件当前目录 -o 文件打包目录 --mode=production

注意目录名都是相对路径

4，webpack五个核心理念

entry入口

指示webpack文件以哪个文件为入口起点开始打包，分析构建内部依赖图
output输出

指示webpack打包后的资源bundles输出到哪里，以及如何命名
loader

让webpack能够去处理那些非javascript资源css、img等，将它们处理成webpack能够识别的资源，可以理解为一个编译过程（webpack自身只能js和json文件）
plugins插件

可用于执行范围更广的任务，插件的范围包括，从打包优化到压缩，一直到重新定义环境中的变量等
mode模式

mode指示webpack的使用相应模式的配置

开发模式：（development）：配置比较简单，能让代码调用本地的环境

生产模式：（production）：代码需要不断优化达到性能最好，能让代码优化上线运行时的环境

！每次打包时因为指令的长度而导致过于繁琐的操作，这时我们可以初始化一个webpack.config.js文件来统一管理打包

// 在项目中新建一个webpack.config.js文件//导入node中的path模块
const path = require('path');
//创建当前文件目录----resolve()方法用于拼接路径
//__dirname即项目文件的目录
let url = path.resolve(__dirname+'./src/index.js');
//使用exports暴露需要的方法
module.exports={//1，entry入口entry:url,//output输出---因为修改的属性较多，所依使用对象形式更改output：{filename:'bulid.js',//默认情况下创建的文件名path：path.resolve(__dirname+'bulid');//bulid是默认输出的文件夹名称
}，//loader可以处理非js文件资源module：{········}，//plugins插件//补充一些功能插件//mode模式(可以更改默认打包模式)mode:development;
}

完成后输入webpack可以找设定好的条件打包

5,打包的入口方式

根据入口函数的数量有3种打包的方式

单个入口文件的打包方式

module.exports = {entry:'./xx/xx.js',
}
//输出只有一个bundle

两个或两个以上的入口文件

1数组的方式

module.exports = {entry:['路径一','路径二']，
}
//最后会根据设置的打印路径生成一个bundle

2对象的方式

module.exports = {entry:{//此时文件名称为one.js，two.js//此时chunk名为one.js,two.jsone:'路径一',two:'路径二'},output：{//文件名称one.js，two.jsfilename:'[name].js',path：path.resolve(__dirname+'bulid');
}}
//最后会根据设置的打印路径生成两个bundle，它们都在一个文件夹下

特殊打包用法-----混合用法

module.exports={entry:{one:['路径一','路径二'],two:'路径三'
}
//这种打包方式生成两个bundle
}

6，打包html资源

使用插件（plugins）对html资源进行处理（html-webpack-plugins）

使用步骤：

下载
```
npm i html-webpack-plugins -D
```

引入

const hwp = require('html-webpack-plugins');

使用

plugins:[//功能：默认会创建一个空的html文件，自动引入打包输出的所有资源，hwp中有参，会根据参数来打包html文件new hwp({//复制'./src/index.html'文件，并自动引入打包输出的所有资源template:'./src/index.html',//可以设置打包后四位资源名filename:'demo.html',//压缩html代码minify:{//移除空格collapseWhitespace:true,//移除注释removeComments:true}//默认---minify:false//设置压缩---minify:true}），
]

7,打包多个html文件

新建如图所示的文件

要求：将每个js文件打包，将每个html文件打包，且首页html要和公共js、首页js打包到一起，购物车html要和公共js、购物车js打包到一起，

//引入path模块
const path = require('path');
// 引入下载的html-webpack-plugin模块
const hwp = require('html-webpack-plugin');module.exports = {// 将需要打包的js分需求的打包entry: {// 首页index: ['./public/js/index.js'],// 购物车cart: ['./public/js/cart.js'],// 公共common: ['./public/js/common.js']},output: {// 打包后的js文件名称filename: '[name].js',// 打包的文件路径path: path.resolve(__dirname, 'bundle')},// 打包html插件plugins: [// 有多少个需要打包的html文件就new几个hwp// 首页new hwp({// 设置打包html的引用模板路径template: './view/index.html',// 打包后的文件名称filename: 'index.html',// 该首页打包文件需要一起打包js的文件// 注:html中不能包含script的引用，因为打包后会生成引用// 这里把公共js和首页js引用到了首页htmlchunks: ['common', 'index'],minify: {// 空格collapseWhitespace: true,// 注释removeConmments: true}}),// 购物车new hwp({template: './view/cart.html',filename: 'cart.html',// 这里把公共js和购物车js引用到了购物车htmlchunks: ['cart', 'common'],minify: {collapseWhitespace: true,removeConmments: true}})],// 打包模式mode: 'development'
}

注:html中不能包含script的引用，因为打包后会生成引用

8,打包css资源

打包css资源我们需要用到loader资源

下载css-loader和style-loader

$ npm i css-loader style-loader -D

引入

const path = require('path');
const hwp = require('html-webpack-plugin');

入口

entry: './src/index.js',

输出

output: {filename: 'index.js',path: path.resolve(__dirname, 'bundle')},

loader

module: {rules: [{//定义检测文件的规则（下标为'.css'的文件test: /\.css$/,//use：使用//'css-loader'：将css文件加载到js文件中//'style-loader'：将加载好的文件打包use: ['style-loader', 'css-loader']//此处注意两个loader的引入顺序//先'style-loader'后'css-loader'//因为文件是从后往前执行}]},

插件

plugins: [new hwp({template: './src/index.html',filename: 'index.html',minify: {collapseWhitespace: true,removeComment: true},})],

模式

mode: 'development'

注意:js文件中必须引入css文件才能完成打包

require('./index.css');
let div = document.querySelector('div');div.addEventListener('mouseover', function () {alert('经过了');
})

9，webpack打包less、sass资源

准备

打包前我们需要先下载less或sass
less下载
```
$ npm i less less-loader -D
```
sass下载
```
$ npm i node-sass sass-loader -D
```

应用

 module: {rules: [{//引入less-----和css唯一的区别：在use后添加一个'less-loader'test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}, {//引入sass-----和css唯一的区别：在use后添加一个'sass-loader'test: /\.scss$/,//这个地方为scssuse: ['style-loader', 'css-loader', 'sass-loader']}]},

此时index.js中

require('./indexless.less');
require('./indexsass.scss');console.log('ls');

10,单独打包css资源

打包的css资源会单独存在，并且引入方式为外链式

需要下载插件mini-css-exrtact-plugin

$ npm i mini-css-exrtact-plugin -D

引入

//引入一个新的插件mini-css-extract-plugin
const mcep = require('mini-css-extract-plugin');

使用

 module: {rules: [{test: /\.css$/,//此时去掉style.loader//加上mcep.loaderuse: [mcep.loader, 'css-loader']}]},plugins: [new hwp({template: './src/index.html',filename: 'index.html',minify: {collapseWhitespace: true,removeComment: true}}),new mcep({//设置打包的css样式名称filename: 'index.css'})],

11，兼容css文件打包

需要使用postcss的loader来处理

下载postcss-loader和postcss-preset-env俩个loader

$ npm i postcss-loader postcss-preset-env -D

创建一个配置post-css的文件postcss.config.js

module.exports = {//导入插件postcss-preset-envplugins: [require('postcss-preset-env')]
}

在package.json中加入浏览器规则browserslist

"browserslist": [//"> 0.2%",//支持最新两个版本的浏览器"last 2 versions",//不支持不更新的浏览器"not dead"]

在webpack.config.js文件中的loader中加入

module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader', 'postcss-loader']//注意这里添加的postcss-loader一定是在顺序的最右}]},

12，压缩css文件资源

压缩css文件我们需要下载optimize-css-assets-webpack-plugin插件

下载

$ npm i optimize-css-assets-webpack-plugin -D

引入

const ocawp = require('optimize-css-assets-webpack-plugin')

使用
```
plugins:[new ocawp()
]
```

13,打包图片资源

1> 在css中打包图片资源

下载所需要的loader url-loader和file-loader

$ npm i url-loader file-loader -D

在文件的module中添加新的loader

module: {rules: [{ test: /\.css$/, use: [mcep.loader, 'css-loader', 'postcss-loader'] },// 配置图片资源的打包方式{//制定可打包图片资源的范围-------------------并引入loader资源（url-loader）//options配置详细设置test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader', options: {//outputPath图片打包在bundle中的位置outputPath: 'img/',//publicPath即图片打包在打包的css中拼接该路径在开头publicPath: './img',// 设定图片打包规则，若图片小于10kb，则以哈希值的方式打包在css中，若大于10kb，则图片打包在img文件夹中limit: 1024 * 10,//图片名称设置//【name】：默认设置文件名//【hash：10】：取10位的哈希值在文件命名//.【ext】:文件默认的后缀name: '[name][hash:10].[ext]'}}]},

2> 打包图片资源html

需要下载html-loader

$ npm i html-loader -D

应用

   module: {rules: [{ test: /\.css$/, use: [mcep.loader, 'css-loader', 'postcss-loader'] },// 配置图片资源的打包方式{//制定可打包图片资源的范围-------------------并引入loader资源（url-loader）//options配置详细设置test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader', options: {//outputPath图片打包在bundle中的位置outputPath: 'img/',//publicPath即图片打包在打包的css中拼接该路径在开头publicPath: './img',// 设定图片打包规则，若图片小于10kb，则以base64的方式打包在css中，若大于10kb，则图片打包在img文件夹中limit: 1024 * 9,//图片名称设置//【name】：默认设置文件名//.【hash：10】：取10位的哈希值在文件命名//.【ext】:文件默认的后缀name: '[name].[ext]'}},{//使用html-loader方式加载html中的img图片test: /\.html$/, loader: 'html-loader', options: {esModule: false,//避免出现图片路径问题}}]},

14,打包字体图标资源

需要使用上面的loaderfile-loader

使用

 module: {rules: [{//打包css资源test: /\.css$/, use: ['style-loader', 'css-loader']}, {// exclude：排除包含以下尾缀的文件，其他文件打包exclude: /\.(js|css|html|)$/,//引入file-loader来处理其他文件loader: 'file-loader',//详细配置options: {// 文件出口outputPath: 'font/',// 为文件拼接路径头publicPath: './font',name: '[name].[ext]'}}]},

注意：字体图标中的css文件按普通css正常引用

console.log('js');
require('../font/iconfont.css');

15,对js语法配置语法检查eslint

eslint是一个开源的语法检查工具，可以是团队的代码编写规范趋于一致
eslint和webpack没有关系，两者不依赖
语法检查用的是eslint-loader,并且依赖eslint包，只能检查js语法
需要使用js的规则库来检查代码‘airbnb’，需要eslint-config-base和eslint-plugin-import两个包

package.json中加入

"eslintConfig":{"extends":"airbnb-base"
}

webpack.config.js中加入

module:{rules:[{//第三方模块的js一般不用检查语法，所依排除掉test:/\.js$/,exclude:/node_module/,loader:'eslint-loader',options:{fix:true}}]
}

在js中（消除警告）
```
//eslint-disable-next-line
console.log(xxx);
```
- 当检查的js中有控制台输出检查时会有警告
- 消除方法即是在控制台语句上一行添加//eslint-disable-next-line

16,去除项目的死代码

webpack中有针对es6的代码优化

js代码优化

index.js

export function add(x,y) {return x + y;
}export function conie(x,y) {return x - y ;
}

入口文件app.js

import {add,conie} form './index.js';let adds = add(2,5);console.log(adds);

打包后：index.js

(()=>{"use strict";console.log(7)})();# 这种项目优化只存在于生产模式

! 未解决

css代码优化

下载

$ npm i purgecss-webpack-plugin -D

引入

//引入path模块来用其中的join方法
const path = require('path');
//引入下载的loader
const pwp = require('purgecss-webpack-plugin');
//引入glob
const glob = require('glob');//拼接路径
const PATHS = {src: path.join(__dirname,'src')};

使用

plugins:[new pwp({path:glob.sync{pattern:`${PATHS.src}/**/*`,options: {nodir:true}}})
],

npm 及 webpack打包工具相关推荐

webpack打包工具的基本使用
目录一.webpack是什么? 二.webpack的基本使用 1.初始化项目 2.安装webpack及其依赖 3.使用 3.1 配置webpack: 3.2 在package.js文件中添加打包命令 ...
webpack打包工具不会用，那是因为你没看过这篇
webpack打包工具一.认识webpack 1. 前端模块化 2.打包如何理解呢? 3.和grunt/gulp的对比二.webpack的安装三.webpack的起步 1.准备工作 2.js文件 ...
webpack打包工具1
接下来我将从使用jQuery的一个实例中出发,总结webpack在webstorm中使用方法: 首先我们来建立最基本的项目文件,如下图: 备注:其中webpack-study是项目文件名,src是我门 ...
webpack打包工具
文章目录前言一.yarn包管理工具二.webpack 1.webpack的基本概念 2.webpack的使用步骤 3.webpack开发服务器前言简介:webpack是node的第三方模块包 ...
webpack打包工具使用
webpack打包工具的使用什么是webpack? 官方给出的解释是: webpack 是一个现代化javascript应用程序的静态模块儿打包器(module bundler).当webpack处 ...
八十八、Webpack打包工具
@Author:Runsen 微信原文:你知道那些长长的js怎么来的吗? 今天不知道写啥东西,随便写了点,好水啊大家知不知道每次用js逆向时,发现那些长长的js代码,那可不是人写的.那到底是怎么来的 ...
Webpack实战（一）：基础入门-教你轻松搞定Webpack打包工具安装及参数配置
为什么要模块化 javascript跟其他开发语言有很多的区别,其中一个就是没有模块化概念,如果一个项目中有多个js文件,我们只能通过script标签引入的方式,把一个个js文件插入到页面,这种做法会 ...
Webpack打包工具的使用---打包引用JS和CSS文件
1.webpack概述: webpack是一款加载兼打包工具,它能把各种资源,例如J(含JX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 2.全局安装: 在安装Web ...
Webpack(打包工具)
Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载 ...

npm 及 webpack打包工具