webpack基础

已于 2023-12-18 19:22:45 修改
阅读量526 收藏 3
点赞数
文章标签： webpack 学习 前端
于 2023-10-26 22:42:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41604686/article/details/134057728
版权

学习视频：https://yk2012.github.io/sgg_webpack5/project/vue-cli.html

一、介绍和基本使用

1、webpack本身功能较少，只能处理js资源，一旦遇到css等其他资源会报错
2、基本使用：
在这里插入图片描述

  • 创建js/count.js、js/sum.js、src/main.js
//js/count.js
export default function (a,b) {
  console.log(a+b);
}
//js/sum.js
export default function(...arg) {
  return arg.reduce((x,y) => x+y,0);
}
//src/main.js
import count from "../js/sum"
import sum from "../js/sum"
console.log(count(1,2));
console.log(sum(1,2,3,4,5));
  • 创建public.index.html，引入src/main.js，直接在vscode中使用Live Server打开，控制台报错。（原因：浏览器不能识别ES6的模块化）
    在这里插入图片描述
  • 通过 npm init创建 package.json 文件，将main属性，修改为正确的入口js文件路径
    在这里插入图片描述
  • 通过npx webpack ./src/main.js --mode=development命令去打包，默认打包文件输出到根目录到dist文件夹里面。其中mode取值为development或者production，前者是在开发模式中打包编译，编译成浏览器能够识别的语法；后者是在生产环境下打包，会对代码进行压缩（命令中加上./src/main.js是要指明要打包的是哪一个文件 ）

二、基本配置

1、5大核心概念

  • 1、entry（入口）
    可以配置一个或多个文件，指示webpack从哪个文件开始打包
  • 2、output（输出）
    指示webpack打包完的文件输出到哪里去，如何命名等，有默认配置
  • 3、loader（加载器）
    webpack本身只能处理js、json等资源，其他资源如scss、lass需要借助loader，webpack才能解析
  • 4、plugins（插件）
    扩展webpack的功能
  • mode（模式）
    主要有两种模式：
    开发模式：development
    生产模式：production（对代码进行各种优化）
//webpack.config.js
const path = require("path")//nodejs的核心模块，专门用来处理路径问题
module.exports = {
  //入口
  entry: "./src/main.js",
  //出口
  output: {
    //js文件的输出路径，其他文件如图片，需要在配置图片loader那边，通过gererator.name属性去配置
    //--dirname 是nodejs的变量，代表当前文件的文件夹目录
    //下面两句意思是，打包出来的所有文件及目录都放到 dist 目录下面，main.js 文件放到 dist/static/js 下面
    //这里的“dist”可以改为“dist/static/js”，下面的filename改为main.js，但是这样的话，打包出来的所有资源（如image、fonts）都会放到 “dist/static/js” 下面，
    path: path.resolve(__dirname, "dist"),
    //文件名
    //filename: "main.js"
    filename: "static/js/main.js"	//输出到dist/js/main.js中
  },
  //加载器
  module: {
    rules: [
      //loader的配置
    ]
  },
  //插件
  plugins: [
    //plugin的配置
  ],
  //模式
  mode: "development"
}

使用该代码可以直接使用 npx webpack 打包，不需要在命令中指定入口文件。
注：代码、文件名不可输入，否则报错

三、处理css资源

npm install --save-dev css-loader
webpack仅支持处理js、json资源，如果 main.js 里面引入css，打包会报错，这就需要对应的loader去处理css资源。

  • 创建 src/css/index.css文件
  • 修改webpack.config.js中的加载器规则，过程是先把css资源编译成commonjs的模块到js中，然后把js中的css通过创建style标签的方法，添加到html中。
//webpack.config.js
//加载器
module: {
  rules: [
    //loader的配置
    {
      test: /\.css$/i,  //使用正则匹配.css后缀的文件
      //执行顺序：从右到左（从上到下）
      //loader: "",	//使用loader属性，只能配置一个loader
      use:[		//使用user属性，可以配置多个loader
        "style-loader", //将js中的css通过创建style标签的方式，添加到html中
        "css-loader"  //将css资源编译成commonjs的模块到js中
      ]
    }
  ]
},
  • main.js里面引入对应src/css/index.css
    import "./css/index.css"
  • 执行打包命令npx webpack
    在这里插入图片描述

四、处理less资源

$ npm install less less-loader --save-dev
  • 步骤跟三类似，只是把css文件换成了less文件，
  • 修改webpack.config.js中的加载器规则
//webpack.config.js
//加载器
module: {
   rules: [
     //loader的配置
     {
       test: /\.css$/i,  //使用正则匹配.css后缀的文件
       //执行顺序：从右到左（从上到下）
       use:[
         "style-loader", //将js中的css通过创建style标签的方式，添加到html中
         "css-loader"  //将css资源编译成commonjs的模块到js中
       ]
     },
     {
       test: /\.less$/,
       use: [
         "style-loader",
         "css-loader",
         "less-loader" //将less编译成css文件
       ]
     }
   ]
 },

五、其他loader

  • sass-loader
$ npm install sass-loader sass webpack --save-dev

//webpack.config.js
{
  test: /\.s[ac]ss$/i,	//这里要匹配sass和scss
  use: [
    // 将 JS 字符串生成为 style 节点
    'style-loader',
    // 将 CSS 转化成 CommonJS 模块
    'css-loader',
    // 将 Sass 编译成 CSS
    'sass-loader',
  ],
},
  • stylus-loader
$ npm install stylus stylus-loader --save-dev

//webpack.config.js
{
	test: /\.styl$/,
 	use: [
 		"style-loader",
 		"css-loader",
		"stylus-loader"	// 将 Stylus 文件编译为 CSS
	], 
},

六、处理图片资源 type: “asset”

webpack4的时候需要用url-loader去处理图片资源，webpack5只需要配置type: asset，其内部将使用url-loader去处理图片，不需要单独配置（当前使用5.72.0版本，不在webpage.config.js 中处理，打包出来的文件也将图片打包出来了，没有影响，教程评论提示不处理，部署上线可能存在问题，待验证）
css、sass、scss等资源中使用图片时，直接引入，在webpage.config.js中增加如下配置：

//webpack.config.js
{
  test: /\.(png|jpe?g|gif|webp|svg|jpg)$/,  //匹配多种后缀的图片
  type: "asset",
  parser: {
    dataUrlCondition: {
      //小于10kb的图片转化为base64
      //优点：减少请求数量。缺点：体积会变大
      maxSize: 10 * 1024  //10kb
    }
  }
}

上述代码中，小于10kb的图片，会被转化成base64，代码里直接引入base64的地址；大于64kb则直接复制新的图片至输入目录。

七、修改输出文件目录

  • 修改输出的js目录
    output.filename 输出的是js的路径，调整目录，就在js文件名的前面添加目录名称即可
//webpack.config.js
output: {
  //js文件的输出路径
  //--dirname 是nodejs的变量，代表当前文件的文件夹目录
  //下面两句意思是，打包出来的所有文件及目录都放到 dist 目录下面，main.js 文件放到 dist/static/js 下面
  //这里的“dist”可以改为“dist/static/js”，下面的filename改为main.js，但是这样的话，打包出来的所有资源（如image、fonts）都会放到 “dist/static/js” 下面，
  path: path.resolve(__dirname, "dist"),
  //文件名
  filename: "static/js/main.js"
},
  • 修改输出的image目录
    需要配置image loader中的generator.filename属性，/前面是路径，后面是图片名称，下面代码表示，所有图片，均输出到static/images目录下吗，名称为 hash.ext
//webpack.config.js
{
  test: /\.(png|jpe?g|gif|webp|svg|jpg)$/,  //匹配多种后缀的图片
  type: "asset", //asset 默认会把文件转成base64
  parser: {
    dataUrlCondition: {
      //小于10kb的图片转化为base64
      //优点：减少请求数量。缺点：体积会变大
      maxSize: 10 * 1024  //10kb
    }
  },
  generator: {
    //输出图片目录及名称
    //hash是原文件名，也叫图片id，是根据文件内容生成的，是唯一的
    //hash后面加 :10 表示取hash的前10位字符，这样就缩短了文件名，缩小的问文件体积
    //ext是文件扩展名
    //query是文件查询的参数，可写可不写
    filename: "static/images/[hash:10][ext][query]"
  }
}

八、自动清空上次打包的内容

在出口的配置中，设置clean: true

//webpack.config.js
//出口
output: {
  //js文件的输出路径
  //--dirname 是nodejs的变量，代表当前文件的文件夹目录
  path: path.resolve(__dirname, "dist"),
  //文件名
  filename: "js/main.js",
  //自动清空上次打包的内容
  //执行：在打包前，将path整个目录内容清空，在进行打包输出
  clean: true
},

九、处理字体图标资源

以 iconfont 为例：

  • 下载图表库，将 iconfont.css 文件复制到项目目录的 css 目录中，将 iconfont.ttf、iconfont.woff、iconfont.woff2 文件复制到 css/fonts 目录中，修改 iconfont.css 中 @font-face 的src
  • html中使用图标
<span class="iconfont icon-wodekanjia"></span>
  • main.js 中引入字体图标css
import "./css/iconfont.css"
  • 配置字体图标
//webpack.config.js
//加载器
 module: {
   rules: [
     //loader的配置
     {
       test: /\.(ttf|woff2?)$/,
       type: "asset/resource", //asset/resource 不会把文件转成base64
       generator: {
         filename: "static/fonts/[hash][ext][query]"
       }
     }
   ]
 },

注：音视频这种的其他资源，也可以通过type:"asset/resource"处理，只需要将后缀加到 test 属性里面，然后 generator.filename 里面写上对应的路径/文件名即可。

十、处理js资源

webpack 对 js 的处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器中运行，所以我们希望做一些兼容性处理。

  • 上面代码中，如果 src/main.js 或者 count.js、sum.js 中使用了剪头函数，或者其他 ES6+ 语法，打包出来的 dist/static/js/main.js 文件中，仍然是剪头函数，或者 ES6+ 语法，这种语法在高级浏览器中运行没有问题，但是在低级浏览器（如之前的IE）中，浏览器是无法识别运行的，所以还需要对 js 资源做一些处理。

其次，开发者，团队对代码格式有严格要求的，我们不能肉眼去检测代码格式，需要使用专业的工具来检测。

  1. 针对 js 兼容性处理，使用 Babel 来完成
  2. 针对代码格式，使用 Eslint 来完成（若无硬性要求，这一步其实可以不要，因为使用 Eslint 开发过程中，对格式要求极为严格，容易使代码报错，项目无法运行）

流程是：先完成 Eslint 检测代码格式无误后，再由 Babel 做代码兼容性处理。

十一、Babel

javascript编译器。
主要用于将ES6语法编写的代码转换为后向后兼容的javascript语法，以便能够运行在当前和旧版本的浏览器或其他环境。

1、配置文件

配置文件有多种写法

  • babel.config.*新建文件，位于项目根目录
    · babel.config,js
    · babel.config.json
  • babelrc.*新建文件，位于根目录
    · .babelrc
    · .babelrc.js
    · .babelrc.json
  • packge.json和babel：不需要创建文件，在原有文件基础上写

Babel 会查找和自动读取他们，所以以上配置文件只需存在一个即可。

2、具体配置

$ npm install -D babel-loader @babel/core @babel/preset-env webpack

以babel.config.js配置文件为例：

module.exports = {
	presets: [],
}

1、presets预设
就是一组Babel插件，扩展Babel功能

  • @babel/preset-env：一个智能预设，允许开发者使用最新的Javascript。
  • @babel/preset-react：一个用来编译 React jsx 语法设置的预设
  • @babel/preset-typescript：一个用来编译TypeScript的语法预设
    使用：
//webpack.config.js
{
  test: /\.js$/,
  exclude: /(node_modules)/,	//不处理node_modules目录下的文件
  loader: 'babel-loader',
  options: {
      presets: ['@babel/preset-env']
  }
}

或者将上述代码中的options去掉，新增babel.config.js文件，内容为：

module.exports = {
  presets: ['@babel/preset-env']
}

十二、plugin

1、处理html资源

上面的代码，是将打包出来的main.js文件，提前根据设置的输出路径，手动在 index.html 里面通过<script src="../dist/static/js/main.js"></script>标签引入，才能正常使用 main.js 的代码，这样比较麻烦，如果是多个文件，还要手动去一一引入。所以这里用插件去处理：

$ npm install --save-dev html-webpack-plugin

//webpack.config.js
//插件
plugins: [
  //plugin的配置
  new HtmlWebpackPlugin({
    //模版：以public/index.html文件为基础，创建新的html文件，
    //该文件是在原文件的基础上，新增script标签，script否认路径是打包出来的js路径
    //新的html文件的特点：
    //1、机构和原来的一直。
    //2:自动引入打包输出的资源。
    //3：引入的资源是带有 defer 属性的。
    //defer是一部加载js，不阻塞dom解析，dom解析完成后执行js，多个defer会按顺序执行
    template: path.resolve(__dirname, "public/index.html"),
  })
],

原html文件：
在这里插入图片描述
打包输出的新的html文件：
在这里插入图片描述

十三、搭建开发服务器（webpack-dev-server）

$ npm install -D webpack-dev-server

注：如果是mac电脑，且在 vscode 的终端下载成功，但是查询 webpack -v 仍然显示 webpack-dev-server not installed 的情况下，可以试一下在 mac 的终端去执行该命令。

vscode终端下载完以后，查询版本显示：
在这里插入图片描述

mac终端下载完以后，查询版本显示：
在这里插入图片描述

//webpack.config.js
//模式
mode: "development",
//开发服务器：不会输出资源，在内存中编译打包
devServer: {
  host: "127.0.0.1",//启动服务器域名
  open: true, //启动服务器端口号
  port: 8000  //是否自动打开浏览器
},

启动命令npx webpack serve
或者在 package.json 的 scripts 里面配置命令"serve": "webpack-dev-server --mode development",，然后使用 npm run serve 启动。

以上功能相关代码见链接: https://pan.baidu.com/s/1cZuSpx1Le2xYDKTHNEe1ZQ?pwd=6pgi 提取码: 6pgi

十四、生产模式、开发模式webpack文件配置

  • 根目录下创建config目录，将原 webpack.comfig.js文件复制两份到 config 里面，分别命名webpack.dev.js 、webpack.prod.js
  • 修改webpack.dev.js的配置
    · 将文件中的绝对路径，改为相对路径（path、__dirname相关功能中的路径）
    · dev模式下，不需要输出文件，将 output.path 设置为 undefined
    · 不需要打包输出，所以将output.clean 去掉
    · mode设置为 "development"
    · 配置 devServer选项
    · 打包命令 npx webpack serve --config ./config/webpack.dev.js
  • 修改webpack.prod.js的配置
    · 将文件中的绝对路径，改为相对路径（path、__dirname相关功能中的路径）
    · 需要输出文件，设置 path: path.resolve(__dirname, "../dist"),
    · 配置 output.clean=true 在打包输出目录前，先删除上一次打包的目录
    · mode 设置为production
    · 配置 devServer选项
    · 启动命令npx webpack --config ./config/webpack.prod.js

可以修改 packge.json 中的scripts配置，简化启动命令：

"scripts": {
   "start": "npm run dev", //这里实际执行的是下一行的命令
   "dev": "webpack serve --config ./config/webpack.dev.js",
   "build": "webpack --config ./config/webpack.prod.js"
},

其中，start 配置，可以使用 npm run start或者npm start启动，dev和build只能由 npm run XXX启动。

十五、css处理

1、提取css为单独的文件

css文件在此前是被打包到 js 文件中的，是通过js运行时，动态生成的 style标签
这样文件过大的话，会出现闪屏现象，用户体验不好
所以应该时单独的css文件，通过 link 标签加载性能才好（外链引入）

使用 mini-css-extract-plugin

$ npm install --save-dev mini-css-extract-plugin

修改 webpack.prod.js 文件：

//webpack.prod.js
//1、引入相关loader
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //引入插件
//2、将 module.ruls 中原来的 style-loader 替换为 MiniCssExtractPlugin.loader
//加载器
module: {
  rules: [
	{
	  test: /\.css$/i,  //使用正则匹配.css后缀的文件
	  //执行顺序：从右到左（从上到下）
	  use:[
	    // "style-loader", //将js中的css通过创建style标签的方式，添加到html中
	    MiniCssExtractPlugin.loader, //将css提取成单独的文件
	    "css-loader"  //将css资源编译成commonjs的模块到js中
	  ]
	},
	{
	  test: /\.less$/,
	  use: [
	    // "style-loader", //将js中的css通过创建style标签的方式，添加到html中
	    MiniCssExtractPlugin.loader, //将css提取成单独的文件
	    "css-loader",
	    "less-loader" //将less编译成css文件
	  ]
	},
  }
}
//3、将插件调用
plugins: [
	new MiniCssExtractPlugin({
	  filename: "static/css/main.css"//指定文件路径及名称，不指定默认输出到 dist/main.css
	})
]

提取前的引入：
在这里插入图片描述
提取后的引入：
在这里插入图片描述

2、css兼容性处理（postcss-loader）

部分低版本浏览器无法正确读取 css3 样式，这里可以自动处理其兼容性问题。

  • 下载包
$ npm i postcss-loader postcss postcss-preset-env -D
  • 修改 webpack.prod.js 文件中 css、less、scss loader
    配置项需要写在css-loader之后，less/sass-loader之前
//webpack.prod.js
//加载器
module: {
  rules: [
    //loader的配置
    {
      test: /\.css$/i,  //使用正则匹配.css后缀的文件
      //执行顺序：从右到左（从上到下）
      use:[
        // "style-loader", //将js中的css通过创建style标签的方式，添加到html中
        MiniCssExtractPlugin.loader, //将css提取成单独的文件
        "css-loader",  //将css资源编译成commonjs的模块到js中
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [
                "postcss-preset-env",
                {
                  browsers: "last 2 versions"	//兼容浏览器最新的两个版本
                }
              ]
            }
          }
        }
      ]
    },
    {
      test: /\.less$/,
      use: [
        // "style-loader", //将js中的css通过创建style标签的方式，添加到html中
        MiniCssExtractPlugin.loader, //将css提取成单独的文件
        "css-loader",
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [
                "postcss-preset-env"
              ]
            }
          }
        },
        "less-loader" //将less编译成css文件
      ]
    }
  ]
},
  • 修改 package.json 的 browserslist
 "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ]

代码中是针对市面上 99% 的浏览器（不包括IE这种已经遗弃的浏览器）的最新的两个版本去做兼容处理。
打包后的css如下：
在这里插入图片描述

3、封装样式 loader 函数

将样式loader公共的内容提取出来

//webpack.prod.js
function getStyleLoader(pre){
  return [
    // "style-loader", //将js中的css通过创建style标签的方式，添加到html中
    MiniCssExtractPlugin.loader, //将css提取成单独的文件
    "css-loader",  //将css资源编译成commonjs的模块到js中
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env"
          ]
        }
      }
    },
    pre
  ].filter(Boolean)
}

//module.ruls里面调整
{
  test: /\.css$/i,  //使用正则匹配.css后缀的文件
  //执行顺序：从右到左（从上到下）
  use: getStyleLoader(),
  // use: [
  //   // "style-loader", //将js中的css通过创建style标签的方式，添加到html中
  //   MiniCssExtractPlugin.loader, //将css提取成单独的文件
  //   "css-loader",
  //   {
  //     loader: "postcss-loader",
  //     options: {
  //       postcssOptions: {
  //         plugins: [
  //           "postcss-preset-env"
  //         ]
  //       }
  //     }
  //   }
  // ]
},
{
  test: /\.less$/,
  use: getStyleLoader("less-loader"),
  // use: [
  //   // "style-loader", //将js中的css通过创建style标签的方式，添加到html中
  //   MiniCssExtractPlugin.loader, //将css提取成单独的文件
  //   "css-loader",
  //   {
  //     loader: "postcss-loader",
  //     options: {
  //       postcssOptions: {
  //         plugins: [
  //           "postcss-preset-env"
  //         ]
  //       }
  //     }
  //   },
  //   "less-loader" //将less编译成css文件
  // ]
},

4、css压缩（MiniCssExtractPlugin）

$ npm install css-minimizer-webpack-plugin --save-dev

//1、引入插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//2、使用插件
plugins: [
	new CssMinimizerPlugin(), //压缩css文件
]

5、生产模式下，默认会把html、js文件进行压缩，不需要额外配置。

十六、基础总结

1、两种开发模式

  • 开发模式：代码能编译自动化运行
  • 生产模式：代码编译优化输出

2、webpack基本功能

  • 开发模式：可以编译 ES Module 语法
  • 生产模式：可以编译 ES Module 语法，压缩 js 代码

3、webpack配置文件

  • 5个核心概念
    · entry：入口
    · output：出口
    · loader：加载器，处理css、图片、字体图标，js高级语法转换
    · plugin：插件，处理输出的文件内容、压缩css、将css输出到指定目录
    · mode：运行模式
    · devServer 配置开发模式下的 server

4、指令脚本用法

  • webpack直接打包输出
  • webpack serve期待开发服务器，内存编译打包，没有输出

相关代码：链接: https://pan.baidu.com/s/17w2z0vOYoYgvlCTF–2Lpg?pwd=j0kd 提取码: j0kd

hsdjhaiwhdnjw
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack基础知识学习demo
06-29
webpack基础知识学习demo
WebPack基础知识详解
08-31
Webpack 是一款强大的前端构建工具，它主要负责处理和打包 JavaScript 模块，以及各种浏览器无法直接运行的扩展语言，如 SCSS、TypeScript 等。Webpack 的核心概念是模块化，它将项目视为一个整体，通过入口文件（如...
Webpack基础
qq_30907143的博客
08-18 152
简洁说明什么是Webpack,为什么需要打包，什么是Loader，Plugin，以及module，chunk，bundle的区别
webpack基础教程
Dormiveglia-flx的博客
12-07 902
webpack基础教程
webpack基础知识
szw2377132528的博客
02-21 197
webpack相关基础概念
webpack 基础
L58656231的博客
12-28 578
webpack基础
webPack基础
weixin_45985175的博客
02-13 612
package.json name 包名称 version 版本号 语义化 main 包执行的入口 scripts 自定义脚本 //package.json { "name": "try", "version": "1.0.0", "description": "", "main": "module.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1"
webpack 基础概念
m0_59795537的博客
12-16 1013
webpack基础概念
webpack基础相关
qq_42727641的博客
09-19 367
它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去，输出的文件就是编译好的文件，就可以在浏览器端运行了。修改css loader中style-loader：因为style-loader是将css在打包到js中通过生成style标签引入的，而MiniCssExtractPlugin.loader是单独打包css文件使用link引入的。下载依赖包：npm install css-minimizer-webpack-plugin --save-dev。
webpack基础配置
weixin_55556204的博客
05-10 1230
webpack是一个JavaScript应用程序的静态模块化打包器，意味着webpack在不进行特殊配置的情况下就只认识JavaScript一种语言，只能处理JavaScript这一种语言 为什么要打包： 一般项目中js文件数目很大且相互之间有依赖关系，如果不打包，直接让这些文件保持分离状态，则我们需要关心加载顺序 如果不打包，这些js文件处于分离状态，我们需要分开请求加载，则消耗性能 通过打包，将这些文件打包为到dist文件夹内，则可以帮助我们解决上述问题 webpack的打包过程： 从默认的入.
webpack 基础概念理解
浮生离梦的博客
05-23 341
一、webpack 基础概念理解 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack 支持 AMD (RequireJS)、ES Modules 和CommonJS 等模式，如图所示： webpack 在 V1 时，功能主要为 编译、打包
webpack基础配置教程
06-27
webpack基础配置教程
webpack基础 前端初学者
10-29
内涵webpack一些基本的知识，包括ts、js、css、less、ts、vue的一些基本配置。
webpack生产环境下的配置
web
07-16 400
在入口文件(src/index.js)引入@babel/polyfill。在入口文件引入 @babel/polyfill。根配置，配置eslint标准。方案2和方案三选一种即可。
webpack优化
web
07-16 485
**
【webpack开发环境下的配置】
web
07-16 413
/ 开发服务器， devServer: 自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）// 启动devServer指令为：npx webpack-dev-server。// 特点：只会在内存中编译打包，不会有任何输出。其他资源: 指不需要处理的资源如字体图标。以上两个命令都可以，任选一个就行。
【漏洞复现】Next.js框架存在SSRF漏洞(CVE-2024-34351)
最新发布
siu~
07-19 307
ZEIT Next.js 13.4版本至14.1.1之前版本存在代码问题漏洞，该漏洞源于存在服务器端请求伪造 (SSRF) 漏洞
vue 环境变量那些事
weixin_42028153的博客
07-10 560
env.production 代表的生产环境变量也就是上线以后使用的。.env.development 代表的开发环境变量。取：import.meta.env.VITE_变量名。取：process.env.VUE_APP_变量名。总则：使用 .env.环境名字文件去定义，运行命令的时候指定环境。vite+vue3项目（默认VITE开头，其他开头的需要配置）存：VUE_APP_变量名 = xxx。比如：.env 代表所有环境变量使用的一些变量。vue-cli项目（webpack+vue2）

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值