webpack 学习之 五大核心

为什么用 webpack

webpack 官网传送门 ...

  • 官网:webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。
  • 总结:汇总所有模块,整理出一个或者多个 bundles 。如果有浏览器不认识的语言,通过其核心 module 让浏览器能识别的语言。如果有未能处理的情况,可以尝试 plugins 去解决。

五大核心之:入口(entry)

js 复制代码
 module.exports = {
 // 让webpack 知道,从那个文件开始,相当于一个树形的根元素的指定
  entry: './path/to/my/entry/file.js',
};

五大核心之:出口(output)

js 复制代码
module.exports = {
  output: {
  	// 配置输出的 bundles 名称,名字自己定义
    filename: 'bundle.js',
  },
};

五大核心之:加载器(module)

  • test 属性,识别出哪些文件会被转换。
  • use 属性,定义出在进行转换时,应该使用哪个 loader。
js 复制代码
module: {
	// 「在 require()/import 语句中被解析为 '.txt' 的路径」时,
	//  对它打包之前,先 use(使用) raw-loader 转换一下。
   rules: [{ test: /\.txt$/, use: 'raw-loader' }],
 },

五大核心之: 插件(plugin)

js 复制代码
module.exports = {
	// html-webpack-plugin 为应用程序生成一个 HTML 文件
	// 并自动将生成的所有 bundle 注入到此文件中。
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

五大核心之:模式(mode)

js 复制代码
module.exports = {
// 如果没有设置,webpack 会给 mode 的默认值设置为 production
 mode: 'development',
};
相关推荐
南望无一8 小时前
webpack性能优化和构建优化
前端·webpack
dwqqw1 天前
opencv图像库编程
前端·webpack·node.js
昔冰_G2 天前
解锁webpack:对html、css、js及图片资源的抽离打包处理
前端·javascript·css·webpack·npm·html·打包
明远湖之鱼2 天前
手把手带你实现一个自己的简易版 Webpack
前端·webpack·源码
jserTang2 天前
前端构建工具漫谈:Webpack、Vite、Turbopack 与 Rspack 的终极对决
前端·webpack·vite
萌萌哒草头将军3 天前
尤雨溪 VoidZero 公司推出新一代ts文件打包工具 tsdown 🚀🚀🚀
vue.js·webpack·typescript
执梦起航4 天前
webpack理解与使用
前端·webpack·node.js
二川bro5 天前
webpack 中 chunks详解
前端·webpack·node.js
果酱小米粥5 天前
关于使用webpack构建的vue项目,如何使用windicss
前端·webpack·node.js
尘寰ya9 天前
前端面试-工程化(webpack、vite)
前端·面试·webpack