webpack的基本介绍与使用

webpack基本介绍及其基础案例

概念

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

基础案例

接下里我将展示一个最基础的案例。

直接运行

首先我们新建一个项目，然后在项目中进行一些基本的操作，然后在文件中引入，看看浏览器能否识别。

utils>count.js 用于定义一个基本的相加函数并返回结果。

pages>index.js 用es6语法引入函数，使用并打印出来。

public>index.htmi 入口文件，用于引入并运行js脚本。

这时候直接运行，浏览器就会报错。因为浏览器识别不了es6语法，因此webpack就派上用场了。

使用webpack打包后运行

初始化项目

 npm init -y

安装webpack依赖

npm install --save-dev webpack webpack-cli

配置webpack文件

在根目录下创建webpack.config.js文件。并填写一些基本的信息。

这里这些配置的信息我先不做过多解释，后面的内容我会对其进行详细解析。

const path = require('path');

module.exports = {
  entry: './pages/index.js', // 指定入口文件
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') // 输出文件的目录
  }
};

运行webpack

npx webpack

重新运行项目

将打包后的文件地址引入到该文件中。

 可以看到这时候浏览器就已经能够正常的输出打印信息了，这也标志着webpack使用的成功。

webpack五大核心概念及其应用

五大核心概念

Entry（入口）：指示 webpack 应该使用哪个模块作为构建其内部依赖图的开始。（从那个文件开始打包）

Output（输出）：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。（输出到哪里如何命名）

Loaders（加载器）：让 webpack 处理那些非 JavaScript 文件（如 CSS、图片、TypeScript 等）。

Plugins（插件）：用于执行范围更广的任务。插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量。（拓展功能）

Mode（模式）：指示 webpack 使用相应模式的内置优化（development开发模式, production生产模式）

Loaders概念应用

编写基本配置文件

这里有两个点需要注意的点：

1. entry是相对路径
2. output.path是绝对路径，使用的是node.js中的path语法专门用来处理路径问题。

const path = require('path');

module.exports = {
  // 入口
  entry: './pages/index.js', //相对路径

  // 输出
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') //绝对路径
  },

  // 加载器
  module: {
    rules: []
  }

  // 插件
  plugins:[],
  
  // 模式
  mode: 'development',

};

处理css文件

下载loader

webpack本身不能够处理css文件，所以我们需要通过loader来帮助webpack解析样式资源。

npm i css-loader style-loader -D

css-loader: 负责将 Css 文件编译成 Webpack 能识别的模块.

style-loader: 会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容。

使用loader

创建一个项目，目录如下，并新建一个css文件。

并在入口文件中引入。

在index