webpack学习笔记

前言

相信很多前端小伙伴都有听说过webpack这个项目前端开发与构建工具，比如我们很熟悉的脚手架v-cli就是用webpack来构建的，当然现在还有其他构建工具，例如尤大大推荐的vite等等。以下为笔者关于webpack的学习笔记。

正文

首先我们需要了解四个概念，它们分别是入口、出口、loader和插件。

入口（entry）

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

module.exports = {
  entry: './path/to/my/entry/file.js'//入口文件
};

出口（output）

output 属性告诉 webpack 在哪里输出它所创建的打包文件，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

//导入node的path模块
const path = require('path');
module.exports = {
  //入口配置
  entry: './path/to/my/entry/file.js',
  //出口配置
  output: {
    path: path.resolve(__dirname, 'dist'),//输出路径：当前文件的绝对路径+dist
    filename: 'my-first-webpack.bundle.js'//输出文件名
  }
}

loader

由于webpack本身只支持识别js、json文件，我们需要用到loader去处理非JavaScript文件，loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

loader的配置有两个属性：一个是test、一个是use

test 属性，用于标识出需要进行转换的某个或某些文件。

use 属性，表示进行转换时，应该使用哪个 loader

以处理css文件为例：

const path = require('path');
module.exports = {
  //入口配置
  entry: './path/to/my/entry/file.js',
  //出口配置
  output: {
    path: path.resolve(__dirname, 'dist'),//输出路径：当前文件的绝对路径+dist
    filename: 'my-first-webpack.bundle.js'//输出文件名
  },
module: {
    //对某个格式的文件进行转换处理
    rules: [
      { 
      //匹配以.css为后缀名的文件
      test: /.css$/,
      use:[
       //将js的样式内容插入到style标签里面
      'style-loader',
      //将css文件转换为js
      'css-loader'
      ]
      }
    ]
  }
  
}

插件（plugins）

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

//使用这个插件可以处理html文件
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const path = require('path');
module.exports = {
  //入口配置
  entry: './path/to/my/entry/file.js',
  //出口配置
  output: {
    path: path.resolve(__dirname, 'dist'),//输出路径：当前文件的绝对路径+dist
    filename: 'my-first-webpack.bundle.js'//输出文件名
  },
module: {
    //对某个格式的文件进行转换处理
    rules: [
      { 
      //匹配以.css为后缀名的文件
      test: /.css$/,
      use:[
       //将js的样式内容插入到style标签里面
      'style-loader',
      //将css文件转换为js
      'css-loader'
      ]
      }
    ]
  },
plugins: [
    new HtmlWebpackPlugin({
    //要处理的html文件
    template: './src/index.html'
    })
  ]
}

其余部分

其余部分比如webpack的模式，webpack有两种模式，一种是生产模式production，另一种是开发模式development，其实这两种模式的主要区别是有没有压缩代码积极，有没有代码注释。

module.exports = {
  mode: 'production'//生产模式
};

实战 v-cli

经过上面的学习相信大家已经对webpack有了一定的认识，接下来我们来尝试一下从零搭建一个 v-cli

参考文档