Webpack详细教程

最新推荐文章于 2024-02-13 14:07:15 发布
最新推荐文章于 2024-02-13 14:07:15 发布
阅读量1.3k 收藏 32
点赞数 2
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42453562/article/details/119896165
版权

webpack教程

第 1 章：webpack 简介

1.1 webpack 是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

1.2 webpack 五个核心概念

1.2.1 Entry 入口(Entry)

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

1.2.2 Output 输出(Output)

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

1.2.3 Loader

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

1.2.4 Plugins

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

1.2.5 Mode

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

选项描述特点
development会将 DefinePlugin 中 process.env.NODE_ENV 的值设置 为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。能让代码本地调试 运行的环境
production会将 DefinePlugin 中 process.env.NODE_ENV 的值设置 为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。能让代码优化上线 运行的环境

第 2 章：webpack 的初体验

2.1 初始化配置

  1. 初始化 package.json 。 输入指令:
npm init
  1. 下载并安装 webpack 。输入指令:
npm install webpack webpack-cli -g
npm install webpack webpack-cli -D

2.2 编译打包应用

  1. 创建文件
  2. 运行指令
 开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development

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

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

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

  1. 结论webpack 能够编译打包 js 和 json 文件。
    能将 es6 的模块化语法转换成浏览器能识别的语法。
    能压缩代码。
  2. 问题不能编译打包 css、img 等文件。
    不能将 js 的 es6 基本语法转化为 es5 以下语法。

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

3.1 创建配置文件

  1. 根目录下创建文件 webpack.config.js
  2. 配置内容如下
const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。
module.exports = { 
 	 entry: './src/js/index.js', // 入口文件
	 output: { // 输出配置
    	 filename: './built.js', // 输出文件名 
    	 path: resolve(__dirname, 'build/js') // 输出文件路径配置
	 },
	 mode: 'development' //开发环境 
};
  1. 运行指令:
webpack

3.2 打包样式资源

  1. 创建文件
  2. 下载安装 loader 包
npm i css-loader style-loader less-loader less -D
  1. 修改配置文件
/*
  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'
}
  1. 运行指令:
webpack

3.3 打包 HTML 资源

  1. 创建文件
  2. 下载安装 plugin 包
npm install --save-dev html-webpack-plugin
  1. 修改配置文件
/*
  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'
};
  1. 运行指令: webpack

3.4 打包图片资源

  1. 创建文件
  2. 下载安装 loader 包
npm install --save-dev html-loader url-loader file-loader
  1. 修改配置文件
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: [
      {
        test: /\.less$/,
        // 要使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 问题：默认处理不了html中img图片
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        // 使用一个loader
        // 下载 url-loader file-loader
        loader: 'url-loader',
        options: {
          // 图片大小小于8kb，就会被base64处理
          // 优点: 减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024,
          // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
          // 解析时会出问题：[object Module]
          // 解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          // 给图片进行重命名
          // [hash:10]取图片的hash的前10位
          // [ext]取文件原来扩展名
          name: '[hash:10].[ext]'
        }
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

3.5 打包其他资源

  1. 创建文件
  2. 修改配置文件
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: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 打包其他资源(除了html/js/css资源以外的资源)
      {
        // 排除css/js/html资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

3.6 devserver

  1. 创建文件
  2. 修改配置文件
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: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 打包其他资源(除了html/js/css资源以外的资源)
      {
        // 排除css/js/html资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',

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

3.7 开发环境配置

  1. 创建文件
  2. 修改配置文件
/*
  开发环境配置：能让代码运行
    运行项目指令：
      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
  }
};

第 4 章：webpack 生产环境的基本配置

第 5 章：webpack 优化配置

第6 章：webpack 配置详情

第 7 章：webpack5 介绍和使用

键盘上的那抹灰
关注
  • 2
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack打包
weixin_64948861的博客
02-27 751
简介：webpack是一个前端资源构建工具 ，一个静态资源打包器。在webpack看来，前端的所有资源文件（js/json/img/less/....）都会做为模块处理。它根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）
webpack 打包流程
张三军的博客
01-30 1万+
webpack 打包原理
webpack打包教程
zhaoyifei01的博客
03-06 2717
webpack打包
Webpack打包-打包详细流程
weixin_40381947的博客
06-02 7036
Webpack是一个现代化的静态模块打包器，支持JavaScript、CSS、图片等资源的打包。它将所有模块及其依赖项视为静态资源，并创建一个依赖关系图，将这些资源转换为有效的输出文件。通过Webpack，可以将多个文件打包成一个或多个文件，并在网页中加载使用。 Webpack 支持各种开发场景和应用程序类型。在Webpack中，所有资源都被认为是模块，可通过引入其他模块而使用。Webpack提供了配置文件，允许开发人员自定义构建流程，以便灵活地满足各种场景的需求。Webpack 的功
Vue基础知识总结 9：vue webpack打包原理
热门推荐
学Java，找哪吒
10-06 2万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 一、前端模块化 webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。 并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。 二、打
webpack4详细使用教程.zip
01-08
webpack4详细使用教程.zip
webpack学习教程之publicPath路径问题详解
12-08
本文主要给大家介绍了关于webpack中publicPath路径问题的相关内容，分享出来供大家参考学习，下面来看看详细的介绍： output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定...
webpack构建vue项目的详细教程（配置篇）
08-29
本篇文章主要介绍了webpack构建vue项目的详细教程（配置篇），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack中CommonsChunkPlugin详细教程(小结)
11-26
本文介绍了webpack中CommonsChunkPlugin详细教程(小结)，分享给大家，也给自己留个笔记，具体如下： 1.demo结构： 2.package.json配置： { "name": "webpack-simple-demo", "version": "1.0.0", "description...
webpack4打包实战
woyebuzhidao321的博客
02-17 3215
一、模块化打包工具的由来 ES Module存在环境兼容问题，通过模块化方式划分的模块较多，网络请求频繁，在前端应用开发中不仅仅需要JavaScript代码需要模块化，随着应用的日益复杂，html，css同样也面临相同的问题，也就是说，所有的前端资源都需要模块化。 所需要的工具需要满足的条件： 新特性代码编译 模块化JavaScript打包 支持不同文件类型的资源模块 打包工具：解决前端整体的模块化，并不单指JavaScript模块化 二、模块打包工具概要 核心： 模块打包器（Module bund
如何使用Webpack打包
weixin_47316183的博客
04-22 1万+
简单的说了一下webpack是干嘛的，和webpack如何安装，如何进行打包，步骤很详细，感兴趣的同学可以试着操作一下。 文章目录1、webpacks是什么？2、Webpack安装3、初始化项目4、使用webpack进行JS打包5、使用webpack进行CSS打包总结 1、webpacks是什么？ Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 从图中我们可以看出，Webpack 可以将多种静态资源 js、css、le.
webpack 打包全流程
harvestUachieve的博客
08-20 3115
只有在脚本使用时才会调用。ES6渐渐取代CommonJs。
前端---【webpack打包工具的介绍和基本使用】
m0_61307468的博客
04-26 1147
一.webpack介绍 1.1什么是webpack 1.2webpack五个核心概念 1.2.1Entry 入口 1.2.2Output 1.2.1Entry 入口 入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点依赖的 ​ 1.2.2Output npm i webpack webpack-cli -D 安装 npm init -y 创建入口JS模块: src/
webpack的打包原理
路人贾！
07-12 439
webpack的打包原理
一篇文章读懂webpack如何打包
朝花夕拾的博客
11-21 6082
webpack是打包命令。如果我们不指定它的后继参数，其实也能实现打包。但是有一些小的限制。 webpack如果不指定输入和输出，那么默认的打包文件就是./src/index,默认的输出路径是./dist/index.js 第一种是通过build，有点长。另外一个是通过webpack配置文件，这两个没有太大的区别，干的都是同一件事情，只是用了不同的方法。 如果用第一种方法，在build中，需要写配置节，给全参数。 打包命令的表达式：webpack源文件路径-o输出文件路径--（模式） ...
干货分享前端开发的必备技能--webpack打包
weixin_71171795的博客
11-27 1986
打包在我们开发的过程中是一个将复杂的代码使用node环境下的webpack工具包压缩为一个代码文件,大大减少了代码的空间占用,提高浏览器解析的速率使用方法
如何使用 Webpack 实现模块化打包？
最新发布
我乐了的博客
02-13 772
整体上对于 Webpack 的基本使用其实并不复杂，特别是在 Webpack 4 以后，很多配置都已经被简化了，在这种配置并不复杂的前提下，开发人员对它的掌握程度主要就体现在了是否能够理解它的工作机制和原理上了。就拿 Webpack 打包过后的结果来说，大多数的开发者其实根本不会关心它内部的结构是怎样的，又是如何运行起来的，总觉得不需要关心，但是当这种“不用关心”的事情越积越多，整个开发过程不可控的点也会随之增多，当出现问题时，也就很难定位问题的根源了。
webpack 教程
07-28
- *1* [webpack详细教程](https://blog.csdn.net/weixin_41842236/article/details/103132674)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值