手把手教你打包代码----webpack

webpack基本概念

webpack本质是, node的一个第三方模块包, 用于打包代码;

现代 javascript 应用程序的 静态模块打包器 (module bundler)

webpack能做什么

功能:
   1.压缩,合并,打包 
   2. 语法转换

•         高版本===>低版本(降级兼容)
•         less/sass -> css

   3. 监听代码变化,自动打包和更新
   4. 提取vue中的html/.css/js文件

作用:

1.减少文件数量;

2.缩减代码体积;

3.提高浏览器打开的速度;

新建webpack的步骤:

1.初始化--package.json
        

yarn init

 2.下载webpack等模块包
    

    yarn add webpack webpack-cli -D

    3.在package.json自定义命令,为打包做准备
 

      scripts: {
    "build": "webpack"
}

    4.新建目录src,在src文件夹下建立index.js文件---该文件为,默认入口  ./src/index.js

    5.新建业务文件,并定义执行函数(js代码)---src/add/add.js
    6.在src/index.js中导入业务文件
    7.运行打包代码
      

  yarn build
#或者 npm run build

            打包后会自动生成dist文件夹  ----默认出口: ./dist/main.js
    8.打开默认生成的dist和main.js文件,查看其中代码

webpack 更新打包

以后代码变更, 如何重新打包呢?

别担心,只需要输入打包指令重新打包就好啦~

yarn build

webpack的配置

webpack-入口和出口

默认入口: ./src/index.js

entry: "./src/main.js",

默认出口: ./dist/main.js

output: { 
        path: path.join(__dirname, "dist"), // 出口路径
        filename: "bundle.js" // 出口文件名
    }

修改package.json, 自定义打包命令 - 让webpack使用配置文件

"scripts": {
    "build": "webpack"
},

webpack默认只能处理js类型文件,无法识别html文件---因此,我们需要借助工具来解决引入HTML

插件的使用----自动生成html文件

目标: html-webpack-plugin插件, 让webpack打包后生成html文件并自动引入打包后的js

1.下载插件

yarn add html-webpack-plugin  -D

2.webpack.config.js配置

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' // 以此为基准生成打包后html文件
        })
    ]
}

加载器的使用

css加载器

安装

yarn add style-loader css-loader -D

webpack.config.js 配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...其他代码
    module: { // 加载器
        rules: [ // loader的规则
          {
            test: /\.css$/, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

把css文件引入到 main.js

import "./css/index.css"

less加载器

目标: less-loader让webpack处理less文件, less模块翻译less代码

下载包

yarn add less less-loader -D

webpack.config.js配置

 rules: [ // loader的规则
    // ...省略其他
    {
    	test: /\.less$/,
    	// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]

把less引入到main.js中

import "./less/index.less"

图片文件 加载器

目标: 用asset module方式(webpack5版本新增)

下载包

yarn add url-loader file-loader -D

webpack.config.js 配置

{
    test: /\.(png|jpg|gif|jpeg)$/i,
    type: 'asset'
}

在src/main.js - 把图片插入到创建的img标签上

// 引入图片-使用
import imgUrl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)

总结: url-loader 把文件转base64 打包进js中, 会有30%的增大, file-loader 把文件直接复制输出

字体文件加载器

配置

{ // webpack5默认内部不认识这些文件, 所以当做静态资源直接输出即可
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/resource',
    generator: { //生成文件名定义规则(自定义文件名)
    	filename: 'font/[name].[hash:6][ext]'
    }
}

在main.js引入iconfont.css

// 引入字体图标文件
import './assets/fonts/iconfont.css'

总结: url-loader和file-loader 可以打包静态资源文件

js语法转换

安装包

yarn add -D babel-loader @babel/core @babel/preset-env

配置规则

rules: [
    {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
            }
        }
    }
  ]

总结: babel-loader 可以让webpack 对高版本js语法做降级处理后打包

webpack 开发服务器

每次修改代码, 都需要重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 非常费时，我们可以启动本地服务, 可实时更新修改的代码, 打包变化代码到内存中, 然后直接提供端口和网页访问。

下载包

yarn add webpack-dev-server -D

配置自定义命令

scripts: {
	"build": "webpack",
	"serve": "webpack serve"
}

如果想设置特定的端口号，可以在webpack.config.js中添加服务器配置（webpack-dev-server配置 ）

webpack-dev-server配置

module.exports = {
    // ...其他配置
    devServer: {
      port: 3000 // 端口号
    }
}

运行命令-启动webpack开发服务器

yarn serve
#或者 npm run serve