webpack — 概述（2）

偏执的太偏执、 2023-02-19 12:26 37阅读 0赞

# webpack学前必备 #

[webpack中文网][webpack]

[webpack官网][webpack 1]

## 1. Webpack 介绍 ##

#### Webpack 是什么?? (面试) ####

*  前端模块化打包工具
 *  WebPack可以看做是**模块打包机**：它做的事情是，分析你的项目结构，找到JavaScript模块、其它的一些浏览器不能直接运行的拓展语言（Scss，less等）以及新语法，并将其转换和打包为合适的格式供浏览器使用。

#### 为什要使用WebPack?? (面试) ####

*  浏览器不识别 SASS、Less ==> 需要对Less/SASS 进行预编译转为CSS , 供浏览器使用
 *  项目中的模块化以及互相之间引用依赖包造成文件分散 ==> 需要把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数
 *  打包成了大文件,体积就变大了 ==> 代码压缩
 *  部分ES6语法有兼容问题 => ES5/ES3 => 浏览器使用
 *  …
 *  以上这些操作以前都是需要我们手动处理,这是非常繁琐的, 这个时候webpack就可以上场了,以上的这些操作,
 *  在webpack里,只要配置好,一下就可以都搞定了

#### webpack模块化说明 ####

1. webpack是一个模块化打包器。
    
    2. webpack中的模块：
       以前，我们说一个js文件就是一个模块
       webpack中一切的资源都可以称之为模块。webpack基于node,  html/css/js/图片/资源都可以是模块
    
    3. webpack内部提供了一种通用的模块机制。
       支持市面上所有的模块化语法，，，，，最终webpack内部打包的时候，都会变成通用的模块化语法。
    
    4. 目前有哪些模块化规范
    nodejs中 ：   Commonjs规范     require()  module.exports ={ }
    浏览器中：    AMD规范   CMD规范  requirejs seajs
    ES6中还提供了一种通用的模块化规范  import export （nodejs  浏览器）
    
    webpack支持所有的规范。

#### 使用说明 ####

> 一般来说，以后开发都是在webpack的环境下进行开发（node环境）
> 
> 并且我们写完的项目并不会直接上线。 而是会经过webpack进行打包。 最终把打包过的文件进行上线。

## 2. Webpack 四个核心概念 (学前了解)： ##

> **入口(entry)**、**出口(output)**、**加载器(loader)**、**插件(plugins)**

*  入口 : 要打包哪个文件
 *  出口 : 要打包到哪里
 *  加载器 : 加载除了js文件其他文件的功能 (css less png)
 *  插件 : 处理加载器完成不了的功能, 使用插件

## 3. npm 使用回顾 ##

#### 3.1 全局安装 ####

*  格式 : `npm i xxx -g`
 *  作用 : 全局安装的包, 是当成一个工具来使用的
 *  比如 :`npm i http-server -g`, `npm i live-server -g` , `npm i json-server -g` 等等

#### 3.2 本地安装1 ####

*  格式 : `npm i xxx`
 *  其他版本 :`npm i xx --save` 和 `npm i xx -S`
 *  作用 : 本地安装的包, `发布上线阶段` 要用到的库
 *  依赖位置 : 把包的依赖添加到 `dependencies`中
 *  比如 : `npm i axios`

#### 3.3 本地安装2 (配置webpack用的最多) ####

*  格式 : `npm i xxx -D`
 *  其他版本 : `npm i xxx --save dev`
 *  作用 : 本地安装的包, 只在`开发阶段`都要用到的库
 *  依赖位置 : 把包的依赖添加到 `devdependencies`中
 *  比如 : `npm i webpack -D`

## 4. 淘宝镜像 ##

*  **方式1 : 直接命令**

2.1.1. 命令 
    npm config set registry https://registry.npm.taobao.org
    
    2.1.2. 验证命令
    npm config get registry
    如果返回https://registry.npm.taobao.org，说明镜像配置成功。

*  **方式2 : nrm**

- 全局安装 nrm   :  npm i nrm -g 
    - 查看有哪些镜像源  : nrm ls
    - 切换镜像源       : nrm use taobao
    
    - 如果确定安装过 nrm 但是报错不能使用  =>  可能是 nrm 没有配置过环境变量  
    - cmd => where nrm   => C:\Users\ma250\AppData\Roaming\npm\nrm
    =>拿到 C:\Users\ma250\AppData\Roaming\npm => 添加到环境变量里面去 => 再把终端都关闭

## 5. package.json 的介绍 ##

> npm init -y

{ 
      // 包名/项目名 要求:小写字母, 不能是大写或者叫webpack
      "name": "webpack-demo",
      // 版本号 
      "version": "1.0.0",
      // 介绍
      "description": "",
      // 默认入口文件index.js 可以自己指定 
      "main": "index.js",
      // 脚本 (★★★) 
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      // 关键字 
      "keywords": [],
      // 作者
      "author": "",
      // 许可证 
      "license": "ISC"
    }

*  配置自定义脚本
    
     *  创建一个 `index.js` =>`console.log('测试启动脚本')`
     *  执行 : `node index.js`
     *  也可以通过运行脚本来执行命令 (优势 如果配置太多 手动就不好处理了)
 *  **常见脚本**

"scripts": { 
      "build": "node index.js",
      "dev": "node index.js",
      "serve": "node index.js",
    }
    // 像以上这几种运行脚本 : npm run build/dev/serve
      
    "scripts": { 
        "start": "node index.js",
        "stop": "node index.js",
        "restart": "node index.js"
    },  
    // 像 start、stop、restart test这几种 我们可以省略 run
    // 直 npm run start 或者 npm start 都可以

# webpack配置 #

## 1. webpack打包的基本使用 ##

[本地安装][Link 1]

1.  创建项目名称 `webacpk-demo` : `不能是大写 不能是webpack`
2.  使用`npm init -y`生成`package.json` :
3.  创建两个文件夹 `src/`(源代码文件夹) 和 `dist/`(最终打包输出的文件夹)
4.  在 `src` 里面创建一个 `index.js` 文件 (准备要被打包的入口文件)

console.log('我就要被打包了,哦也');

1.  安装依赖包 :`npm i webpack webpack-cli -D`

webpack  - 核心包
    webpack-cli - 使用 webpack 4+版本需要安装

1.  添加脚本 : `build`

"scripts": { 
        // "build" : "webpack 入口文件 --output 出口文件"
        "build" : "webpack ./src/index.js --output dist/bundle.js"
      },

1.  打包运行命令 :`npm run build`

*  画图

## 2. mode 配置 ##

WARNING in configuration
    The 'mode' option has not been set, webpack will fallback(备用) to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

*  `mode`配置项
    
     *  `development` : 开发阶段 (不压缩)
     *  `production` : 发布阶段 (压缩)
 *  配置

"scripts": { 
        "build": "webpack ./src/index.js --output dist/bundle.js --mode development"
        "build": "webpack ./src/index.js --output dist/bundle.js --mode production"
      },

## 3. 指定配置文件 (★★★) ##

[使用一个配置文件][Link 2]

> 随着配置越来越多,在脚本里配置就显得麻烦了 所以我们一般常用配置文件

1.  根目录 创建一个配置文件 : `webpack.config.js`

你也可以创建 webpack.config.dev.js(开发阶段用的)  webpack.config.prod.js(发布阶段用的)

1.  添加配置

// 因为 webpack 是基于 node
    // 所以在配置文件里面 我们可以直接使用 node 的语法
    const path = require('path')
    
    module.exports = { 
      // 入口
      entry: path(__dirname, './src/index.js'),
    
      // 出口
      output: { 
        // 目录
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js',
      },
      // mode
      mode: 'development',
    }

1.  修改脚本

"build" : "webpack --config webpack.config.js"

## 4. 隔行变色案例 ##

1.  创建 : `src/index.html`
2.  隔行案例结构 => `ul>li{我是li $}* 10`
3.  安装 `jquery` : `npm i jquery`
4.  引入 jquery 和 设置样式 (`ok`)

// 引入
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    
    // 设置样式
    $('li:odd').css('background', 'red')
    $('li:even').css('background', 'blue')

1.  使用 es6 的模块化语法 `import`

// 使用ES6的模块化语法
    import $ from 'jquery'      # 优点: 不用沿着路径去找      # 浏览器不支持import语法 报错
    ....
    // 语法报错

1.  打包 : `npm run build`
2.  引入 `打包后的文件`

1.  **code记得保存一份**

## 5. 插件: html-webpack-plugin ##

[html-webpack-plugin][]

> 作用 :
> 
> 1.  能够根据指定的模板文件 (index.html),自动生成一个新的 index.html,并且注入到dist文件夹下
> 2.  能够自动引入js文件

1.  安装 :

npm i html-webpack-plugin -D

1.  配置 :

第一步: 引入模块
    const htmlWebpackPlugin = require('html-webpack-plugin')
    第二步: 配置
    // 插件
    plugins: [
      // 使用插件 指定模板
      new htmlWebpackPlugin({ 
        template: path.join(__dirname, './src/index.html')
      })
    ]

# webpack 处理 非 js 文件 #

> webpack 只能处理 js 文件,非 js (css.less.图片.字体等) 处理不了, 借助 loader 加载器

## 1. 处理 css文件 ##

1.  创建一个css文件 : `src/css/index.css`

li { 
      line-height: 40px;
      height: 40px;
    }

1.  `index.js` 中引入

import './css/index.css'

1.  安装 : `npm i style-loader css-loader -D`
2.  配置

// loader
    module: { 
      rules: [
          //1.处理 css
          // 注意点 use执行loader 顺序 从右往左
          // css-loader : 读取css文件内容,将其转化为一个模块
          // style-loader : 拿到模块, 创建一个style标签,插入页面中
        {  test: /\.css$/, use: ['style-loader', 'css-loader'] }
      ]
    }

1.  重启 `npm run dev`

## 2. 处理 less 文件 ##

1.  创建一个 less 文件 : `src/css/index.less`

ul { 
      list-style: none; li { 
        &:hover { 
          color: yellow;
        }
      }
    }

1.  `index.js` 中引入

import './css/index.less'

1.  安装 : `npm i less-loader less style-loader css-loader -D`
2.  配置

// loader
    module: { 
      rules: [
          //2.处理 less
        {  test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] }
      ]
    }

1.  重启 `npm run dev`

## 3. 处理图片 ##

1.  创建`src/images/`, 引入两种图片 `01.png 和 1.gif`
2.  在`index.css`中设置背景图片

body { 
      padding-top: 200px;
      background: url(../images/01.png) no-repeat;
    }

1.  安装 : `npm i -D url-loader file-loader`

> url-loader (推荐) 和 file-loader 二选一即可

1.  配置 :

// 处理图片
      {  test : /\.(jpg|png|gif)$/, use : ['url-loader'] },

## 4. url-loader 和 file-loader ##

#### 4.1通过 npm run build 打实体闭演示区别 ####

*  **url-loader** 会把图片编译成 base64 格式,打包到 bundle.js 中

- base64 : 是一种编码格式,能够将图片、文字等常见的文件,转化为 base64 格式,这种字符串格式, 浏览器能够识别并且读取显示到页面中, 也可以直接被内嵌到页面中, 或者 css 中
    - 一旦打包成base64格式之后, 会以字符串的形式存在 bundle.js 中, 好处是能够减少一个图片的 HTTP 请求
    - index.html   =====>  bundle.js( base64图片格式 )

> 注意 : Base64 的好处是能够减少一个图片的 HTTP 请求，然而，与之同时付出的代价则是 CSS 文件体积的增大。
> 
> CSS 文件体积的增大意味着什么呢？意味着 CRP 的阻塞。 CRP（Critical Rendering Path，关键渲染路径）
> 
> CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕

*  **file-loader** 不会把图片打包到 bundle.js中，而是单独的生成了一个张图片

> 劣势 : 单独生成一个图片, 就要多发送一个图片的 http请求

#### 4.2 最终方案 ####

> 方案 :
> 
>  如果图片小的话, 就使用url-loader 编译成base64 格式,
> 
>  如果图片大的话 就使用file-loader单独生成一个图片文件

1.  配置

// 使用 url-laoder , 因为url-loader 依赖 file-loader
    {  test : /\.(jpg|png|gif)$/, use : ['url-loader'] },

1.  添加`limit`配置

方式1(旧) :{  test : /\.(jpg|png)$/, use : ['url-loader?limit=10000'] },   // use 后 多个为数组, 少为对象 都可以
    方式2(新) : 
    { 
      test: /\.(jpg|png)$/, use: 
        { 
          loader: 'url-loader',
          options: { 
            // < 21k => 通过url-loader => 转化为base64
            // >= 21kb => 通过file-loader=> 不会转base64 单独生成一个图片文件
            limit: 21 * 1024
          }
        }
    },

1.  可以 `build`演示

## 5. 处理 字体 文件 ##

1.  准备字体图标: 字体图标文件 `iconfont` 或者 从`阿里矢量图标`里下载
2.  在 **index.js** 中引入 css 文件
    
        import '../css/iconfont/iconfont.css'
3.  使用 : 
4.  在 webpack.config.js 中配置

// 4. 处理字体图标
      {  test:/\.(svg|woff|woff2|ttf|eot)$/,use:'url-loader'}

###  ###

# 提取文件 #

## 1. 提取css到`css`文件夹 ##

[提取css文件][css]

1.  安装 : `npm i mini-css-extract-plugin -D`
2.  配置

//2.1 引入 模块
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    module.exports = { 
      //2.2 实例插件
      plugins: [new MiniCssExtractPlugin()],
      //2.3 配置
      module: { 
        rules: [
          { 
            test: /\.css$/,
            use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'],
          },
        ],
      },
    };
    
    /// =======> 生成一个 main.css 文件

1.  自定义`css`文件名

//2.2 实例插件
    new MiniCssExtractPlugin({ 
      filename: 'css/index.css',
    }),
      
    // ===> 图片引入失败 , 层级不对

1.  添加公共路径

{ 
       test: /\.css$/,
         use: [
           { 
             loader: MiniCssExtractPlugin.loader,
             options: { 
               // index.css 里面的引入路径都加个 ../
               publicPath: '../',
             },
           },
           'css-loader',
         ],
     },

现在的`css文件`

body { 
      padding-top: 200px;
      background: url(../3309d79967e334a7c78cf8130266c390.gif) no-repeat;
    }

## 2. 提取字体到 `fonts`文件夹里 ##

{ 
      test: /\.(eot|woff|svg|ttf)$/,
      use: { 
          loader: 'url-loader',
           // loader的参数配置
           options: { 
            // 范围 30k 1kb = 2014字节
            limit: 2 * 1024,
            name: '[name].[ext]',
            outputPath: 'fonts'
            }
        }
    },

## 3. 提取图片到 `images`文件夹里 ##

// 处理图片
    { 
      test: /\.(png|jpg|gif)$/,
        use: [
          { 
            loader: 'url-loader',
             options: { 
               limit: 1000,
               name: '[name].[ext]',
               outputPath: 'images',
            },
          },
        ],
    },

# 开发阶段 #

## 1. webpack-dev-server ##

> 作用 : 为使用 webpack 打包提供一个服务器环境
> 
>  1 自动为我们的项目创建一个服务器
> 
>  2 自动打开浏览器
> 
>  3 自动监视文件变化,自动刷新浏览器…

1.  安装 :`npm i webpack-dev-server -D`
2.  添加一个脚本 `dev`

"scripts": { 
      "serve" : "webpack-dev-server --config webpack.config.js"
    },

1.  运行脚本 :

运行 :npm run serve
    
    结果 : i ｢wdm｣: Compiled successfully.
    
    查看 : Project is running at http://localhost:8080/

1.  作用演示 :

# 自动打开浏览器
     devServer: { 
        open: true
    }
    # 自动监视文件变化 + 自动刷新
    $('li:even').css('background', 'blue')  ==> 'yellow' 
    
    # 配置端口
     devServer: { 
        open: true,
        port :3001
    }

## 2. hot 热更新 (待定) ##

"dev": "webpack-dev-server --config webpack.config.js --hot"

\#\#3. serve 和 build的使用区别

"scripts": { 
      "build": "webpack --config webpack.config.js",
      "serve": "webpack-dev-server --config webpack.config.js"
    },

*  **npm run serve**

开发模式 :  => 开发项目中使用 , 不会打包出实体文件, 打包到内存中, 这样能够及时监视更新

*  **npm run build**

发布上线使用
    1 执行 : `npm run build` 对项目进行打包,生成dist文件
    2 模拟本地服务器 : 安装 : `npm i -g live-server`
    3 把dist文件里的内容放到服务器里即可, 直接运行`live-server`

# 处理es6语法 #

> 现在的项目都是使用 ES6 开发的, 但是这些新的 ES6 语法, 并不是所有的浏览器都支持, 所以就需要有一个工具,帮我们转成 es5 语法, 这个就是: babel

*  Babel is a JavaScript compiler. ==> babel 是一个 JavaScript 编译器
 *  webpack 只能处理 import / export 这个 es6 模块化语法 而其他的 js 新语法,应该使用 babel 来处理

[babel 英文网][babel]

[babel中文网][babel 1]

[webpack-babel-loader][]

1.  安装 :

npm install -D babel-loader @babel/core @babel/preset-env
    
    babel-loader 处理js
    @babel/core 核心包
    @babel/preset-env  处理es6 789....

1.  配置

module: { 
      rules: [
        { 
          test: /\.js$/,
          exclude: /node_modules/,
          use: { 
            loader: 'babel-loader',
            options: { 
              presets: ['@babel/preset-env']   // 处理es6-最新 
            }
          }
        }
      ]
    }

1.  或者 创建 `.babelrc`

{ 
      "presets": ["env"]
    }

# 模块化语法 (webpack-import) #

## 1. 模块化语法的分类 (必记) ##

*  node的commonjs 规范 :
    
     *  导入 : `require()`
     *  导出 : `module.exports = {}`
 *  es6的最新模块化语法
    
     *  导入 : `import`
     *  导出 : `export`

## 2. 介绍 ##

> 模块中的变量或者函数等等都是只能在本模块使用, 其实模块想使用 需要引入

## 3. 导出一个变量 ##

*  **导出一个变量**

let num = 30
    
    let test = () => console.log(666)
    
    let obj = {  name: 'zs', age: 60 }
    
    export default num  或者
    export default obj  或者
    export default test

*  **引入**

import res from './a'   // res 任意取名
    
    console.log(res)

## 4. 导出多个变量 ##

*  **导出多个变量**

// 导出多个
    export let tool1 = () => console.log(111)
    export let tool2 = () => console.log(222)
    export let tool3 = () => console.log(333)

*  **引入**

// { } 里面必须是固定名称
    import {  tool1, tool2, tool3 } from './a'
    console.log(tool1)
    console.log(tool2)
    console.log(tool3)
    
    tool1()
    tool2()
    tool3()

*  取别名

import {  tool1 as t1, tool2, tool3 } from './a'
    console.log(t1)
    
    t1()

# 单文件组件 (webpack-vue) #

## 1. 介绍 ##

[单文件组件][Link 3]

*  拷贝`webpack环境文件` : `webpack.config.js` \+ `package.json`
 *  注册组件

// index.js 
    Vue.component('Demo', { 
      template : `<div>组件</div>`
    })
    // 缺点无高亮

*  提出一个对象到一个模块中

// demo.js
    let Demo = { 
      template : `<div>组件</div>`
    }
    module.exports  = Demo
    // 还是没有高亮

*  改在 单文件组件

// demo.vue
    <script>
     module.exports = { 
       template : `<div>组件</div>`
     }
    </script>

*  添加 结构和样式

<template>
    	<div>组件</div>
    </template>
    <script>
     module.exports = { 
     
     }
    </script>
    <style lang='less'>
      div { 
        color : red
        font-size :'40px'
      }
    </style>

*  配置vue

// index.html
    <div id="app"></div>
    
    // index.js
    import App from './App.vue'
    import Vue from 'vue'
    
    new Vue({ 
      // el 指定管理编辑
      el: '#app',
      // 渲染根组件
      render: (h) => h(App),
    })

## 2. 配置 ##

> vue官网 => vue-loader

[vue-loader][]

1.  安装:

npm install -D vue-loader vue-template-compiler

1.  配置

// webpack.config.js
    const VueLoaderPlugin = require('vue-loader/lib/plugin')            # +++
    
    module.exports = { 
      module: { 
        rules: [
          // ... 其它规则
          { 
            test: /\.vue$/,
            loader: 'vue-loader'                                         # +++
          }
        ]
      },
      plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin()                                             # +++
      ]
    }

## 3. 安装vscode插件 : `Vetur` ##

*  高亮
 *  有提示 : 输入`vue`

# 打包安装模块出错: 安装版本低的模块即可 #

**> npm install 模块名称@版本号 --save-dev**

如：

> npm install webpack@3.8.1 --save-dev

[webpack]: https://www.webpackjs.com/
[webpack 1]: https://webpack.js.org/
[Link 1]: https://www.webpackjs.com/guides/installation/#%E6%9C%AC%E5%9C%B0%E5%AE%89%E8%A3%85
[Link 2]: https://www.webpackjs.com/guides/getting-started/#%E4%BD%BF%E7%94%A8%E4%B8%80%E4%B8%AA%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6
[html-webpack-plugin]: https://www.webpackjs.com/plugins/html-webpack-plugin/
[css]: https://webpack.js.org/plugins/mini-css-extract-plugin/
[babel]: https://babeljs.io/
[babel 1]: https://www.babeljs.cn/
[webpack-babel-loader]: https://webpack.js.org/loaders/babel-loader/
[Link 3]: https://cn.vuejs.org/v2/guide/single-file-components.html#ad
[vue-loader]: https://vue-loader.vuejs.org/zh/guide/#vue-cli