webpack入门

用户042882521037
42 阅读3分钟

一、什么是webpack

Webpack是一个前端模块打包工具。它可以将多个模块按照依赖关系进行静态分析，并生成一个或多个打包后的文件。

二、webpack功能

1.模块打包

将项目中的所有模块（JavaScript、CSS、图片等）当作一个整体，通过依赖关系将它们打包成一个或多个静态资源文件。

2.依赖管理

Webpack可以分析模块之间的依赖关系，根据配置的入口文件找出所有依赖的模块，并将其整合到打包结果中。

3.文件转换

Webpack本身只能处理JavaScript模块，但通过加载器（Loader）的使用，可以将其他类型的文件（如CSS、LESS、图片等）转换为有效的模块，使其能够被打包到最终的结果中。

4.代码拆分

Webpack支持将代码拆分成多个模块，按需加载，实现按需加载和提升应用性能。

5.插件系统

Webpack提供了丰富的插件系统，可以通过插件实现各种功能的扩展，例如压缩代码、自动生成HTML文件等。

二、webpack核心概念

  1. Entry（入口）：Webpack将从指定的入口文件开始分析和构建依赖关系树。入口可以是单个文件或多个文件，Webpack会根据入口配置找出所有的依赖模块。
  2. Output（输出）：指定Webpack打包后的文件输出的路径和文件名。可以通过配置output选项来指定输出文件的路径、名称和格式等。
  3. Loader（加载器）：Webpack本身只能处理JavaScript模块，但通过Loader的使用，可以处理其他类型的文件（如CSS、LESS、图片等）。Loader的作用是在模块加载时对其进行转换和处理。
  4. Plugin（插件）：插件用于扩展Webpack的功能。它可以在打包的不同阶段执行特定的任务。例如，可以使用插件来压缩代码、拆分代码、生成HTML文件等。插件通过在Webpack配置中引入并实例化，然后将其添加到plugins数组中。

三、webpack修改入口、出口

  1. 项目根目录，新建 Webpack.config.js 配置文件

  2. 导出配置对象，配置入口、出口文件路径

     const path = require('path')
 module.exports = {
   entry: path.resolve(__dirname, 'src/login/index.js'),
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: './login/index.js'  
   }
 }

3.重新打包

npm run build

四、webpack自动生成html文件

  1. 下载 html-webpack-plugin 本地软件包到项目中

    npm i html-webpack-plugin --save-dev

  2. 配置 webpack.config.js 让 Webpack 拥有插件功能

     const HtmlWebpackPlugin = require('html-webpack-plugin')
 module.exports = {
   plugins: [
     new HtmlWebpackPlugin({
       template: './public/login.html', // 模板文件
       filename: './login/index.html' // 输出文件
     })
   ]
 }

  3. 指定以 public/login.html 为模板复制到 dist/login/index.html，并自动引入其他打包后资源

  4. 运行打包命令，观察打包后 dist 文件夹下内容并运行查看效果

五、webpack打包css代码

1.准备

  1. 加载器：让 Webpack 识别更多的代码内容类型 Webpack 默认只识别 JS 和 JSON 文件内容，所以想要让 Webpack 识别更多不同内容，需要使用加载器。也就是说，如果想要在打包的时候顺利打包css代码，就需要在webpack中引入css相关的加载器
  2. 打包 css 代码所需的两个加载器
  • 加载器 css-loader用来解析 css 代码
  • 加载器 style-loader用来把解析后的 css 代码插入到 DOM（style 标签之间）

2.实现

  1. 准备 css 文件引入到 src/login/index.js 中

     import 'bootstrap/dist/css/bootstrap.min.css'
 import './index.css'

  2. 下载 css-loader 和 style-loader 本地软件包

     npm i css-loader style-loader --save-dev

  3. 配置 webpack.config.js 让 Webpack 拥有该加载器功能

     module.exports = {
   module: {
     rules: [ 
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'], 
       }
     ]
   }
 };

  4. 打包后运行 dist/login/index.html 观察效果，看看准备好的样式是否作用在网页上

3。优化提取 css 代码

  1. 下载 mini-css-extract-plugin 插件软件包到本地项目中

     npm i --save-dev mini-css-extract-plugin

  2. 配置 webpack.config.js 让 Webpack 拥有该插件功能

     const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 module.exports = {
   
   module: {
     rules: [
       {
         test: /\.css$/i,
         // use: ['style-loader', 'css-loader']
         use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
     ],
   },
   plugins: [
     new MiniCssExtractPlugin()
   ]
 };

  3. 打包后观察效果,这样做使得css 文件可以被浏览器缓存，减少 JS 文件体积，让浏览器并行下载 css 和 js 文件

avatar
文章
阅读
粉丝