webpack学习笔记(1)--webpack.config.js
2024-08-31 04:04:30
主要的信息都是来自于下方所示的网站
https://webpack.docschina.org/configuration
从 webpack 4.0.0 版本开始,可以不用通过引入一个配置文件打包项目。然而,webpack 仍然还是高度可配置的 ,并且能够很好的满足需求。
首先总结下个人理解的,webpack 是一个js的应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个bundle。有以下几个优点
- 1.能将多个资源打包成一个或者较少的文件,后续的HTTP交互时,请求数量可能会减少,增加响应速度
- 2.能将资源转化为最适合浏览器的格式,提升应用的性能,只去引用被应用使用的资源,如懒加载资源 (只在需要的时候才加载相应的资源)
- 3.提供了很重要的实时加载和热加载的功能,节省了开发时间
1 entry 入口
entry point 用来指示使用哪个模块来作为构建其内部依赖图的开始, 默认是./src/index.js,可以配置一个或多个入口
例如多个入口:
'''
entry: {
app: './src/index.js',
showlog: './src/showlog.js'
},
'''
单个文件可以写成:
module.exports = {
entry: {
main: './path/to/my/entry/file.js'
}
};
简写:
module.exports = {
entry: './path/to/my/entry/file.js'
};
2 output 出口
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,主输出文件默认为 ./dist/main.js
,其他生成文件的默认输出目录是 ./dist
。
const path = require('path'); module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
上面的示例,通过 output.filename
和 output.path
属性,来告诉 webpack bundle 的名称,以及我们想要 bundle 生成(emit)到哪里。output只可以指定一个输出的配置
output.filename 输出文件名
output.path 输出文件所在目录
最新文章
- MongoDB学习笔记三—增删改文档上
- dynamic和var的区别
- HDFS的运行原理
- 新增了个job
- Windows Azure Web Site (17) Azure Web Site 固定公网IP地址
- iOS学习02C语言分支结构
- Xamarin.Android模拟器提示HAX kernel module is not Installed
- ajax 请求超过了5s 还没有返回 的话 就自动取消
- python 基于小顶堆实现随机抽样
- wancms从apache迁移至nginx
- class0513(html)
- WebAPI接口测试之matthewcv.WebApiTestClient
- Linux命令备忘录
- delphi处理消息的几种方式
- 微信小程序——轮播图实现
- Html细线表格的实现 打印边框设置
- Emacs中的拼写检查
- java 运算符的了解和运算符的优先级
- 剑指offer第32题:把数组排成最小的数及关于list.sort()和sorted( Iterable object )函数的相关知识
- 【ABP框架系列学习】模块系统(4)
热门文章
- 【转】】}linux awk 命令详解
- springmvc 解析xml数据
- [Windows]_[0基础]_[Release程序的崩溃报告minidump解决方式]
- 火云开发课堂 - 《使用Cocos2d-x 开发3D游戏》系列 第七节:PS基础:UV动画
- MFC的UI更新机制和加速键的创建
- linux openssl 编程 Client端
- 刚開始学习的人非常有用之chm结尾的參考手冊打开后无法正常显示
- nginx+tomcat反复请求
- 蓝牙调试工具hcitool的使用实例【转】
- Android+Jquery Mobile学习系列(7)-保险人信息