webpack基础教程

最新推荐文章于 2024-03-14 23:10:33 发布

idiot_MAN

最新推荐文章于 2024-03-14 23:10:33 发布

阅读量714

点赞数

分类专栏：前端文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/idiot_MAN/article/details/126843471

版权

前端专栏收录该内容

67 篇文章 2 订阅

订阅专栏

webpack

文章目录

webpack

https://webpack.docschina.org/

webpack 是node的第三方模块包，用于打包代码

webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）

把很多文件打包整合到一起，缩小项目体积，提高加载速度

功能：

less/sass ------> css

ES6/7/8 -------->ES5

html/css/js------>压缩合并

基础使用

默认的入口文件 ./src/index.js 默认出口文件 ./dist/main.js

初始化包环境
```
yarn init
```
安装依赖包
```
yarn add webpack webpack-cli -D
```
package.json配置scripts(自定义命令)
```
"scripts": {
    "build": "webpack"
},
```
项目目录下新建 src/add/index.js
```
export const addFn = (a, b) => a + b
```

项目目录下新建 src/index.js

import { addFn } from './add'
console.log(addFn(4, 5))

项目目录下打开命令窗口，运行打包命令
```
yarn build
or
npm run build
```
**总结：**打包命令执行后，在项目目录下生成默认的dist目录和打包后默认的main.js文件

代码变更，重新打包

新建src/tool/index.js

  export const getArrSum = (arr) =>
    arr.reducw((sum, val) => {
      sum += val
    }, 0)

更改src/index.js代码

  import { addFn } from './add'
  import { getArrSum } from './tool'
  console.log(addFn(4, 5))
  console.log(getArrSum([1, 2, 3, 4]))
  console.log(addFn(5, 6))

运行打包命令

  yarn build

**总结：**打包后，代码压缩，变量压缩

webpack配置

如何指定webpack的入口和出口

项目目录下，新建webpack.config.js
填写配置项

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.js',
  },
}

打包隔行变色项目

前面的步骤
下载jquery，项目目录下新建public/index.html

src/main.js

import { addFn } from './add'
import { getArrSum } from './tool'
import $ from 'jquery'
console.log(addFn(4, 5))
console.log(getArrSum([1, 2, 3, 4]))
console.log(addFn(5, 6))
$(function () {
  $('#app li:nth-child(odd)').css('color', 'red')
  $('#app li:nth-child(even)').css('color', 'blue')
})

执行打包命令
把public以及他的html文件复制到dist目录下
在index.html文件中手动引入打包后的build.js

自动生成html文件

webpack只能打包js文件，插件HtmlWebpackPlugin 简化了 HTML 文件的创建

该插件将为你生成一个 HTML5 文件，在 body 中使用 script 标签引入你所有 webpack 生成的 bundle

安装

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

webpack.config.js中配置

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

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.js',
  },
  plugins: [new HtmlWebpackPlugin()],
}

打包后，dist目录下就多了html文件，还自动把打包的bundle.js文件通过script引入

处理css文件–加载器

webpack 默认只认识js文件和json文件

src/css/index.css给body添加背景颜色
把css文件引入到入口文件被webpack打包
loader加载器，让webpack处理其他类型的文件，打包到js中

下载

npm install --save-dev style-loader css-loader

webpack配置

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

module.exports = {
entry: './src/main.js',
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'build.js',
},
plugins: [new HtmlWebpackPlugin()],
module: {
  rules: [
    //loader的规则
    {
      test: /\.css$/i, //匹配所有的css文件
      // use数组中从右往左运行
      // 先用css-loader让webpack识别css文件的内容打包
      // style-loader 把css插入到dom中
      use: ['style-loader', 'css-loader'],
    },
  ],
},
}

处理less文件

安装

npm install less less-loader --save-dev

webpac配置

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

module.exports = {
entry: './src/main.js',
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'build.js',
},
plugins: [new HtmlWebpackPlugin({
    // 以此为标准 生成打包后的html文件
    template: './public/index.html',
  })],
module: {
  rules: [
    //loader的规则
    {
      test: /\.css$/i, //匹配所有的css文件
      // use数组中从右往左运行
      // 先用css-loader让webpack识别css文件的内容打包
      // style-loader 把css插入到dom中
      use: ['style-loader', 'css-loader'],
    },
    {
      test: /\.less$/i, //匹配所有的less文件
      use: [
        // 从右往左运行
        // compiles Less to CSS
        // less-loader让webpack处理less文件，会用less翻译less代码转换成css代码
        'style-loader',
        'css-loader',
        'less-loader',
      ],
    },
  ],
},
}

src目录下新建less/index.less

入口main.js中引入less文件

打包

从yarn build开始，都走了哪些流程

执行webpack命令，找到配置文件，入口和依赖关系，打包代码输出到指定位置

请添加图片描述

处理图片文件

webpack无法自己处理图片文件

webpack5使用asset module技术来实现字体文件和图片文件的处理，无需配置额外的loader

https://webpack.docschina.org/guides/asset-modules/

1：webpack5.在rules里，针对图片文件设置type:asset

2:小于8kb转base64字符串进js里，大于8kb直接输出文件

在src/assets准备图片文件
在less/aa.less文件中对body设置背景图片
在入口导入图片文件，设置到img标签插入到body
打包

module:{
    rules:[
           {
        // 图片文件的配置  (仅适用于webpack5版本)
        test: /\.(gif|png|jpg|jpeg)/,
        type: 'asset', //匹配上面的文件后，webpack会把他们当静态资源处理打包
        // 如果你设置的asset模式  以8kb来区分图片文件
        // 小于8kb的 把图片文件转base64，打包到js中
        // 大于8kb的，直接把图片文件输出到dist下
      },
    ]
}

为什么8kb上下的图片要区分呢

图片翻译成base64打包到js文件中

好处：浏览器不用法请求了，直接可以读取，速度快

坏处：图片太大，再转base64就会让图片的体积增大30%左右，得不偿失

处理字体图标

src/assets中放入fonts字体相关的文件夹
src/main.js引入assets/font/iconfont.css
src/main.js创建一个i标签，把字体图标标签添加到body上
添加针对字体文件的加载器规则，使用asset/resource （直接输出文件并配置路径）

打包

module:{
  rules:[
       {
      test: /\.(ttf|eot|svg|woff|woff2)/,
      type: 'asset/resource',
      generator: {
        // 生成文件的文字  定义规则
        filename: 'fonts/[name].[hash:6][ext]', //[ext] 会替换成.eot/.woff
      },
    },
  ]
}

webpack对js语法降级

babel https://www.babeljs.cn/

babel-loader https://v4.webpack.js.org/loaders/babel-loader/

babel一个JavaScript编译器，把高版本js语法降级处理输出兼容的低版本语法

babel-loader 让webpack编译打包js代码

步骤：

src/main.js 定义箭头函数，打印箭头函数变量（不要调用，为了让webpack打包函数，看降级效果）

下载加载器

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

webpack配置
打包

 {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, //不去匹配这些文件夹下的文件
        use: {
          loader: 'babel-loader', //使用这个loader处理js文件
          options: {
            //加载器选项
            presets: ['@babel/preset-env'], // @babel/preset-env 降级规则  按照这里的规则降级我们的js语法
          },
        },
      },

webpack开发服务器

问题：每次修改完代码，重新yarn build打包，才能看到最新效果，实际工作中，打包yarn build非常耗时

为什么：

从0构建依赖
磁盘读取对应的文件到内存，webpack开始加载
再用对应的loader进行处理
将处理完的内容，输出到磁盘指定目录

解决：

起一个开发服务器，缓存一些已经打包过的内容，只重新打包修改的文件，最终运行在内存中给浏览器使用

打包在内存中，速度快

自动更新打包变化的代码，实时返回给浏览器显示

使用

webpack-dev-server

https://webpack.docschina.org/api/webpack-dev-server/#root

下载

npm install --save-dev webpack-dev-server

自定义webpack开发服务器启动命令serve 在package.json里

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

启动服务器
```
yarn serve
```
webpack-dev-server 会给我们一个地址+端口号，浏览器中访问就可以看到打包的index.html页面

修改端口号

webpack.config.js中修改端口号，重新启动项目

module.exports = {
 mode: 'development', 
  devServer: {
    port: 3000,
  },
 }

idiot_MAN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack基础教程

webpack 是node的第三方模块包，用于打包代码webpack是一个现代JavaScript应用程序的功能：html/css/js------>压缩合并。
复制链接

扫一扫

专栏目录

webpack基础教程

webpack

文章目录

基础使用

webpack配置

打包隔行变色项目

自动生成html文件

处理css文件–加载器

处理less文件

从yarn build开始，都走了哪些流程

处理图片文件

为什么8kb上下的图片要区分呢

处理字体图标

webpack对js语法降级

webpack开发服务器

使用

修改端口号

“相关推荐”对你有帮助么？