webpack初识

刘小芒zZ
102 阅读3分钟

webpack到底是什么？

webpack is a static module bundler for modern JavaScript

  • webpack是一个为现代JavaScript应用工作的静态模块化打包工具
  • 打包bundler：webpack可以帮助打包，它是一个打包工具
  • 静态的static：代码最终打包成静态资源
  • 模块化module：webpack默认支持各种模块化，ES Module、CommonJS、AMD等
  • 现代的modern：现代前端开发面临诸多问题，催生了webpack的发展

做什么？

  • JavaScript的打包

    • ES6转ES5
    • TypeScript转化成JavaScript

  • CSS处理

    • CSS文件模块的加载、提取
    • Less、Sass等预处理器的转化

  • 资源文件img、font

    • 图片img文件的加载
    • 字体font文件的加载

  • HTML处理

    • 打包HTML资源文件

等等，将各种文件打包转换成浏览器能够识别文件或代码

如何使用

(gitee.com/szCodeMan/d…) 示例：01_webpack使用

全局webpack打包

  • 将文件创建成功后，在index.html直接引入并不能生效
  • 全局使用webpack，文件夹打开终端输入webpack执行，导入dist文件下的main.js文件，成功输出￥30

局部webpack打包

  • 局部使用webpack，在文件夹打开终端输入 npm init -y 初始化node
  • 下载对应版本的webpack：npm i webpack webpack-cli -D
  • 在package.json文件下添脚本："build": "webpack"
  • 删除之前全局webpack生成的dist文件夹，在终端执行 npm run build进行局部的webpack打包,能看到同样生成了一个dist文件夹

指定入口文件和出口文件

在 webpack.config.js配置文件中进行配置; 注意：打包只会打包引入了的文件，没有引用的并不会打包

const path = require("path")

module.exports = {
  // 入口
  entry: "./src/main.js",
  output: {
    // 绝对路径
    // path: "D:\/codeArea\/demo\/daily-demo\/webpack\/01_basic_webpack"
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js"
  }
}

CSS解析

webpack默认支持js代码，但是css代码不知道如何加载；需要引入css-loader才能够打包解析。（开发环境 -D ）

  • 终端执行： npm i css-loader -D

loader配置方式：

  • 内联方式： import "css-loader!../css/style.css"
  • webpack.config.js文件配置 
      module: {
  rules: [
    {
      test: /\.css$/, // 正则表达式: 匹配css结尾
      // 语法糖解决
      //loader: "css-loader", // 指定css-loader
      // 完整写法
      use: ["css-loader"],
    },
  ],
},

但是在这些操作结束后，并不会在页面生效css样式；因为css-loader只负责解析，并不会将css插入到index.html中 这时需要 样式解析 style-loader
npm i style-loader -D 配置中将 style-loader写在css-loader前，因为loader的加载顺序是从尾部开始。 use: ["style-loader", "css-loader"],

现在能够成功看到style.css中的样式生效，显示的hello world是红色的

解析器-less-loader

npx 指令是在node包目录下的bin文件夹中寻找对应的插件 执行命令 npx lessc ./src/css/title.less ./src/css/title.css 能够指定loader命令 解析 目的src的less文件 到指定的文件夹下css文件

其他解析器可以到官网进行查看配置

官网地址

webpack5--资源模块类型（asset module type）

通过添加 4 种新的模块类型，来替换loader

  • asset/resource: 发送一个单独的文件并导出URL，之前使用file-loader实现
  • asset/inline: 导出一个资源的dataURL，之前使用url-loader实现
  • asset/source导出资源的源代码，之前使用raw-loader实现
  • asset 在导出一个dataURL和发送一个单独的文件之间自动选择，之前使用url-loader并配置对应的资源体积限制实现

Plugin插件

插件就是一个类 HtmlWebpackPlugin

npm i html-webpack-plugin -D

在webpack.config.js文件中

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

module.export= {
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

执行命令npm run build,在build文件夹下能够看到index.html

DefinePlugin默认值：是webpack内拥有的插件

avatar
文章
阅读
粉丝