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.js

test command:
# 包的存放类型
git repository: git
# 被搜索的关键字
keywords:vue ajax
# 作者
author:miu
# 规范类型（默认为ISO）
license: (ISC)MIT

About 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.js
        one:'路径一',
        two:'路径二'
    },
    output：{
    //文件名称one.js，two.js
    filename:'[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引用到了首页html
            chunks: ['common', 'index'],
            minify: {
                // 空格
                collapseWhitespace: true,
                // 注释
                removeConmments: true
            }
        }),
        // 购物车
        new hwp({
            template: './view/cart.html',
            filename: 'cart.html',
            // 这里把公共js和购物车js引用到了购物车html
            chunks: ['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$/,//这个地方为scss
                use: ['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.loader
            use: [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-env
    plugins: [
        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 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue