webpack的学习

最新推荐文章于 2022-02-27 20:47:41 发布
最新推荐文章于 2022-02-27 20:47:41 发布
阅读量7.7k 收藏 18
点赞数 3
文章标签： webpack javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45745964/article/details/122783927
版权
本文详细介绍了Webpack的学习，涵盖基本使用、开发环境配置、生产环境配置、性能优化及配置详解等内容。讲解了Entry、Output、Loader、Plugins、Mode等核心概念，并涉及HMR、source-map、tree shaking、代码分割、PWA等优化技巧。同时，还探讨了Webpack5的特性，如持久缓存、新的Chunk ID算法和Tree Shaking改进。
摘要由CSDN通过智能技术生成

webpack的学习

尚硅谷2020最新版Webpack5实战教程(从入门到精通)，哔哩哔哩链接：https://www.bilibili.com/video/BV1e7411j7T5?p=1

image-20200624110901109

环境参数： Nodejs 10版本以上、webpack 4.26版本以上

预备技能： 基本Nodejs知识和Npm指令、熟悉ES6语法

一、webpack基本使用

1.webpack简介

​ webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件

(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

image-20200624112650752

2.webpack五个核心概念

1 Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。例如从index.js这个起点出发

image-20200624113634019

2 Output

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

3 Loader

Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript)，例如css、img

4 Plugins

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

5 Mode

image-20200624113038799

3.webpack初体验

1.在vscode中新建一个文件夹，右键在终端中打开

image-20200624115928319

2.输入 npm init ，初始化npm，

3.接着输入webpack的包名，其他按enter默认即可

image-20200624120251727

4.然后下载包并指定为全局安装，输入

npm i webpack webpack-cli -g

这里下载了两个包，一个为webpack，一个为webpack-cli，使我们通过webpack-cli这个包的指令去使用webpack内部的功能，-g表示全局安装，将来可以直接通过指令去调用这两个包。这里即使你已经安装过这两个包，也可以再次输入，他会自动覆盖旧的包

image-20200624121053338

5.然后本地安装，输入 ,

npm i webpack webpack-cli -D

-D的意思是将webpack添加到开发依赖，webpack下载的所有东西都属于开发依赖，不属于生产依赖

6.之后新建的文件夹会出现以下的三个文件

image-20200624121540109

7.接着在自己建的文件夹下新建src和bulid文件夹，src表示源代码，bulid表示代码通过webpack打包处理之后输出的目录

8.在src下新建index.js作为webpack的入口起点文件

index.js

/*
  index.js: webpack入口起点文件

  1. 运行指令：
    开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
      webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
      整体打包环境，是开发环境
    生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
      webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
      整体打包环境，是生产环境，生产环境会压缩代码

   2. 结论：
    1. webpack能处理js/json资源，不能处理css/img等其他资源
    2. 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~
    3. 生产环境比开发环境多一个压缩js代码。
*/
// import './index.css';

import data from './data.json';
console.log(data);

function add(x, y) {
   
  return x + y;
}

console.log(add(1, 2));

data.json

{
   
  "name": "jack",
  "age": 18
}

9.然后运行开发环境指令 ，

webpack ./src/index.js -o ./build/built.js --mode=development

-o为Output，意思是输出到.build/built.js这个路径。

image-20200624151237704

Hash为每次打包都会生成一个唯一的哈希值，built.js为打包资源

image-20200624151427948

10.通过 node .\build\built.js 指令便可直接运行built.js文件

image-20200624151454805

11.在html中引入webpack打包后的资源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入webpack打包后的资源 -->
    <script src="./build/built.js"></script>
</head>
<body>
    
</body>
</html>

结果如下：

image-20200624152018895

二、webpack开发环境配置

1.打包样式(css、less)资源

因为webpack只能识别js文件，所以要想识别其他文件必须在webpack的配置文件里进行配置，将其转换为js。

1.新建index.css、index.js、index.less、webpack.config.js配置文件

image-20200625140706893

index.css

html, body{
   
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: pink;
}

index.js

// 引入样式资源
import './index.css';
import './index.less';

index.less

#title {
  color: #fff;
}

webpack.config.js

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

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

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

module.exports = {
   
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
   
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname   为node.js的变量，代表当前文件的目录绝对路径,即代表“03.打包样式资源”这个路径，
    //后面的“build”表示这个目录下的build路径
    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标签，将js中的样式资源插入进行，添加到head中生效
          'style-loader',
          // // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader',
          // 将less文件编译成css文件，需要下载 less-loader和less
          'less-loader'
        ]
      }
    ]
  },
  // plugins的配置
  plugins: [
    // 详细plugins的配置
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'  生产模式
}

2.为了防止我们每新建一个案例就导一次包，我们可以利用node找包找不到，去上一级找的特点直接给整个项目导入包，我们输入

npm i webpack webpack-cli -D

再输入

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

这里下载了4个包，css-loader和style-loader为css样式打包所要用到的，还有less（这里less不下载也可以）和less-loader为将less文件转换为css所需要的

3.之后输入webpack或者webpack ./src/index.js -o ./build/built.js --mode=development进行打包

image-20200624160822444

4.新建index.html文件引入打包好的js文件，查看效果是否实现

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./build/built.js"></script>
<body>
    <h1 id="title">111</h1>
</body>
</html>

image-20200624161352058

2.打包html资源

1.对新建的项目（打包html）进行npm init，配置好信息后自动生成package.json、package-lock.json 和node-modules这三个文件，之后新建index.js打包入口文件、webpack.config.js配置文件，

image-20200625140824339

index.js

function add(x, y) {
   
  return x + y;
}

console.log(add(2, 3));

webpack.config.js

/*
  loader: 1. 下载   2. 使用（配置loader）
  plugins: 1. 下载  2. 引入  3. 使用
*/
const {
    resolve } = require('path');
// 引入下载的 html-webpack-plugin 这个插件
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需要 html-webpack-plugin 这个包
    /* new HtmlWebpackPlugin()功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS），
    所以我们可以在里面加入 template: './src/index.html' 这样就会将我们的html引入它创建出来的html当中
    */
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
   
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

2.然后把这个案例右键在终端打开下载html-webpack-plugin这个包，输入

npm i html-webpack-plugin -D

3.再输入webpack进行打包

3.打包图片资源

1.对新建的项目（打包图片资源）进行npm init，配置好信息后自动生成package.json、package-lock.json 和node-modules这三个文件，之后新建index.js打包入口文件、webpack.config.js配置文件、index.less、index.html

index.js

import './index.less';

index.less

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

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

#box3{
  width: 300px;
  height: 300px;
  background-image: url('./angular.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>
<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <img src="./angular.jpg" alt="angular">
</body>
</html>

webpack.config.js

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，因为url-loader依赖file-loader
        loader: 'url-loader',
        options: {
   
          // 图片大小小于8kb，就会被base64处理，这里的数字随便自己写
          // 优点: 减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024,
          // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
          // 解析时会出问题：[object Module]，即在html中的引入的图片src值会
          // 变为<img src="[object Module]" alt="angular">
            
          // 解决：关闭url-loader的es6模块化，使用commonjs解析，新版webpack已解决这个问题
          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'
};

结构目录如下：注意vue.jpg图片由于大小小于8k，已被默认转换为base64的图片编码显示，

image-20200625150450675

2.右键在终端打开，输入

npm i style-loader css-loader less-loader url-loader file-loader html-loader -D

style-loader和css-loader为css样式表所需要的，

style-loader和css-loader和less-loader为less所需要的，

url-loader依赖file-loader，为less或css中导入background-image: url('./react.png');这个图片所需要的，

html-loader为html中引入图片所需要的

3.再输入webpack进行打包，打包好后bulit.js引入的html文件如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>
<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  //src值为自定义重命名的哈希值的前十位+后缀名
  <img src="830bf3c820.jpg" alt="angular">
<script type="text/javascript" src="built.js"></script></body>
</html>

image-20200625150525103

4.打包其他资源(字体图标等等)

目录结构：

image-20200625152210404

index.js

// 引入 iconfont 样式文件
import './iconfont.css';

webpack.config.js

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'
};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>
<body>
  <span class="iconfont icon-icon-test"></span>
  <span class="iconfont icon-icon-test2"></span>
  <span class="iconfont icon-icon-test3"></span>
  <span class="iconfont icon-icon-test1"></span>
</body>
</html>

打包好后bulit.js引入的index.html，查看效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>
<body>
  <span class="iconfont icon-icon-test"></span>
  <span class="iconfont icon-icon-test2"></span>
  <span class="iconfont icon-icon-test3"></span>
  <span class="iconfont icon-icon-test1"></span>
<script type="text/javascript" src="built.js"></script></body>
</html>

image-20200625152131825

5.devServer

需要先下载webpack-dev-server这个包，输入npm i webpack-dev-server -D

启动devServer指令为：npx webpack-dev-server

停止devServer指令：快捷键ctrl+c

webpack.config.js

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：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
  // 特点：只会在内存中编译打包，不会有任何输出,即不会更新（改变）bulid打包文件夹中的文件，
  // 即使把bulid删掉也能照样显示
  // 启动devServer指令为：npx webpack-dev-server
  devServer: {
   
    // 项目构建后路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号，即在浏览器中输入http://localhost:3000/  即可访问
    port: 3000,
    // 自动打开浏览器 即输入npx webpack-dev-server后自动打开浏览器
    open: true
  }
};

6.开发环境基本配置

webpack.config.js

/*
  开发环境配置：能让代码运行
    运行项目指令：
      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',
    /* 
     输出的文件路径，一般是一个绝对路劲，而绝对路径一般需要引入一个node.js的核心模块path，
     path的方法叫resolve方法，用来处理绝对路径
     
     __dirname   为node.js的变量，代表当前文件的目录绝对路径,即代表“开发环境配置”这个路径，
     后面的“build”表示这个目录下的build路径
    */
    path: resolve(__dirname, 'build')
  },
  module: {
   
    rules: [
      // loader的配置
      {
   
        // 处理less资源，less和css会一起输出到bulit.js文件当中
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
   
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
   
        // 处理（css、less）图片资源
        test: /\.(jpg|png|gif)$/,
        // url-loader通过es6-modules解析 
        loader: 'url-loader',
        options: {
   
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
// 关闭es6模块化，使用commonjs解析，这是为了防止模块不一样导致解析失败，新版webpack已解决这个问题
          esModule: false,
          // 将图片输出到imgs下
          outputPath: 'imgs'
        }
      },
      {
   
        // 处理html中img资源，html-loader通过commonjs解析
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
   
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        // url-loader是在file-loader基础上做了详细的优化，多了一个limit的功能，
        // 即转为base64的图片格式，file-loader就是原封不动的将资源输出出去
        loader: 'file-loader',
        options: {
   
          name: '[hash:10].[ext]',
          //  // 将其他资源输出到media下
          outputPath: 'media'
        }
      }
    ]
  },
  // 插件，处理html资源需要插件，插件需要引入才能使用，
  // 即上方的const HtmlWebpackPlugin = require('html-webpack-plugin');
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
   
      // 表示以某个文件为模板
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
   
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
};

image-20200625161950189

打包后引入bulit.js的index.html文件

<!
最低0.47元/天 解锁文章
我爱学习呀
关注
webpack学习笔记
09-26
webpack学习笔记，总结了实际开发过程中的实际问题，并进行了梳理，便于直接查找使用；同时也对于目前市面上的资源进行了借鉴，梳理成为可以简单查找，就可以找到对应的思路，便于使用，方面了自己，也节省了时间。
webpack学习文档
08-03
### Webpack 学习文档 #### 一、Webpack 概述 Webpack 是一款由德国开发者 Tobias Koppers 开发的开源项目，它最初被设计为一个模块打包器(module bundler)。随着时间的发展，Webpack 已经成为了前端开发领域中最...
webpack学习
寂静流年韶华舞的博客
01-26 1005
day1: ul>li{这是第$个li}*9 快速生产ul>li结构；cls清除cmd界面 ⑦安装webpack：npm install webpack@5.42.1 webpack-cli@4.7.2 ⑧新建webpack.config.json: module.exports={ mode:'development' //development和production } ⑨修改package.json： "scripts": { "dev": "webpa
Webpack学习
25氪
02-27 611
一、webpack是什么 核心概念 webpack是一种前端资源构建工具，一个静态模块打包器。 在webpack看来，前端所有资源文件（js/json/css/img/less）等都会作为模块处理 他根据模块依赖关系进行静态分析，打包生成对应静态资源 webpack 五个核心概念 Entry 入口指示，webpack以哪个文件为入口起点进行开始打包，分析构建依赖关系图 Output 输出指示，webpack打包后资源输出到哪里去，以及怎么命名 Loader 在module文件下，让webpack
webpack 学习文件
12-03
**Webpack 学习详解** Webpack 是一款现代 JavaScript 应用程序的静态模块打包工具。它将应用程序视为由多个模块组成，这些模块可以是 JavaScript 文件、CSS 文件、图片或任何其他资源。Webpack 将这些模块相互关联...
webpack学习资料
11-25
在深入Webpack的学习中，我们需要了解以下几个关键概念： 1. **Entry（入口）**：Webpack 构建的起点，它是你的应用的主文件，可以是单个文件或多个文件。通过配置entry属性，你可以指定多个入口点，创建多个独立的...
webpack那些事
SilentLand的博客
10-22 337
webpack 中文官网 英文官网 webpack 基本概念 为什么要学习webpack webpack 它是 vue-cli 的底层实现原理，学习了它，可以更加方便的去使用 vue-cli(现在基本不用了) webpack 的作用 vue-cli 搭建的项目有哪些功能： 可以运行为一个服务器 可以进行实时更新 代码修改之后，保存，页面会自动更新 可以解析 css 文件 import 'xx.css' 可以解析 .vue 文件 … 上述的这些功能，其实都是 webpack 来实
webPack 的学习
SW43464616的博客
05-24 185
目录 webPack 的一些个人心得 1. 基本知识 （1）nodejs了解 （2）webpack简单架构 2. 开发环境 （1）entry （2）output （3）mode （4）loader （5）plugin （6）devServer 3. 生产环境 （1）entry （2）output （3）mode （4）loader （5）plugin （6）devServer 3. 文件抽离 （1）webpack.base.config.js （2）webpack.
nodejs、webpack学习
最新发布
08-18
nodejs、webpack学习
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值