WebPack基础入门(一)：万物皆可webpack

拼搏现实的明天。 2022-12-18 11:56 182阅读 0赞

前言

前端技术日新月异的发生着变化，涌现出了很多的框架以UI为主的三大框架(react,vue,angular)，与样式相关的less、sass。语法相关的es6 typescript以及npm上面成千上万的第三方工具包，各种可以提高开发效率的新思路和框架层出不穷，但是他们都有一个共同的特点不能够直接运行，必须转换后才能正确运行。WebPack 就是做这件事的，将源代码转换成可以执行的 JavaScript HTML CSS代码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]

关于WebPack的内容有很多，我只挑出我常用到的做一下笔记内容，主要有五节内容：  
万物皆可webpack：使用webpack 打包常见的文件  
React 项目: 打包React的配置  
打包优化1  
打包优化2: 打包优化分为两节内容，节省打包时间。  
多文件打包：多个文件入口如何配置

**四大核心**

这是我自己总结的四大核心：

entry: 打包的入口文件

\*\*output：\*\*打包后输出文件  
\*\*module：\*\*代码转换;如 less 转换为css，静态资源打包  
\*\*plugins：\*\*补充modules的不足，webpack本身的大多数特性都使用这个插件接口。这使得webpack更加灵活。

当然了webpack 除了这些还有很多很多十分重要的内容，比如loader，mode，devTool，sourceMap等等，其他内容我们在面都能涉及到。  
为什么说这四个是四大核心呢？因为使用这四个内容可以打包我们常见的各种类型文件，接下来我们就试一下吧：

创建项目

在创建项目之前，我们系统需要有node，npm；  
再介绍一下npx，在安装npm的时候会自动安装npx，我们安装依赖在本项目中会生成一个node\_modules文件夹，使用npx 调用的是本项目的依赖，而不是全局的依赖。

npm init 初始化项目

mkdir webpack-demo
    cd webpack-demo
    npm init -y 
    # -y 表示一切默认选择
    npm install --save-dev webpack webpack-cli # 可以简写为 npm i -D webpack webpack-cli
    # 安装webpack

会在文件夹下生成package.json

> 创建webpack.config.js 文件 使用npx webpack  
> 就会打包文件，打包配置默认为webpack.config.js，我们创建src 文件夹，所有的文件都在这里面。
> 
> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

开始配置

const path = require('path')
    
    module.exports = { 
      entry:'./src/index.js',
      output: { 
        filename: '[name].js',
        path: path.resolve(process.cwd(), 'dist'),
      },
    }
    # 会在项目里面生成 dist 文件夹，把src下面的index文件打包至dist文件夹下，
    # entry: 可以写上面的字符串也可以写成对象如下
    module.exports = { 
      entry:{ 
        main:'./src/index.js'
      },
      output: { 
        filename: '[name].js',
        path: path.resolve(process.cwd(), 'dist'),
      },
    }
    # output: [name]表示entry里面的key，这里就表示main，所以 src 下的index 会打包为main文件，如果entry是字符串默认为main

index.js

const element = document.createElement("div");
    element.className = "custom";
    element.innerText = "Hello World";
    
    const dom = document.getElementById("root");
    dom.appendChild(element)
    
    # 都能看懂

打包

npx webpack

这里的index.html 是我自建创建的，创建完成后把main.js 引入到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>
    <body>
      <div id="root"></div>
      <script src="./main.js"></script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]  
打包文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]  
打包后使用

可以看到我们在js里面写的内容都生效了

使用loader

loader 主要是用来翻译代码的，把代码翻译成浏览器能够运行的源码

上面打包的是js文件所以不需要翻译，如果我们在项目里面用到了图片，less，sass，字体文件呢？

所以就用到了loader，以下loader都需要先安装哦

module.exports = { 
      entry: './src/index.js',
      output: { 
        filename: '[name].js',
        path: path.resolve(process.cwd(), 'dist'),
      },
      # 这里只举例less-loader，loader 的读取是从右到左的
      module: { 
        rules: [{ 
          test: /\.css$/i,
          use: ['style-loader', 'css-loader'] # css-loader 读取css文件翻译成样式，style-loader把样式生效
        },
          # less，先把less 文件读取为css 文件，在使用css-loader读取为样式，style-loader 把样式生效
        { 
          test: /\.less$/i,
          use: [
            'style-loader',
            { 
              loader: 'css-loader',
              options: { 
                modules: true // style.className
              }
            },
            'less-loader',
          ]
        }]
      }
    }

使用plugins

以上的操作都是先把文件打包，然后创建一个html，把打包的文件引入到html文件中。十分的麻烦，所以可以使用plugins，在每次打包的时候都生成一个html文件，并把文件引入，不需要我们自己操作。

plugins：是一个数组

const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    # 安装插件 npm i -D html-webpack-plugin
    module.exports = { 
      ...
      plugins:[
        new HtmlWebpackPlugin({ 
          template: './index.html' // 使用当前目录的index.html为模板，每次打包把打包后的文件引入到模板文件里面，并打包到dist
        }),
      ]
    }

结语

这节简单的说了下webpack的打包配置，是webpack打包的就牛一毛，包括本节内容，我也没有说太多，主要是配置，更多内容还需要查看官方文档，这个只属于一个入门级别的。欢迎查看下节打包配置react项目。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/fe2bb30892684e94bcb026fe35e02cf4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/07a9902080434dbda9b06d9dee9a6ae5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221122/9f66039714bd463e9d659eb0c52b5c3b.png