带你轻车熟路走向webpack基本配置~

superTiger_y

已于 2022-03-11 18:24:40 修改

阅读量989

点赞数 1

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

于 2022-03-11 14:50:17 首次发布

本文链接：https://blog.csdn.net/weixin_41718879/article/details/123407415

版权

notes 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1. webpcak是什么

webpack是一种前端资源构建工具,一个静态模块打包器,webpack本身只能处理js和json文件;

在webpack看来,前端所有资源文件(js/json/css/less/img/font/...)都会作为模块处理

1.1 webpcak能干什么

帮助开发者在本地搭建一个服务，代码变动热更新及不刷新页面，全局注入依赖文件，代码分割，代码提取，去除不必要的代码，区分环境变量，图片优化,转换其他浏览器不认识的拓展语言等，社区强大的插件扩展，使开发者只用关注源代码编写.

2. webpack 初体验

先准备一个空文件夹
用编辑器 / vsCode打开文件夹
初始化项目

npm init

初始化package.json文件可以一直回车,使用默认配置

初始化完成之后就会在文件夹下面生成一个package.json文件

这个package.json是帮助我们用来一般记录了项目的配置信息，包括名称、版本等信息，也会记录所需的各种模块，包括执行依赖，和开发依赖，版本等信息。

下面我们继续做准备工作：

新建文件夹 src 用来放源代码
在src目录下新建一个index.js 作为入口文件
局部安装webpack webpack-cli包

全局安装命令: npm i webpack webpack-cli

局部安装命令: npm i webpack webpack-cli -D

安装完成之后,就可以体验webpack了

在index.js中编写一个高大上的函数
运行打包命令

function sum(x, y) {
  return x + y
}
console.log(sum(1, 2))

开发环境命令：webpack ./src/index.js -o ./build --mode=development

生产环境命令： webpack ./src/index.js -o ./build --mode=production

这里命令大概意思是以./src/index.js 为入口打包，打包后的文件输出为build目录下，--mode是采用哪种方式打包

ps: 如果运行命令出现错误:

可以这样修改下package.json文件中的scripts，如下：

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack ./src/index.js -o ./build --mode=development",
    "dev:pro": "webpack ./src/index.js -o ./build --mode=production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  }
}

在终端中运行npm run dev就会采用开发环境模式打包；运行npm run dev:pro 就会采用生产环境模式打包

使用npm run dev打包:

如图所示我们就打包成功了

2.1 验证打包结果

在src下新建index.html
引入打包后的js
浏览器打开index.html
查看结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    // 手动引入打包后的js
    <script src="./../build//main.js"></script>
</body>

</html>

打开浏览器查看

函数输出结果3 就成功了

3. webpack 之5大核心

准备工作：

在根目录下新建文件webpack.config.js
文件内容为 common.js导出一个默认对象

项目结构

|- /node_modules
|- /src
   |- index.js
   |- examples.js
   |- index.html
|- webpack.config.js
|- package.json

五大核心分别为:

指定入口文件：　entry
指定输出目录：　output
配置loader：module
配置插件：plugins
打包模式：mode

webpack.config.js：

module.exports = {
  // 1:配置单入口文件
  entry: '',

  // 2:输出
  output: {},

  // 3:loader配置
  module: {
    rules: [
      // 详细loader配置
    ],
  },

  // 4:插件配置
  plugins: [],

  // 5:打包模式
  mode: 'development',
}

3.1 核心一：entry

entry 配置打包的入口文件,配置有多种形式

# 单入口

module.exports = {
  // 配置单入口文件
  entry: './src/index.js',
}

# 多入口

module.exports = {
  // 配置多入口
  entry: {
    index: './src/index.js',
    example: './src/examples.js',
  },
}

# 数组入口

module.exports = {
  // 配置数组入口
  entry: ['./src/index.js', './src/examples.js'],
}

tips:上面例子中除了最后一个参数，将其它数组参数都导入到最后一个参数文件内

3.2 核心二：output

output 配置资源打包后的输出路径等信息

// resolve用来拼接绝对路径
const { resolve } = require('path')

module.exports = {
  // 配置单入口文件
  entry: './src/index.js',

  // 输出
  output: {
    // 打包后的文件名
    filename: 'built.js',
    // 输出路径  绝对路径
    // __dirname是nodejs的变量,代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build'),
  },
}

在终端运行命令:

npm run dev

打包就成功了

3.3 核心三：loader

loader用于将不同类型的文件转换为 webpack 可识别的模块,不同loader的作用不一样,针对性很强

loader工作原理

webpack 只能直接处理 javascript 格式的代码。任何非 js 文件都必须被预先处理转换为 js 代码，才可以参与打包。loader就是这样一个代码转换器。它由 webpack 的 `loader runner` 执行调用，接收原始资源数据作为参数（当多个加载器联合使用时，上一个loader的结果会传入下一个loader），最终输出 javascript 代码给 webpack 做进一步编译。

3.3.1 使用loader打包css文件

准备工作：

准备一个样式文件index.css
在入口文件中引入样式文件index.css
在webpack.config.js中配置loader
使用npm下载loader

css文件如下:

webpack.config.js

// resolve用来拼接绝对路径
const { resolve } = require('path')

module.exports = {
  // 配置单入口文件
  entry: './src/index.js',

  // 输出
  output: {
    // 打包后的文件名
    filename: 'built.js',
    // 输出路径  绝对路径
    // __dirname是nodejs的变量,代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build'),
  },
  // loader配置
  module: {
    rules: [
      {
        // 匹配.css文件结尾的文件
        test: /\.css$/,
        // 使用哪些loader处理
        // use中的执行顺序: 从右到左,从下到上依次执行
        use: [
          // 创建style标签,将js中的样式资源插入,添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载在js中,内容是样式字符串
          'css-loader',
        ],
      },
    ],
  },
  // 插件配置
  plugins: [],
  // 模式
  mode: '',
}

test: 正则表达式，配置webpack需要检测的文件后缀

use: 配置需要处理的loader

css-loader：将css文件变成commonjs模块加载到js文件中

style-loader：创建style标签,插入css-loader的处理后结果,添加到head标签中生效

下载css-loader style-loader

npm i css-loader style-loader

下载完成之后,终端运行命令

npm run dev

打包成功之后,built.js和index.html 分别如下图

built.js中引入了index.css文件

然后用浏览器打开index.html

说明css文件就打包成功了

3.3.2 使用loader处理less文件

Tips:不同文件必须配置不同loader,所以必须和css文件配置必须分开

准备工作：

在src目录下创建index.less文件
在入口文件引入index.less
配置loader
下载loader

由于webpack.config.js内容过多,这里就只展示了loader的配置：



module.exports = {
   // 其他配置

  // loader配置
  module: {
    // 不同资源必须配置不同loader处理
    rules: [
      {
        // 匹配.css文件结尾的文件
        test: /\.css$/,
        // 使用哪些loader处理
        // use中的执行顺序: 从右到左,从下到上依次执行
        use: [
          // 创建style标签,将js中的样式资源插入,添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载在js中,内容是样式字符串
          'css-loader',
        ],
      },
      {
        // 匹配.less文件结尾的文件
        test: /\.less$/,
        // 使用哪些loader处理
        // use中的执行顺序: 从右到左,从下到上依次执行
        use: [
          // 创建style标签,将js中的样式资源插入,添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载在js中,内容是样式字符串
          'css-loader',
          // 将less文件编译成css文件  需要下载less-loader 和 less
          'less-loader',
        ],
      },
    ],
  },
  // 插件配置
  plugins: [],
  // 模式
  mode: '',
}

下载less-loader和less

npm i less-loader less

下载完成之后运行命令打包

npm run dev

打开built.js

再打开index.html

说明less文件也处理成功了

3.3.3 使用loader处理图片文件

准备工作：

准备一个新的index.html文件,并填充测试内容
准备一个新的less文件,并填充样式
准备一张图片
在入口文件引入样式文件

|- /node_modules
|- /src
   |- index.js
   |- index.less
   |- index.html
   |- webfont.png 
|- webpack.config.js
|- package.json

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box1"></div>
</body>

</html>

index.less

#box1 {
  width: 100px;
  height: 100px;
  background-image: url('./webfont.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

index.js

import './index.less'

function sum(x, y) {
  return x + y
}
console.log(sum(1, 2))

webpack.config.js

注意: webpack5.0 以上不用配置loader,默认就可以处理图片资源, 像url-loader，file-loder都是废弃不会直接使用的如果想要使用这些废弃的旧功能，加上type: 'javascript/auto'

注意：图片有两种引入方式,一种是css引入,一种是在html文件中引入这两种处理方式不一样

注意：webapck5.0及以上这样配置处理图片资源是会报错, webpack4.x才能运行成功

// resolve用来拼接绝对路径
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 配置单入口文件
  entry: './src/index.js',

  // 输出
  output: {
    // 打包后的文件名
    filename: 'built.js',
    // 输出路径  绝对路径
    // __dirname是nodejs的变量,代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build'),
  },
  // loader配置
  module: {
    // 不同资源必须配置不同loader处理
    rules: [
      // 处理less文件
      {
        // 匹配.less文件结尾的文件
        test: /\.less$/,
        // 使用哪些loader处理
        // use中的执行顺序: 从右到左,从下到上依次执行
        use: [
          // 创建style标签,将js中的样式资源插入,添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载在js中,内容是样式字符串
          'css-loader',
          // 将less文件转换成css文件  需要下载less-loader 和 less
          'less-loader',
        ],
      },
      // 注意: webpack5.0 以上不用配置loader,默认就可以处理图片资源
      //       像url-loader，file-loder都是废弃不会直接使用的
      //       如果想要使用这些废弃的旧功能，加上type: 'javascript/auto'
      // 处理图片资源的loader  这里只能处理css文件的图片 处理不了html中img标签的图片
      {
        // 匹配
        test: /\.(jgp|png|gif)$/,
        // 要加载url-loader和file-loader
        use: [
          {
            loader: 'url-loader',
            options: {
              // 图片大小小于8kb,就会被base64输出为字符串
              // 优点: 减少请求数量 减轻服务器压力
              // 缺点: 图片体积更大 文件请求速度更慢
              limit: 8 * 1024,
              // 打包后图片的名字规则生成
              name: '[name].[hash:16][ext]',
              // 问题: 因为url-loader默认使用es6模块解析,而html-loader引入图片是common.js
              // 解析时会出问题 [object Module]
              // 解决: 关闭url-loader的es6模块话,使用commonjs解析
              esModule: false,
            },
          },
        ],
        type: 'javascript/auto',
        // 关闭esModule
        esModule: false,
      },
      // 处理html中img标签引入的图片
      // 负责引入img,从而能被url-loader进行处理
      { test: /.\html$/, loader: 'html-loader' },
    ],
  },
  // 插件配置
  plugins: [
    // 处理html文件
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  // 模式
  mode: 'development',
}

打开index.html 就能看到图片了

3.3.4 使用loader其他资源

打包其他资源比较简单,使用file-loader原样输出

webpack.config.js

// resolve用来拼接绝对路径
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 配置单入口文件
  entry: './src/index.js',

  // 输出
  output: {
    // 打包后的文件名
    filename: 'built.js',
    // 输出路径  绝对路径
    // __dirname是nodejs的变量,代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build'),
  },
  // loader配置
  module: {
    // 不同资源必须配置不同loader处理
    rules: [
      // 打包其他资源(除了htmk/js/css资源意外的资源)
      {
        // 排除css js html资源
        exclude: /\.(css|js|html)/,
        loader: 'file-loader',
      },
    ],
  },
  // 插件配置
  plugins: [
    // 处理html文件
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  // 模式
  mode: 'development',
}

3.4 核心四 plugin

Plugin 是一个扩展器：赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决 loader 无法实现的其他事

3.4.1 使用plugin处理html文件

准备工作：

准备一个新的html文件 index.html
准备一个新的js文件 index.js
配置webpack.config.js
下载插件
引入并使用插件

下载插件：

npm i html-webpack-plugin

配置webpack.config.js

// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 配置单入口文件
  entry: './src/index.js',

  // 输出
  output: {
    // 打包后的文件名
    filename: 'built.js',
    // 输出路径  绝对路径
    // __dirname是nodejs的变量,代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build'),
  },
  // loader配置
  module: {},
  // 插件配置
  plugins: [
    // 处理html文件
    new HtmlWebpackPlugin({
      template: './src/index.html', // 以src/index.html为模板复制一份 并自动引入打包后的js文件
    }),
  ],
  // 模式
  mode: '',
}

运行打包命令：

npm run dev

打包后的文件夹多出来一个html文件,并自动引入了js文件

自此,html文件也能被webpack处理了

3.5 核心五 mode

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

官方文档也并没有给出具体的区别https://www.webpackjs.com/concepts/mode/#mode-development

这个是官网给出的配置

mode: development

module.exports = {
+ mode: 'development'
- plugins: [
    // 在热加载时直接返回更新文件名
-   new webpack.NamedModulesPlugin(),
    // Webpack注入全局变量的插件
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}

mode: production

// webpack.production.config.js
module.exports = {
+  mode: 'production',
-  plugins: [
     // 压缩js文件
-    new UglifyJsPlugin(/* ... */), 
     // Webpack注入全局变量的插件
-    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
     // 插件仅适用于由webpack直接处理的ES6模块   
-    new webpack.optimize.ModuleConcatenationPlugin(),
     // 在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段
-    new webpack.NoEmitOnErrorsPlugin()
-  ]
}

都采用默认配置的情况下,生产模式的打包会默认多注册几个插件.

至此：webpack 5大核心内容基本配置都测试完了