最新版Webpack5实战教程（持续更新...）

深碍√TFBOYSˉ_ 2022-10-05 12:58 358阅读 0赞

### Webpack简介 ###

*  1.Webpack是什么？
 *  2.Webpack五个核心概念
 *   *   *  2-1.Entry
         *  2-1.Output
         *  2-3.Loader
         *  2-4.Plugings
         *  2-5.Mode
 *  学习安装webpack
 *   *   *  1. 初始化 package.json
         *  2.下载安装webpack
         *  3.运行指令：
         *  4.开发环境：
         *  5.生成环境：
         *  6.打包json资源
         *  7.webpack 打包样式资源
         *  8.引入
         *  9.暴露对象
         *  10.下载：

# 1.Webpack是什么？ #

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

# 2.Webpack五个核心概念 #

### 2-1.Entry ###

入口（Entry）指示 Webpack 以哪个文件为入口七点开始打包，分析构建内部依赖图。

### 2-1.Output ###

输出（Output）指示 Webpack 打包后的资源 bundles 输出到哪里去，以及如何命名

### 2-3.Loader ###

Loader 让 Webpack 能够去处理那些 JavaScript 文件（webpack 自身只能理解Javasript）

### 2-4.Plugings ###

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

### 2-5.Mode ###

模式（Mode）指示Webpack使用相应模式的配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70]

# 学习安装webpack #

### 1. 初始化 package.json ###

输入指令: npm init

### 2.下载安装webpack ###

全局安装：

输入指令: npm install webpack webpack-cli -g

本地安装：

npm install webpack webpack-cli -D

### 3.运行指令： ###

![在这里插入图片描述][20210609164108467.png]  
新建src文件和build文件  
index.js :webpack入口起点文件

![在这里插入图片描述][20210609164815651.png]  
随便写点代码，等下打包试一下

### 4.开发环境： ###

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

webpack会以，./src/index.js为入口文件开始打包，打包后输出到 ./build/built.js整体打包环境，是开发环境  
![在这里插入图片描述][2021060916491090.png]  
打包完就会多一个built.js文件，打开后下面会有eval函数这就是咱们打包的代码  
![在这里插入图片描述][20210609165031786.png]

### 5.生成环境： ###

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

webpack会以，./src/index.js为入口文件开始打包，打包后输出到 ./build/built.js整体打包环境，是生产环境

这个无非就是压缩过的  
![在这里插入图片描述][20210609170942594.png]

### 6.打包json资源 ###

![在这里插入图片描述][20210609194548531.png]  
在src下新建一个json文件

![在这里插入图片描述][20210609194923427.png]  
然后随便输入写内容  
![在这里插入图片描述][20210609195148871.png]

在src下的index文件里引入data.json,最后打包，也可以在页面输出出来

### 7.webpack 打包样式资源 ###

![在这里插入图片描述][20210609204018346.png]  
在src下新建一个index.css文件，但是现在还是运行不了的  
这里我们需要建一个webpack.config.js webpack的配置文件  
作用：指示webpack 干那些活（当你运行 webpack 指令时，会加载里面的配置）  
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。

### 8.引入 ###

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

### 9.暴露对象 ###

//暴露对象
    module.exports = { 
      //生成环境,这两个不能一起写
    // mode:"production",
    //开发环境
      mode:'development',
      //webpack配置
      //入口起点
      entry: './src/index.js',
      //输出
      output: { 
        //输出文件名
        filename: 'main.js',
        //输出路径
        //__dirname nodejs的变量，代表低昂亲文件的目录绝对路径
        path: resolve(__dirname, 'dist'),
      },
      //loder的配置
      module: { 
        rules: [
          //详细loader配置
          {  
            //匹配那些文件
            test: /\.css$/,
            //use数组中loader执行顺序：从左到右，从下到上一次执行
            //创建style标签，将js中的样式插入进行，添加到HEAD中生效
            use: [ 'style-loader',
             //将css变成commonjs模块加载js中，里面内容是样式 
            'css-loader']},
          
        ],
      },
      //plugins的配置
      plugins: [new HtmlWebpackPlugin(
        { 
          template:'./src/index.html'
        }
      )],
      
    
    };

### 10.下载： ###

npm install --save-dev css-loader ts-loader  
npm install --save-dev html-webpack-plugin

**总结**：

1.  webpack能处理js/json资源，不能处理css/img等其他资源
2.  生产环境比开发环境多了个压缩js代码，其他的目前没有看出来
3.  生产环境和开发环境将Es6模块化编译成浏览器能识别的模块化~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjEzOTA5NA_size_16_color_FFFFFF_t_70]: /images/20221005/36310e0e7d3d412aac6e993033f14435.png
[20210609164108467.png]: /images/20221005/83f9bfba1b0846bfb7d92c7303b94ec8.png
[20210609164815651.png]: /images/20221005/afbcd50b21f04e3ea2edc6ee581908dd.png
[2021060916491090.png]: /images/20221005/19d6f837b35843fea9ae7387d18dfcb0.png
[20210609165031786.png]: /images/20221005/eaaaf43d5ffc42999ecda17f6c418c41.png
[20210609170942594.png]: /images/20221005/1c6d41c25a954f6ea9c2959beaa4e492.png
[20210609194548531.png]: /images/20221005/4d71bddccbcb4efe91b44df44b0478ed.png
[20210609194923427.png]: /images/20221005/660eb0e7d6344ce49e8af2c7a08215f0.png
[20210609195148871.png]: /images/20221005/a2251fe9b6d34be684794cdbaf4ab8f1.png
[20210609204018346.png]: /images/20221005/7caefcad8d704a548cc46cebfd929c61.png