站点介绍

只有了解事实才能获得真正的自由

webpack简介与打包

首页 / 正文

第 1 章：webpack 简介

视频地址：https://www.bilibili.com/video/BV1e7411j7T5

1.1 webpack 是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。

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

它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

1.2 webpack 五个核心概念

Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader

Loader 让 webpack 能够去处理那些非 JavaScript 文件 (webpack 自身只理解 JavaScript)

Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

Mode

模式(Mode)指示 webpack 使用相应模式的配置。

第 2 章：webpack 的初体验

2.1 初始化配置

1.初始化 package.json 输入指令

npm init

2.下载并安装 webpack

npm install webpack webpack-cli -g
npm install webpack webpack-cli -D

创建文件

运行指令

开发环境指令：

webpack src/js/index.js -o build/js/built.js --mode=development 
/* 
webpack会以 ./src/index.js 为入口文件开始打包，
打包后输出到 ./build/built.js 
*/

功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。

生产环境指令：

webpack src/js/index.js -o build/js/built.js --mode=production
/*
webpack会以 ./src/index.js 为入口文件开始打包，
打包后输出到 ./build/built.js
*/

功能：在开发配置功能上多一个功能，压缩代码。

结论
- webpack能处理js/json资源，不能处理css/img等其他资源
- 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~
- 生产环境比开发环境多一个压缩js代码。
问题
不能编译打包 css、img 等文件。不能将 js 的 es6 基本语法转化为 es5 以下语法。

第 3 章：webpack 开发环境的基本配置

3.1 创建配置文件

1、创建文件 webpack.config.js

2、配置内容如下

// node 内置核心模块，用来处理路径问题。
const { resolve } = require('path'); 
module.exports = {
    // 入口文件
    entry: './src/js/index.js',
    // 输出配置
    output: { 
        // 输出文件名
        filename: './built.js', 
         // 输出文件路径配置 __dirname当前文件目录绝对路径
        path: resolve(__dirname, 'build/js')
    },
    //开发环境
    mode: 'development' 
};

3、运行指令: webpack

4、结论: 此时功能与上节一致

3.2 打包样式资源

1、创建文件

2、下载安装 loader 包

npm i css-loader style-loader less-loader less -D

3、修改配置文件

/*
  webpack.config.js  webpack的配置文件
    作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）

    所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。
*/

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

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs的变量，代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader处理
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          // use数组中loader执行顺序：从右到左，从下到上 依次执行
          // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件
          // 需要下载 less-loader和less
          'less-loader'
        ]
      }
    ]
  },
  // plugins的配置
  plugins: [
    // 详细plugins的配置
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}

4、运行命令 webpack

3.3 打包 HTML 资源

1、创建文件

2、下载安装 plugin 包

npm install --save-dev html-webpack-plugin

3、修改配置文件

/*
  loader: 1. 下载   2. 使用（配置loader）
  plugins: 1. 下载  2. 引入  3. 使用
*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
    ]
  },
  plugins: [
    // plugins的配置
    // html-webpack-plugin
    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

不加template不会复制原有index.html的内容

new HtmlWebpackPlugin({
    // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
    template: './src/index.html'
})

3.4 打包图片资源

1、创建文件

2、下载安装 loader 包

注：url-loader依赖file-loader

npm install html-loader url-loader file-loader -D

3、修改配置文件 rules数组中添加：

{
    // 处理图片资源
    test: /\.(jpg|png|gif)$/,
    // 使用一个 loader
    loader: 'url-loader',
    options: {
        // 图片大小小于 8kb，就会被 base64 处理
        // 优点: 减少请求数量（减轻服务器压力）
        // 缺点：图片体积会更大（文件请求速度更慢）
        limit: 8 * 1024,
        // 问题：因为 url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs
        // 解析时会出问题：[object Module]
        // 解决：关闭 url-loader 的 es6 模块化，使用 commonjs 解析
        // 注：新版webpack已修复
        esModule: false,
        // 给图片进行重命名
        // [hash:10]取图片的 hash 的前 10 位
        // [ext]取文件原来扩展名
        name: '[hash:10].[ext]'
    }
}

4、运行

npx webpack

打包后（小于8kb图）

html引入的图片无法显示

html-loader：处理 html 文件的 img 图片（负责引入 img，从而能被 url-loader 进行处理）

rules数组追加：

{
    test: /\.html$/,
    loader: 'html-loader'
}

3.5 打包其他资源

处理过的资源加到exclude中去就可以

{
    // 排除css/js/html/less资源
    exclude: /\.(css|js|html|less)$/,
    loader: 'file-loader',
    options: {
        name: '[hash:10].[ext]'
    }
}

3.6 devserver

解决每次修改都要重新打包的问题

// 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
// 特点：只会在内存中编译打包，不会有任何输出
// 启动devServer指令为：npx webpack-dev-server
devServer: {
    // 项目构建后路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
}

3.7 开发环境配置（前面内容整合）

output的filename只决定入口文件目录

outputPath：输出目录，注意options配置顺序

/*
  开发环境配置：能让代码运行
    运行项目指令：
      webpack 会将打包结果输出出去
      npx webpack-dev-server 只会在内存中编译打包，没有输出
*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
};

日历

2025年09月

日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

修罗

站点介绍

webpack简介与打包

第 1 章：webpack 简介

1.1 webpack 是什么

1.2 webpack 五个核心概念

Entry

Output

Loader

Plugins

Mode

第 2 章：webpack 的初体验

2.1 初始化配置

第 3 章：webpack 开发环境的基本配置

3.1 创建配置文件

3.2 打包样式资源

3.3 打包 HTML 资源

3.4 打包图片资源

3.5 打包其他资源

3.6 devserver

3.7 开发环境配置（前面内容整合）

评论(0)

热门文章

最新评论

日历

标签云

文章目录

日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

修罗

站点介绍

webpack简介与打包

第 1 章：webpack 简介

1.1 webpack 是什么

1.2 webpack 五个核心概念

Entry

Output

Loader

Plugins

Mode

第 2 章：webpack 的初体验

2.1 初始化配置

第 3 章：webpack 开发环境的基本配置

3.1 创建配置文件

3.2 打包样式资源

3.3 打包 HTML 资源

3.4 打包图片资源

3.5 打包其他资源

3.6 devserver

3.7 开发环境配置 （前面内容整合）

评论(0)

热门文章

最新评论

日历

标签云

文章目录

3.7 开发环境配置（前面内容整合）

日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30