webpack

never_.

已于 2023-10-29 19:42:07 修改

阅读量90

点赞数

文章标签： webpack 前端 node.js

于 2023-10-29 19:35:12 首次发布

本文链接：https://blog.csdn.net/m0_75168728/article/details/134106483

版权

一、概念

是基于node的静态模块打包工具，分析翻译、压缩、打包代码，可以减少文件数量，缩减代码体积，提高网页打开速度

支持所有类型文件打包

支持less/sass=>css

支持ES6/7/8=>ES5

压缩代码，提高加载速度

二、使用步骤

1.安装

（1）初始化包环境得到package.json

npm init

（2）安装依赖包

npm add webpack webpack-cli -D

（3）配置scripts（自定义命令）

在package.json文件写下：

“scripts”:{

“build”:”webpack”

2.打包整合压缩js文件

文件目录如图所示：

（1）新建scr文件夹，在里面新建文件index.js,webpack会默认找src下的index.js文件作为打包入口（为固定形式）

（2）在src下新建add文件夹，在里面新建add.js文件，并在该js文件里定义一个求和函数并导出

export const addFn=(a,b)=>a+b;

（3）在index.js文件中引入add模块并使用函数输出结果

import{addFn} from './add/add.js'

console.log(addFn(10,20))

（4）执行npm run build自定义命令，进行打包（确保终端路径在src的父级文件夹）

（5）打包后默认生成dist和main.js文件

main.js内容如下：

import{addFn} from './add/add.js'

console.log(addFn(10,20))

总结：使用webpack：

src/index.js是入口文件

将所有代码引入到入口文件

执行npm run build打包命令

打包整合到dist/main.js出口文件内

3.更新打包

在src下新建tool文件，在里面创建tool.js文件，在该文件里定义数组求和函数并导出；

// reduce对数组进行遍历，格式arr.reduce(函数体,变量初始值)，该例给sum一个初始值0

export const getArraySum=arr=>arr.reduce((sum,val)=>{

sum=sum+val;

//设置下一次遍历执行函数体的sum值

return sum;

},0);

在src/index.js文件中引入tool模块的函数，并使用，打印结果

import{addFn} from './add/add.js'

import{getArraySum} from './tool/tool.js'

console.log(addFn(10,20));

console.log(getArraySum([5,4,3,2,1]))

执行npm run build自定义命令，进行打包（确保终端路径在src的父级文件夹），main.js文件内容为：

(()=>{"use strict";console.log(30),console.log([5,4,3,2,1].reduce(((o,e)=>o+e),0))})();

总结：更新打包时，新增的代码要被引入到入口处，然后再次执行npm run build

4.配置修改

配置文档：https://webpack.docschina.org/concepts/#entry

（1）新建出口文件src/main.js，并将所有代码引入其中

（2）在src外面新建 webpack.config.js ，在填入配置（直接在文档复制），然后修改入口文件名和出口文件名

const path = require('path');

//导出webpack配置对象

module.exports = {

//webpack入口文件，要自己创建，并将代码引入其中

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

output: {

//path必须用绝对地址：path.resolve()拼接两个路径

path: path.resolve(__dirname, 'dist'),

//webpack出口文件，会自动创建，不用自己创建

filename: 'bundle.js',

},

};

// webpack基于node，所以导出遵守CommonJS规范

总结：

在src外面新建 webpack.config.js 配置文件

通过entry选项设置入口文件名

通过output对象设置出口路径和出口文件名

（3）执行npm run build即可打包

5.打包流程

6.隔行变色案例

用npm下载的包不能直接在前端上用

所以用webpack打包代码，jquery实现功能

（1）安装jquery：npm install jquery

（2）新建public/index.html，编写代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!-- ul#myUL>li{我是$个li}*10 -->

    <ul id="myUL">

        <li>我是第1个li</li>

        <li>我是第2个li</li>

        <li>我是第3个li</li>

        <li>我是第4个li</li>

        <li>我是第5个li</li>

        <li>我是第6个li</li>

        <li>我是第7个li</li>

        <li>我是第8个li</li>

        <li>我是第9个li</li>

        <li>我是第10个li</li>

    </ul>

</body>

</html>

（3）在src/main.js引入jquery，编写js代码实现效果，

import $ from 'jquery'

// #表示id选择器,:后为伪类选择器

$("#myUL>li:nth-child(2n+1)").css('color','red')

$("#myUL>li:nth-child(2n)").css('color','green')

（4）然后执行打包命令npm run build，再把index.html复制到dist下（dist为出口文件所在目录），然后在html中引入打包后的js，运行index.html即可实现效果

<script src="./bundle.js">

</script>

文件目录如下：

效果如下：

总结：

npm下载的包如何作用在前端项目？

借助webpack，把模块和代码打包

把打包后的js文件引入到html中即可运行

7.自动生成html文件

配置文档：https://webpack.docschina.org/plugins/html-webpack-plugin/

（1）下载插件

npm install --save-dev html-webpack-plugin

cnpm install html-webpack-plugin@5.0.0-alpha.9

（2）编写配置文件：

webpack.config.js加入如下语句：

const path = require('path');

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

//导出webpack配置对象

module.exports = {

//webpack入口文件，要自己创建，并将代码引入其中

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

output: {

//path必须用绝对地址：path.resolve()拼接两个路径

path: path.resolve(__dirname, 'dist'),

//webpack出口文件，会自动创建，不用自己创建

filename: 'bundle.js',

},

//插件

plugins: [new HtmlWebpackPlugin({

template:'./public/index.html'//webpack生成dist/index.html文件，要以template指定的路径下的html文件为模版

})],

};

// webpack基于node，所以导出遵守CommonJS规范

（3）运行npm run build即可自动以指定的htm文件wield模版生成可以直接运行处想要效果的页面

8.打包css文件

webpack默认只识别js文件，所以当引入css文件后打包会报错

那么，要想处理css文件，还需要加载器

文档:

css-loader:https://webpack.docschina.org/loaders/css-loader/

style-loader:https://webpack.docschina.org/loaders/style-loader/

（1）安装css-loader:

npm install --save-dev css-loader

安装style-loader:

npm install --save-dev style-loader

添加配置：

module.exports = {

//加载器

module: {

rules: [//规则数组

{//一个规则对象

test: /\.css$/i,//匹配.css文件，且忽略大小写

use: ["style-loader", "css-loader"],

//加载器会从右向左使用

//css.loader会识别.css文件，并将代码打包进js文件中

//style.loader负责把js里的样式代码插入到DOM中

},

};

（2）新建src/scc/index.css，编写去除li圆点样式的代码

li{

list-style:none;

}

（3）引入入口文件src/main.js中

import './css/index.css'

（4）执行打包命令

npm run build

（5）打开html文件

总结：

webpack如何支持css打包？

依赖css-loader和style-loader并配置

打包后样式代码在出口的js文件中

样式如何生效？
style-loader会把代码样式插入到head内style标签内

9.处理less文件

less-loader文档：https://webpack.docschina.org/loaders/less-loader/

（1）新建src/less/index.less，设置li字体大小

（2）把index.less引到入口文件内

import './less/index.less'

（3）下载加载器来处理less文件

安装less和less-loader

作用：less把less语法翻译成css

less-loader识别.less文件

npm install less less-loader--save-dev

（4）webpack.config.js针对less配置

module.exports = {

  module: {

    rules: [

      {

        test: /\.less$/i,

        use: [

          // compiles Less to CSS

          'style-loader',

          'css-loader',

          'less-loader',

        ],

      },

    ],

  },};

（5）打包

npm run build

10.处理图片文件

asset module（资源模块）技术：资源模块 | webpack 中文文档

（1）打包图片文件

1）css/index.less，小图片作为背景

body{

background:url('../assets/images/small.png') no-repeat center center;

}

2）src/main.js，大图片创建img插入到DOM

//小图：css背景（图片用的路径字符串）

//大图：js中，用import导入的方式

import imgObj from './assets/images/big.gif'

let theImg=document.createElement('img')

theImg.src=imgObj

document.body.appendChild(theImg)

3）webpack.config.js添加对图片的配置

module: {

rules: [         // ...省略其他

{ test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件             type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择

}

]

}

（2）图片处理区别

asset在导出一个data URL和发送一个单独文件之间自动选择。之前通过url-loader，并且配置资源体积限制实现

默认8kb以下图片, 转成base64字符串，打包进js中, 减少网络请求次数

超过8kb的图片, 直接复制到dist下并重命名, 转base64会增加30%体积

11.处理字体文件

asset module（资源模块）技术：资源模块 | webpack 中文文档

（1）src/main.js引入字体样式iconfont.css

import "./assets/fonts/iconfont.css"

（2）src/main.js创建i标签使用字体，插入DOM上

//创建i标签

let theI=document.createElement('i');

theI.className="iconfont icon-qq"

//追加到body标签

document.body.appendChild(theI)

（3）webpack.config.js配置规则

{     test: /\.(eot|svg|ttf|woff|woff2)$/,    type: 'asset/resource', // 当做静态资源直接复制文件

generator: {

   filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左

  }}

12.处理高版本js语法

babel：是一个JavaSript编译器，可以读取用户写的js代码，然后将其翻译输出成浏览器兼容的js代码

babel官网：Babel 中文文档 | Babel中文网 · Babel 中文文档 | Babel中文网

babel-loader文档：https://webpack.docschina.org/loaders/babel-loader/

（1）在src/main.js文件中定义箭头函数，并打印箭头函数变量（千万不能调用，因为打包时会因为该函数调用之后就没有用了而不将其打包）

//观察webpack是否降级js代码

let fn=()=>{

console.log(123)

};

//使用fn并不是加（）去调用fn，而是将fn的函数体打印出来，这样打包时才会把函数体留下来

console.log(fn)

（2）下载加载器

npm install -D babel-loader @babel/core @babel/preset-env

@babel/core：JS编译器，分析代码

@babel/preset-env：babel预设，降级规则

@babel-loader：让webpack翻译js代码

（3）配置到webpack.config.js上

module:{

rules:[

{

test: /\.m?js$/, // 匹配.mjs或.js结尾文件

exclude: /(node_modules|bower_components)/, // 排除node_modules第三方包里的js文件，不转换这2个文件夹里的js

use: {

loader: 'babel-loader', // 使用加载器-处理，允许webpack使用babel降级编译js代码

options: {

presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的规则)

}

}

}

],

}