webpack笔记

什么是webpack❓

webpack本质是一个nodeJs的一个第三方模块包，用于打包代码，和各种文件。

现代javascript应用程序的静态模块打包器
为学vue开发环境做铺垫

大白话：webpack是一个压缩打包web项目的nodejs第三方模块包

官方解说：

webpack是一个开源的前端打包工具。webpack提供了前端开放缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。webpack可以从终端、或者更改 webpack.config.js 来设置各项功能。要使用webpack前须先安装node.js。

webpack的优点：👍

webpack是以commonJS的形式来书写脚本滴，但对AMD/CMD的支持也很全面，方便旧项目进行代码迁移。
这样能被模块化的不仅仅是JS了。
开发便捷，能代替部分grunt/gulp的工作，比如打包，压缩混淆、图片转换base64等。
扩展性强，插件机制完善，特别是支持React热插拔(见react-hot-loader)的功能让人眼前一亮。

作用：🔧

将多个js文件打包生成最终一个压缩后的js文件，减少文件数量和体积，从而提升访问速度，可还可以打包任意类型文件。

webpack从读取配置到输出文件整个过程解析：

初始化参数：从配置文件和shell语句中读取与合并参数，得出最终的参数；
开始编译：用上一步得到的参数初始化Compiler对象，架子啊所有配置的插件，执行对象的run方法开始执行编译；
确定入口：根据配置中的entry找出所有的入口文件；
编译模块：从入口文件出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都进过了本步骤的处理；
完成模块编译：在经过第4步使用Loadder翻译完所有模块后，得到了每个模块被翻译的最终内容以及它们之间的依赖关系；
输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这不是可以修改输出内容的最后机会；
输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

使用前置：📦

安装node.js
安装npm(node.js安装好后npm应该就可以使用了)，也可以使用yarn代替

js代码里的模块导入/导出及文件的导入

在webpack里万物皆模块 📦

1. nodejs内置的导入/导出：

假设有两个js文件并且在同一目录下，一个是add.js、另一个是main.js，add.js里写了一个求和函数，main.js要用add.js里的求和函数。

方法：module.exports = 要暴露的数据 ; require('要导入的数据的路径')

add.js内容：

function add (a,b){
  return a+b
};
// 将add这个函数对外暴露
module.exports = {add:add} // 以对象的形式暴露(一般情况下)

main.js内容：

1
2
3

// 获取模块(解构赋值)
var {add} = require('./add.js') // 导入同级目录下的add.js文件对外暴露的内容
console.log(add(10,20)) // 打印输出30

2. ES6模块化导入/导出（企业常用）

使用方式同nodejs，只不过语法不同

注意⚠️：ES6模块化导入/导出要通过webpack打包后才能执行

方式一(默认方式导入导出)

// 导出
export default 值(变量、函数、对象、数组...任意值)
// 导入
import 变量名 from '文件路径'

导入导出的变量名可以不一样

方式二(多变量导入导出)

// 导出
export let/const/var 变量名1 = 值(任意数据类型)
export let/const/var 变量名1 = 值(任意数据类型)
...
// 导入
import {变量名1,变量名2...} from '文件路径'

导入导出的变量名要一致

3. webpack里loader加载的文件导入：

需要在入口js文件里导入文件 import '文件相对路径及文件名'

代码文件导入：（css, less,js,sass,ejs……）

1 2	// 例如导入css文件 import './css/index.css'

资源文件导入： (图片，视频，字体……)

// 例如导入图片文件
import imgSrc from './imgs/logo.png';
// 给图片标签添加src路径
document.querySelector('img.logo').src = imgSrc

npm和yarn命令表

说明	npm命令	yran命令
初始化包环境	npm init	yarn init
根据配置完善依赖包	npm install	yarn install
安装依赖包	npm install/i (包名)	yarn add (包名)
安装依赖包(版本)	npm install [包名]@[版本号]	yarn add [包名]@[版本号]
卸载依赖包	npm uninstall [包名]	yarn remove [包名]
更新依赖包	npm updata [包名]	yarn upgrade [包名]
全局部署后缀	–global	（无）
安装到当前目录(后缀)	(默认)	-D
发布/登陆/登出	npm publish/login/logout	yarn publish/login/logout
运行某个命令	npm run/test	yarn run/test
webpack打包命令	npx webpack	yarn webpack

基础使用操作(第三方包使用前置)：📦

环境准备：

注意⚠️：要不全使用npm，要不全使用yarn，不然会出错(大神随意)。

初始化包环境：npm init 或者 yarn init
安装依赖包：npm install webpack webpack-cli 或者 yarn add webpack webpack-cli -D

webpack5之后的打包目录通常在项目根目录的src文件夹里边

入门-打包js文件：

操作流程

在项目根目录创建一个src文件夹
在src目录里创建add.js文件，里边写一些要用的方法，并且**对外暴露(导出)**里边的东西。
在src文件夹创建一个index.js文件，在里边导入add.js并使用导入的方法。（index.js作为默认入口文件）
在项目目录下打开终端输入打包命令yarn webpack或npx webpack
打包好的js文件默认输出到dist文件夹，名称为main.js

结论：

打包的东西都需要引入到 入口文件 里
被引入的东西都需要对外导出(暴露)
打包好的文件会生成到指定文件夹（默认为项目根目录的dist文件夹）

如何配置webpack打包

为什么要配置webpack：webpack5最新版的打包方式是不需要配置，但是由于项目用到的第三方包比较多，打包的文件类型也比较多，就不得不进行webpack的配置，且webpack的第三方包也是需要通过配置来引入使用的。

需要在项目根目录下新建一个webpack.config.js文件，接着就可以在里边编写配置啦。

内容：

// 引入node内置的path模块(路径模块)
const path = require('path');
// 引入html-webpack-plugin模块(html打包的模块);
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 各种模块的的引入配置
module.exports = {
  // 指定webpack打包的入口文件
  entry: './src/main.js'  // (可自定义)
  // 配置webpack打包的的输出文件夹和文件名
  output: {
    // 路径
    path: path.resolve(__dirname,'dist'),
    // 输入文件名
    filename: 'bundle.js',  // (可自定义)
  },
  // html-webpack-plugin的配置
  plugins: [new HtmlWebpackPlugin({  // 新建html打包对象
    // 指定打包html模版文件
    template: './public/index.html'
  })],
  // 配置loader(载入文件配置)
  module: {
    // 一个具体的loader配置
    rules: [
      // css打包的loader配置
      {
        // css文件名的匹配名称设置
        text: /\.css$/i,   // 文件后缀名的正则表达式
        // 使用哪个载入模块打包
        use: ['style-loader','css-loader'],
        // 执行顺序： 从右往左,从下往上
      },
      // 图片打包的loader配置
      {
        // 图片文件名的匹配名称设置
        test: /\.(png|jpg|jpeg|gif)$/i,
       	// 设置打包的类型'asset'为资源,输出时将直接放到输出文件夹
        type: 'asset'
      },
      // less打包的loader配置
      {
      	test: /\.less$/i,
        use: ['style-loader','css-loader','less-loader']
      },
      // 字体图标的loader配置
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        // 类型为资源文件
        type: 'asset/resource',
        generator: {
          // 导出文件名称设置
          filename: 'font/[name].[ext]'
        }
      },
      // JS降级处理
      {
        test: /\.js$/,
        // exclude属性配置那些文件夹下的文件不被处理
        exclude:/(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
           ]
  },
  // 开发服务器端口配置
  devServer: {
    // 服务根目录设置
    contentBase: path.join(__dirname,"dist"),
      compress: true, // 是否在服务运行起来后打开网页
      port:3000  // 配置端口号
  }
}

面试常问：web执行顺序：从右往左,从下往上

以上配置为所学内容的配置，其余配置请参考webpack中文文档

webpack中的loader和plugin

loader——英文翻译”载入程序”

载入程序，一般是些和网页相关的文件，如css,less,字体图标,图片,等等，一般情况下使用特定loader可以将这些文件打包压缩。

plugin——英文翻译”插件”

插件，一般是用于

webpack打包命令：

Npm：npx webpack

Yarn：yarn webpack

1.打包js文件

默认打包的就是js文件

凡是主入口文件导入的模块，都会被打包

通过配置webpack.config.js文件自定义入口文件及输出目录

在终端输入yarn webpack或npx webpack执行打包

2. html-webpack-plugin插件(打包html文件)

Html-webpack-plugin插件为html打包的插件

终端执行npm install --save-dev html-webpack-plugin或yarn add html-webpack-plugin -的安装html-webpack-plugi插件

在配置文件添加如下配置

// 添加路径模块
var path = require('path')
// 创建htmlwebpackplugin对象
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 自定义html打包配置
var webpackConfig = {
  entry: 'index.js',  // 入口文件
  output: {
    path: path.resolve(__dirname, './dist'),  // 保存目录
    filename: 'index_bundle.js'  // js保存文件名
  },
  plugins: [new HtmlWebpackPlugin()]
};

当然你也可以直接在module.exports里添加如下两条就可以了

1 2	var HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [new HtmlWebpackPlugin()]

打包时会自动生成和public里的html模版文件名字一致的html文件。

打包

生词	翻译
module	模块
rules	条例、规则
exports	出口商品
entry	入口
output	输出
path	路径
plugin	插件
loader	载入程序、装卸工
template	模版
generator	发生器、生产者

3.css文件打包

安装style-loader模块和css-loader模块

执行yarn add style-loader css-loader -D或者npm i --save-dev style-loader css-loader

添加配置

module: {
  // 一个具体的loader配置
  rules: [{
    // test里写正则表达式，用于判断文件名
    test: /\.css$/i,
    // use里写的是使用的loader(装卸)模块
    use: ['style-loader','css-loader'],
    // 执行顺序  从右到左，从下到上
  }]
}

在入口js文件里导入css文件 (不知道怎么导入往上翻)
1
import 'css文件路径'
执行打包命令

4.less文件打包

安装less、less-loader、css-loader、style-loader模块

// npm 安装
npm install --save-dev less less-loader css-loader style-loader
// yarn 安装
yarn add less less-loader css-loader style-loader -D

添加配置

module: {
  rules: [{
    // test里写正则表达式，用于判断文件名
    test: /\.less$/i,
    // use里写的是使用的loader(装卸)模块
    use: ['style-loader','css-loader','less-loader'],
    // 执行顺序  从右到左，从下到上
  }]
}

在入口js文件里导入less文件 (不知道怎么导入往上翻)
1
import 'less文件路径'
执行打包命令

5.图片打包

添加配置

// 配置loader
module: {
  rules: [{
    // test里写正则表达式，用于判断文件名
    test: /\.(png|jpeg|jpg|gif)$/i,
    // use里写的是使用的loader(装卸)模块
    type: 'asset'
  }]
}

在入口js文件里导入图片文件 (不知道怎么导入往上翻)

1 2	import imgSrc from '图片文件路径' // 导入的imgSrc为一个图片的路径，可用于图片元素标签的src属性。

执行打包命令

6.字体图标打包

将字体图标放到项目目录里的font文件夹(位置可以自己定)

添加配置

// 配置loader
module: {
  rules: [{
    // test里写正则表达式，用于判断文件名
    test: /\.(ent|svg|ttf|woff)$/i,
    // 类型为asset(资源)
    type: 'asset/resource',
    generator: {
      // 输出文件到dist目录下的同样的文件名和后缀名   
      filename: 'font/[name].[ext]'
    }
  }]
}

这里的[name]和[ext]分别为[文件名]和[文件后缀名]

在style样式或css文件里引用字体图标
1
2
3
span{
font-family: icomoon
}
执行打包命令

7.JS语法降级打包

下载安装加载器

yarn add babel-loader @babel/core

添加webpack.config.js配置

module: {
  rules: [{
    // test里写正则表达式，用于判断文件名
    test: /\.js$/i,
    exclude:/(node_modules|bower_compinents)/,
    use:{
      loader: 'babel-loader',
      options:{
        presets:['@babel/preset-env']
      }
    }
  }]
}

执行打包命令