2020年你不能不知道的webpack基本配置
2020/2/24 14:02:41
本文主要是介绍2020年你不能不知道的webpack基本配置,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
在很久很久以前,在我们前端还只是页面切图仔的年代,我们开发一个html页面,通常会遇到这些情况:
- 需要引入十几个css和js文件,而且因为他们彼此间有着依赖关系,所以引入的顺序还不能乱。
- 传统的
html+css+js
开发方式不能不能很好地运用less/scss
等css预处理器以及ES6+
的高级语法。 - 代码复用性差,可维护性差。
此时就需要一个处理这些问题的工具,webpack应运而生。
webpack可以看做是模块打包工具:它将各种静态资源(比如:javaScript
文件,图片文件,css
文件等)视为模块,它能够对这些模块进行解析优化和转换等操作,最后将它们打包在一起,打包后的文件可用于在浏览器中使用。
相关推荐
本人github: github.com/Michael-lzg
我的掘金:https://juejin.im/user/5b52fd...
从零开始构建一个webpack项目
总结几个webpack打包优化的方法
webpack的优点:
- 代码转换:
typeScript
编译成javaScript
、scss,less
编译成css
. - 文件优化:压缩
javaScript
、css
、html
代码,压缩合并图片。 - 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
- 模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类合并成一个文件。
- 自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器。
- 扩展性强,插件机制完善。
webpack打包过程:
1.利用babel完成代码转换,并生成单个文件的依赖
2.从入口开始递归分析,并生成依赖图谱
3.将各个引用模块打包为一个立即执行函数
4.将最终的bundle文件写入bundle.js中
Webpack 的四大核心:
- entry:js 入口源文件
- output:生成文件
- loader:进行文件处理
- plugins:插件,比 loader 更强大,能使用更多 webpack 的 api
Entry
webpack 应该使用哪个模块做为入口文件,来作为构建其内部依赖图的开始。进去入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的,每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。
单⼊⼝:entry 是⼀个字符串
module.exports = { entry: './src/index.js' }
多⼊⼝:entry 是⼀个对象
module.exports = { entry: { index: './src/index.js', manager: './src/manager.js' } }
Output
告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,这些都可以在webpack的配置文件中指定。
单⼊⼝配置
module.exports = { entry: './src/index.js', output: { filename: 'bundle.js’, path: __dirname + '/dist' } };
多⼊⼝配置
module.exports = { entry: { app: './src/app.js', search: './src/search.js' }, output: { filename: '[name].js', path: __dirname + '/dist' } }
通过[name]占位符确保⽂件名称的唯⼀
Loader
loader
让 webpack
能够去处理那些非 javaScript
文件(webpack
自身只理解 javaScript
)。loader
可以将所有类型的文件转换为 webpack
能够处理的有效模块,然后你就可以利用 webpack
的打包能力,对它们进行处理。
loader的特点
- 一个Loader 的职责是单一的,只需要完成一种转换
- 一个Loader 其实就是一个Node.js 模块,这个模块需要导出一个函数
- loader 总是从右到左地被调用。
常用的loader
处理样式
-
css-loader
: 加载.css 文件, -
style-loader
:使用 style 标签将css-loader
内部样式注入到我们的 html 页面 -
less-loader, sass-loader
: 解析css预处理器
处理 js
- 让你能使用最新的js代码(ES6,ES7...)
- 让你能使用基于js进行了拓展的语言,比如React的JSX;
处理文件
处理图片资源时,我们常用的两种loader是file-loader
或者url-loader
,两者的主要差异在于。url-loader
可以设置图片大小限制,当图片超过限制时,其表现行为等同于file-loader
,而当图片不超过限制时,则会将图片以base64
的形式打包进css文件,以减少请求次数
处理.vue文件
vue-loader
是 webpack
的加载器模块,它使我们可以用 .vue
文件格式编写单文件组件。单文件组件文件有三个部分,即模板、脚本和样式。 vue-loader
模块允许 webpack
使用单独的加载器模块(例如 sass 或 scss 加载器
)提取和处理每个部分。该设置使我们可以使用 .vue
文件无缝编写程序。
开发一个loader
需求:手写一个
这篇关于2020年你不能不知道的webpack基本配置的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
loader
,将 'kobe'
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程