npm 及 webpack打包工具

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}}
    })
],