webpack简单入门

最新推荐文章于 2023-07-05 21:59:17 发布
最新推荐文章于 2023-07-05 21:59:17 发布
阅读量170 收藏 4
点赞数
分类专栏： 前端 文章标签： js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45747080/article/details/109166069
版权

webpack

1、关于webpack

  1. 什么是webpack？

    webpack可以看做是将模块自动打包的工具，它会自动分析项目结构，然后将一些浏览器不能直接运行的扩展语言（TypeScript等）打包为合适的结构以便用户的浏览器能够进行解析。

    在这里插入图片描述

  2. 为什么要用webpack？

    因为在Vue中可能会用到大量的文件以及文件依赖以及项目结构，所以就推荐使用webpack来辅助打包。

  3. 怎么使用webpack

    因为webpack的运行环境依赖node.js，所以需要先自行安装node.js。装好node.js之后再使用npm安装webpack

  4. 安装webpack

    安装node.js完成后在windows命令行使用

    node -v  #查看node.js的环境变量是否生效

    如果node环境安装成功，再使用

    npm install webpack@3.6.0 -g

    进行全局安装webpack的3.6.0版本。

2、利用webpack进行一次模块化打包

webpack可以将之前使用AMD、CommonJS、ES6规范的模块化打包方式简化，只需要将模块代码写好后利用webpack进行打包就可以了。

  1. 新建项目（项目目录结构如下）

    │  index.html
│
├─dist
│      bundle.js
│
└─src
        info.js
        main.js

    src存放开发时的源代码，dist存放经过webpack打包后的代码

  2. 新建两个js文件，其中一个导出，另外一个导入

    info.js：

    //定义变量
let name='测试';
let age=18;
let message='Hello!Webpack!';

//导出变量（暴露）
export {
  name,age,message
}

    main.js：

    //从info文件中导入
import * as info from "./info";

console.log(info.name);
console.log(info.age);
console.log(info.message);

  3. 在命令行执行

    webpack ./src/main.js ./dist/bundle.js
#将main.js打包成为bundle.js

    这个时候webpack就会自动寻找模块之间的依赖关系（前提是代码没有错误），然后将所有的模块打包为一个bundle.js

  4. 在html里用script标签引用bundle.js

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>

利用webpack打包的好处就是你只需要专注完成模块内的代码，然后最后使用webpack进行打包，然后直接在html里引用一个js文件就可以了（因为webpack会把所有模块打包成一个js）。

3、webpack的配置

因为很多时候我们的项目最好是在项目里面就配置好对应的依赖，webpack也算是项目里的依赖，就所谓的局部依赖，所以我们就需要给当前项目也要配置webpack。

  1. 引入node

    因为在webpack里并不能获取当前项目的绝对路径，但是在webpack中又需要使用到它，但是node里面又有一个模块（函数）可以获得绝对路径，所以先引入node

    npm init -y

    npm init就是初始化node，-y参数就是全部选择默认（注意项目名不能有中文），接下来就会在项目的根目录里生成一个package.json文件，就是该项目的描述文件，里面的东西都可以自定义

    {
  "name": "webpackStart", 	#项目名称
  "version": "1.0.0",	    #项目版本号
  "description": "",	    #项目描述
  "main": "index.js",	    #项目入口
  "scripts": {             	 #脚本命令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",				#作者
  "license": "ISC"			#开源协议
}

  2. 编写webpack配置文件

    在项目根目录里新建一个名为webpack.config.js文件，该文件就是webpack的配置文件，编辑如下配置：

    
//从node的系统模块中获得path
const path=require('path');

//指定webpack打包的起点（来源）和终点（目的地）
module.exports={
  //起点字符串路径
  entry:'./src/main.js',
  //终点对象
  output:{
    //路径（拼接字符串）
    path:path.resolve(__dirname,'dist'),
    //生成的文件名
    filename:'bundle.js',
  },
};

    第一步require(‘path’)就是从node的系统模块中获取path，和在Java中导包类似，然后再用CommonJS的方式导出，再在里面编辑起点和终点，起点直接输入相对路径的字符串，但是终点的参数就必须是个对象，然后path就是利用从node中获取的模块然后将__dirname和dist拼接起来。

  3. 在命名行运行webpack

    然后在命令行输入

    webpack

    就可以看到打包成功了。

4、将webpack集成到项目中

因为大多数开发的时候每个开发人员自己本地环境中都会有一个webpack，所以最好是在项目中就直接指定webpack的版本，这样就不会每次项目从远端拉取到本地的时候使用本地的webpack打包，而是使用项目中自带的webpack打包，因为前端的依赖项中版本之间差距特别大。

  1. 将webpack安装到项目中

    利用npm将webpack安装到项目中

    npm install webpack@3.6.0 --save-dev

    –save-dev的意思是保存到项目中并且将它设置为开发时依赖，此时项目中就会多一个node_modules文件夹，里面就会有咱们刚刚下载好的webpack，此时也会看到package.json文件中多了：

      "devDependencies": {
    "webpack": "^3.6.0"
  }

    这就是刚刚我们下载并且指定为开发环境使用的webpack

  2. 在项目的描述文件（package.json）中配置

    在项目中下载好了webpack后在package.json的scripts里配置脚本：

      "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

    这样就可以直接在项目的命令行里输入npm run build就直接映射到webpack，并且使用项目里面的webpack进行打包了。相当于此时的webpack命令就被映射到了build命令上。

5、利用webpack打包css文件

因为webpack本身是直接可以将js文件打包的，可是开发的时候我们需要打包除了js的文件怎么办呢？这个时候就需要用到各种各样的loader，比如css-loader（打包css文件）、style-loader（将css样式添加到DOM）

  1. 把项目目录改为用包装css或者js文件

    │  index.html
│  package-lock.json
│  package.json
│  webpack.config.js
│
├─dist
│      bundle.js
│
└─src
    │  main.js
    │
    ├─css
    │      index.css
    │
    └─js
            info.js

    可以看到css和js文件都被放到了对应的包里，而main.js（入口则是放在了外面）

  2. 写css文件

    index.css：

    body{
  background-color: red;
}

  3. 在js中引入css

    main.js：

    //从info文件中导入
import * as info from "./js/info";

console.log(info.name);
console.log(info.age);
console.log(info.message);

//引入css文件
require('./css/index.css');

  4. 利用npm安装loader

    因为webpack是自带将js文件打包的能力的，但是并不具备将其他文件打包的能力，所以我们需要自行安装，假如说如果只安装了css-loader，那么webpack确实具备了解析css文件的能力，但是还需要安装style-loader来将css加载到DOM上。所以：

    npm install --save-dev css-loader@2.0.2
npm install --save-dev style-loader@0.23.1

    分别都以dev开发环境下安装css-loader和style-loader

  5. 在webpack.config里配置刚刚安装loader

    webpack.config.js：

    
//从node的系统模块中获得path
const path=require('path');

//指定webpack打包的起点（来源）和终点（目的地）
module.exports={
  //起点字符串路径
  entry:'./src/main.js',
  //终点对象
  output:{
    //路径（拼接字符串）
    path:path.resolve(__dirname,'dist'),
    //生成的文件名
    filename:'bundle.js',
  },
  module: {
    rules: [
      {
        //正则表达式匹配所有以.css结尾的文件
        test: /\.css$/,
        //style-loader是将css样式作用到DOM上
        //css-loader是将css文件处理
        //加载的顺序是从右往左加载
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
};

    将module导出，并且在module里加载两个loader，注意加载的顺序是从右往左，所以先加载css-loader再加载style-loader

  6. 利用webpack将整个项目进行打包

    最后依旧是利用webpack将整个项目打包：

    npm run build

6、利用webpack打包less文件

有的时候可能需要利用webpack将less文件打包称css文件，这个时候就需要用到less-loader和less工具

  1. 写less文件

    @fontSize:50px;
@fontColor:white;
body{
  font-size: @fontSize;
  color: @fontColor;
}

  2. 在js里面引入less

    //从info文件中导入
import * as info from "./js/info";

console.log(info.name);
console.log(info.age);
console.log(info.message);

//引入css文件
require('./css/index.css');

//引入less文件
require('./css/font.less')

  3. 利用npm安装loader和less工具

    npm install --save-dev less-loader@4.1.0
npm install --save-dev less@3.9.0

  4. 在webpack.config.js里配置刚刚下载好的loader

    
//从node的系统模块中获得path
const path=require('path');

//指定webpack打包的起点（来源）和终点（目的地）
module.exports={
  //起点字符串路径
  entry:'./src/main.js',
  //终点对象
  output:{
    //路径（拼接字符串）
    path:path.resolve(__dirname,'dist'),
    //生成的文件名
    filename:'bundle.js',
  },
  module: {
    rules: [
      {
        //正则表达式匹配所有以.css结尾的文件
        test: /\.css$/,
        //style-loader是将css样式作用到DOM上
        //css-loader是将css文件处理
        //加载的顺序是从右往左加载
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        //正则表达式匹配所有以.less结尾的文件
        test: /\.less$/,
        //加载的顺序是从右往左加载
        //less-loader将less文件编译成css
        //css-loader将css文件转换为浏览器可读的文件
        //style-loader将样式添加到DOM上
        use: [ 'style-loader', 'css-loader','less-loader' ]
      }
    ]
  }
};

  5. 利用webpack将整体项目打包

    同样是利用

    npm run build

    将整个项目用webpack进行重新打包

7、利用webpack的url-loader打包图片资源

同样假如需要利用webpack打包图片资源的时候会分两种情况，在配置loader的时候会限定图片的大小limit，假如图片的大小小于limit那么图片在打包的时候就会被base64编码转换为字符串然后进行显示（通常用于小图片），如果图片超过limit的时候打包的时候就会直接将图片以文件的格式直接存到项目里，这个时候会利用file-loader（通常用于大图片）。保险起见，最好两种方式都使用，小图片利用url-loader打包，大图片利用file-loader打包。

  1. 在项目根目录新建img（自定义名）文件夹用于存放图片

  2. 在需要图片的地方引入图片

    body{
  /*background-color: red;*/
  background: url("../img/baidu.jpg");
}

  3. 利用npm安装url-loader

    npm install url-loader@1.1.2 --save-dev

    依旧是在开发环境安装url-loader的1.1.2版本

  4. 在webpack.config.js里配置webpack

    
//从node的系统模块中获得path
const path=require('path');

//指定webpack打包的起点（来源）和终点（目的地）
module.exports={
  //起点字符串路径
  entry:'./src/main.js',
  //终点对象
  output:{
    //路径（拼接字符串）
    path:path.resolve(__dirname,'dist'),
    //生成的文件名
    filename:'bundle.js',
  },
  module: {
    rules: [
      //  css-loader
      {
        //正则表达式匹配所有以.css结尾的文件
        test: /\.css$/,
        //style-loader是将css样式作用到DOM上
        //css-loader是将css文件处理
        //加载的顺序是从右往左加载
        use: [ 'style-loader', 'css-loader' ]
      },
      //  less-loader
      {
        //正则表达式匹配所有以.less结尾的文件
        test: /\.less$/,
        //加载的顺序是从右往左加载
        //less-loader将less文件编译成css
        //css-loader将css文件转换为浏览器可读的文件
        //style-loader将样式添加到DOM上
        /*use: [ 'style-loader', 'css-loader','less-loader' ]*/
        use:[
          {
            loader:'style-loader'
          },
          {
            loader:'css-loader'
          },
          {
            loader:'less-loader'
          },
        ]
      },
      //  url-loader
      {
        // 匹配png/jpg/gif/jpeg等图片资源
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 限制大小为20kb，默认是8kb
              limit: 20480,
              //name: 'img/[name].[hash:8],[ext]'
            }
          }
        ]
      }
    ]
  }
};

    url-loader里有个options的limit参数，这个参数就是限制上传图片的大小，如果上传的图片小于这个大小，webpack则会将这个图片资源利用base64转码成为字符串然后在浏览器前台进行显示

  5. 利用webpack将项目整体打包

npm run build

8、利用webpack的file-loader结合url-loader打包图片资源

因为url-loader打包的图片资源会有limit限制，图片大小在limit以下的资源会被base64转换为字符串编码，而大于limit以上的资源则会被以文件的形式存到项目里面，所以这个时候就需要用到file-loader，所以url-loader和file-loader最好是同时进行使用的。

  1. 在项目根目录新建img包用于存放图片

  2. 在需要图片的地方引入图片

  3. 利用npm命令安装file-loader

    npm install file-loader@3.0.1 --save-dev

  4. 在webpack.config.js里配置

    
//从node的系统模块中获得path
const path=require('path');

//指定webpack打包的起点（来源）和终点（目的地）
module.exports={
  //起点字符串路径
  entry:'./src/main.js',
  //终点对象
  output:{
    //路径（拼接字符串）
    path:path.resolve(__dirname,'dist'),
    //生成的文件名
    filename:'bundle.js',
    // 是dist目录作为静态资源的根目录
    publicPath:'dist/'
  },
  module: {
    rules: [
      //  css-loader
      {
        //正则表达式匹配所有以.css结尾的文件
        test: /\.css$/,
        //style-loader是将css样式作用到DOM上
        //css-loader是将css文件处理
        //加载的顺序是从右往左加载
        use: [ 'style-loader', 'css-loader' ]
      },
      //  less-loader
      {
        //正则表达式匹配所有以.less结尾的文件
        test: /\.less$/,
        //加载的顺序是从右往左加载
        //less-loader将less文件编译成css
        //css-loader将css文件转换为浏览器可读的文件
        //style-loader将样式添加到DOM上
        /*use: [ 'style-loader', 'css-loader','less-loader' ]*/
        use:[
          {
            loader:'style-loader'
          },
          {
            loader:'css-loader'
          },
          {
            loader:'less-loader'
          },
        ]
      },
      //  url-loader和file-loader
      {
        // 匹配png/jpg/gif/jpeg等图片资源
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 限制大小为20kb，默认是8kb
              limit: 20480,
              // 打包后的图片的命名规则
              name: 'img/[name]_[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
};

    因为file-loader和url-loader基本上是在一起用的，所以就可以直接写到url-loader里。同时注意name里的命名规则：img/表示存到终点根目录的img目录下，[name]文件名就是原文件名，[hash:8]表示利用hash算法存8位hash值，[ext]表示扩展名依旧是原有扩展名。加上了hash值的目的是为了防止打包后同名的图片会进行覆盖。

  5. 利用webpack命令将项目整体打包

    npm run build

9、利用webpack的babel-loader将ES6语法转换为ES5

虽然现在绝大多数浏览器都已经支持ES6语法了，但是为了兼容所有浏览器，ES5的语法基本上可以在所有浏览器上运行。babel工具可以帮助我们将ES6语法的代码直接转换为ES5的代码，这样就可以保证基本上所有的浏览器都可以运行。

  1. 正常写ES6的代码

  2. 利用npm安装babel-loader和babel的核心工具

    npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

  3. 在webpack.config.js里配置

    
//从node的系统模块中获得path
const path=require('path');

//指定webpack打包的起点（来源）和终点（目的地）
module.exports={
  //起点字符串路径
  entry:'./src/main.js',
  //终点对象
  output:{
    //路径（拼接字符串）
    path:path.resolve(__dirname,'dist'),
    //生成的文件名
    filename:'bundle.js',
  },
  module: {
    rules: [
      {
        // 匹配以.js为后缀的文件
        test: /\.js$/,
        // 排除（不匹配）node_modules或者bower_components
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  }
};

  4. 利用webpack将整个项目打包

    npm run build
F3nGaoXS
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack简单入门教程
04-26
webpack入门打包流程，带注释，供参考
webpack详解
热门推荐
qq_43743402的博客
03-24 6万+
一、什么是webpack 1、官方解释：从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包） 下面来说一下模块和打包的概念！ 2、前端模块化： 前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发） ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发 并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并且将
webpack看这一篇就够了
一个前端开发者
06-20 5万+
能够理解webpack基本概念和作用能够掌握webpack使用步骤能够使用webpack相关配置能够使用webpack开发服务器能够查阅使用webpack中文文档webpack官网现代 javascript 应用程序的 静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫把很多文件打包整合到一起, 缩小项目体积, 提高加载速度其中功能:less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩
什么是Webpack？（详细介绍）
HanXiaoXi_yeal的博客
01-07 1万+
Webpack​ webpack主要是打包，所以其核心存在两个部分，入口和出口，你可以把webpack加工想象成香肠加工厂，就是活猪进去，香肠出来的那种，但是如果每次加工都需要员工亲力亲为，那多麻烦那，所以我们考虑到了自动化配置。webpack存在功能类似的配置文件，让webpack通过配置，全自动的执行我们需要的编译操作。 ​ ​webpack分成四个部分，期中最核心的就是入口和出口，当然在入口和出口配置的同时我们还需要一些加载器和插件，这就是我们所谓的webpack配置文件。这个配置文件我们习惯把其命
Webpack详解
最新发布
李宥的博客
07-05 5511
- 静态模块打包工具 - 官网：[https://webpack.docschina.org/](https://webpack.docschina.org/) - 官网文档：https://webpack.docschina.org/concepts/
Webpack安装教程
张先生
08-10 3万+
本章为大家分享webpack4.0后的安装教程，自己刚接触时，网上大部分都是以前的安装教程，在过程真遇到些坑，为了大家不必浪费更多的时间，这里将为大家详细介绍 webpack是什么，它是一个根据模块依赖关系进行静态分析的工具，简单来说就是打包工具，在当前的前端打包工具的使用时是趋势的发展；下面进入正题 在安装webpack前，你必须为本机安装 node.js ；这个你直接去官网选择相应的系统直...
webpack4简单入门实例
10-18
主要介绍了webpack4简单入门实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack4 入门最简单的例子介绍
01-19
webpack在目前来说应该是前端用的比较多的打包工具了，那么对于之前没有接触过这块的该怎么办呢？答案很明显嘛，看资料，查文档，自己去琢磨，自己去敲一敲，跑一跑； Webpack是当下最热门的前端资源模块化管理和...
webpack（涉及基本配置）
weixin_44749729的博客
07-20 948
webpack webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。 五大核心 1.Entry：入口(Entry)指示 webpack 以哪个文件为入口起点开始打包 2.Output:输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去 3.Loa
webpack（超详细）
weixin_59127121的博客
09-19 1401
一个静态模块打包器。但，webpack的配置项十分的多，如果我们希望在构建测试/准生产代码时使用A版本配置项，而在构建生产代码时使用B版本配置项，我们将面临着来回修改配置项的痛楚。通过上一节，我们已经可以使用打包工具去将写好的代码进行打包了，但是在操作的过程中大家可能会发现有一个比较麻烦的地方：修改一次代码就得重新打包一次，这种感觉有点类似于之前的。在浏览器中执行的时候会报错，需要注意，代码是没有问题的，问题是浏览器不兼容（浏览器不认识模块化的语法，需要使用特定的工具进行转化）。
VUE-webpack超详细教程
ICanWin_lll的博客
01-21 2万+
一.认识webpack 官网解释：从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 从模块化和打包两个角度来理解： 模块化： webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系，而且不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中都可以被当做模块来使用 打包: 合并成一个或多个包(Bundle),并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转
【webpack】详解
qq_40992225的博客
08-04 1474
loader是webpack中一个非常核心的概念。在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。对于webpack本身的能力来说，对于这些转化是不支持的。那怎么办呢？.........
想聊聊 webpack, 如何来配置 webpack 以及基本使用
web00_11的博客
08-15 794
webpack 的基本使用 什么是 webpack 概念：webpack 是前端项目工程化的具体解决方案。 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性 能优化等强大的功能。 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。 注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。 在项目中安装 webpack 在终端运行如下的命令，安装 webpack 相关的两个
（1）webpack介绍
Java田根旺
01-22 2475
一、webpack简介 webpack=Web Package，webpack是一个现代JS应用程序的静态模块打包器（module bundler） 模块（模块化开发，可以提高开发效率，避免重复造轮子） 打包（将各个模块，按照一定的规则组装起来） 官网：http://webpack.js.org/ 特点：1.功能强大（打包、构建、发布Web服务）2.学习成本高 我们之前学习过一个自动化构建工具，叫Gulp，但是现在企业不在适用，因为由于webpack越来越强大，将Gulp已经淘汰掉了。 二、如
webpack的作用
~
03-19 5083
1.webpack的由来 由于浏览器解析不了es6及以上的语法，无法编译less/sacc等，所以我们需要各种插件去es6编译es5、将less编译成css，比较杂乱，所以就有了webpack将这些插件组合在一起 2.webpack的概念 webpack是一种前端资源构建工具，一个静态模块打包器 举个例子：vue中的入口文件会导入jquery，less文件等 ，将这些导入形成依赖关系图，打包后输出 3.webpack的5个核心概念 a.entry入口 入口指示webpack以哪个文件为
webpack基础教学，简单易懂（一）（什么是webpack以及webpack的基本使用）
随便写写
03-16 1947
webpack基础教学，简单易懂（一）（什么是webpack以及webpack的基本使用）
webpack的面试题（吐血整理）
m0_73460278的博客
09-02 1万+
webpack的面试题（吐血整理）
webpack入门和实战(一)--webpack配置及技巧
solar_Lan的博客
09-18 5万+
一、全面理解webpack 1、什么是 webpack？        webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ，文档地址是https://webpack...
史上最全webpack带你深入了解webpack
m0_62371650的博客
09-14 2157
史上最全webpack带你深入了解webpack
webpack优化入门详解
05-26
Webpack 是一个常用于打包 JavaScript 应用程序的工具，它的主要作用是将多个 JavaScript 文件打包成一个或多个文件，并且可以处理其他资源文件，如 CSS、图片等。在实际开发中，随着项目规模的增大，Webpack 打包...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值