小白webpack学习之路
来源:互联网 发布:主宰西游淘宝 编辑:程序博客网 时间:2024/06/03 12:57
本人是个webpack小白,所以写这个文章主要是记录自己的学习过程,不喜勿喷1:首先看一个最简单的webpack的样子:
module.exports = { entry: './app.js', output: { path: './output', filename: 'output-file.js' }}
这个里面我们要理解一下这个里面每个变量的意思:
entry:是页面中的入口文件,比如我这边的入口文件时main.js
output: 是指页面通过webpack打包后生成的目标文件放在什么地方去,这里的path变量表示输出的文件存放的文件夹名或者路径 而filename表示是输出目标文件的名称;
2:配置文件中entry接受三种形式的值:字符串,数组和对象
entry: { <key>: <value> ...}
key可以是简单的字符串,比如:'app', 'main'等。其实它对应着output.filename配置中的[name]变量,这里可以提前说output.filename配置是可以用[name].js表示的,比如:
entry: { 'app-entry': './app.js'},output: { path: './output', filename: '[name].js'}
这里中key为 app-entry并且output中path变量为./output,那么输出目标文件的路径就是./output/app-entry.js.再往下看vaue为./app.js,这就说明在根目录上有一个app.js文件
这里还要说明一件事那就是value如果是字符串,而且必须是合理的noderequire函数参数字符串。比如文件路径:'./app.js'(require('./app.js'));比如安装的npm模块:'lodash'(require('lodash'))说白点就是输出的js的输入js或者模块。
还有就是如果entry的key为空的默认为mian
阅读全文
0 0
- 小白webpack学习之路
- webpack学习之路
- webpack学习之路
- webpack学习之路
- webpack学习之旅
- webpack学习之webpack.config.js详解
- webpack学习笔记-----第一个webpack小例子
- Android 小白学习之路
- 小白学习之路(四):HashMap
- 小白的Spring学习之路
- 一个小白的学习之路
- JAVA 学习小白之路
- git小白学习之路
- Python小白学习之路
- 通信小白学习之路
- Webpack学习之哥们入个门呗(一)
- webpack填坑之路
- webpack学习
- android事件分发
- HDU 3746 Cyclic Nacklace KMP求字符串最小循环节长度
- Android View触摸事件传递机制 一
- Docker 入门
- UESTC 1638 红藕香残玉簟秋,轻解罗裳,独上兰舟。
- 小白webpack学习之路
- CodeForces
- Python3 PyQt5 pycharm 环境搭建,pyqt5教程
- 100. Same Tree
- VS2010中仅一次配置opencv的方法
- 换位思考多周期约束
- 图解集合 3 : CopyOnWriteArrayList
- Python基础-枚举
- 状态模式