webpack的配置文件entry与output
在webpack.config.js中entry是唯一入口文件

entry也可以是一个数组

如果是一个数组,会将数组里面的文件一起打包到bundle.js
entry也可以是一个对象。

如果output里filename有三个值:
.[name]是文件名字是entry的键值。
.[hash]是md5加密的值。
.[chunkhash]这里是作为版本号使用。

每次修改文件,运行之后,都会生成不一样的hash 于chunkhash值,方便上线时静态资源的版本管理。
文件名如果每次运行都是变化的,文件引入的名字也需要变化,使用install html-webpack-plugin插件,安装npm install html-webpack-plugin --save-dev
完成之后在webpack.config.js文件里面添加plugins键:

plugins的值是一个<strong>数组</strong>,里面的值都是 new htmlWebpackPlugin(),参数一个配置数组,如下:
- title: 用来生成页面的 title 元素
- filename: 输出的 HTML 文件名,默认是 index.html, 也可以直接配置带有子目录。
- template: 模板文件路径,支持加载器,比如 html!./index.html
- inject: true | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中,如果设置为 true 或者 body,所有的 javascript 资源将被放置到 body 元素的底部,'head' 将放置到 head 元素中。
- favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
- minify: {} | false , 传递 html-minifier 选项给 minify 输出
- hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件,对于解除 cache 很有用。
- cache: true | false,如果为 true, 这是默认值,仅仅在文件修改之后才会发布文件。
- showErrors: true | false, 如果为 true, 这是默认值,错误信息会写入到 HTML 页面中
- chunks: 允许只添加某些块 (比如,仅仅 unit test 块)
- chunksSortMode: 允许控制块在添加到页面之前的排序方式,支持的值:'none' | 'default' | {function}-default:'auto'
- excludeChunks: 允许跳过某些块,(比如,跳过单元测试的块)
最终生成
webpack的配置文件entry与output的更多相关文章
- webpack中Entry与Output的基础配置
entry顾名思义,就是打包的入口文件 module.exports = { // 这个文件要做打包,从哪一个文件开始打包 entry: './src/index.js', // 打包文件要放到哪里去 ...
- Webpack探索【4】--- entry和output详解
本文主要讲entry和output相关内容.
- webpack学习(五)entry和output的基础配置
1:entry和output就是打包的入口和出口的两个对象.但是如果入口文件就一个的话(应该说只希望打包出一个脚本文件), entry直接跟一个字符串(入口文件路径)就可以了.如:entry : &q ...
- webpack entry和output配置属性
1.entry entry的三种配置方式: (1)传递字符串: 单个入口语法:传递一个字符串 entry: './src/js/main.js', (2)传递数组 将创建“多个主入口(multi-ma ...
- webpack新版本4.12应用九(配置文件之输出(output))
output 位于对象最顶级键(key),包括了一组选项,指示 webpack 如何去输出.以及在哪里输出你的「bundle.asset 和其他你所打包或使用 webpack 载入的任何内容」. ou ...
- webpack——entry,output,plugins,loader,chunk知识
entry:打包入口 代码的入口,找到依赖模块 打包的入口,webpack去哪个文件找依赖,或是去那个文件依赖的依赖 可以是一个或者多个入口 例如: 1.module.exports={ entry: ...
- Vue之webpack的entry和output
一.文件结构 二.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- webpack 使用配置文件
webpack入门 大多数项目会需要很复杂的设置,这就是为什么webpack要支持配置文件.这比在终端中输入大量命令要高效的多,所以让我们常见一个取代CLI选项方式的配置文件 新建 webpa ...
- 跟我一起学习webpack使用配置文件(二)
接着跟我一起学习webpack(一)中的项目来,我们接下来使用配置文件 使用npx webpack -h 我们可以查看webpack的配置参数 从我们在package.json中添加的命令来看,当项目 ...
随机推荐
- Selenium2+python自动化44-元素定位参数化(find_element)【转载】
前言 元素定位有八种方法,这个能看到这一篇的小伙伴都知道了,那么有没有一种方法,可以把八种定位合为一种呢?也就是把定位的方式参数化,如id,name.css等设置为一个参数,这样只需维护定位方式的参数 ...
- Mysql缺少可执行的命令
MySQL问题解决:-bash:mysql:command not found 问题: [root@linux115 /]# mysql -uroot -p -bash: m ...
- python-函数(命名空间、作用域、闭包)
一.命名空间 全局命名空间 局部命名空间 内置命名空间 *内置命名空间中存放了python解释器为我们提供的名字:input,print,str,list,tuple...它们都是我们熟悉的,拿过来就 ...
- secureCRT的自动登录设置
具体设置的步骤如下: 1. 打scrt,创建一个新的回话 2. 右击该回话选择属性,定位到左边选项卡的登录动作 3. 第一行:预期是$; 发送是ssh username@machine name 第二 ...
- 2014年spark开发者大赛火热进行中!
“发现最有正能量的网络达人”,Spark开发者大赛火热进行! 2014年9月30日,2014 Spark开发者大赛在北京正式启动.本次大赛由Spark亚太研究院联合国内领先的IT技术创新与发展的互联网 ...
- python redis使用方法
一.mac 下redis安装 1.brew安装redis brew install redis 2.启动redis服务器 brew services start redis 或者 redis-serv ...
- flutter 布局
一.Container 一个空白容器 二.Row 行 mainAxisAlignment 主轴对齐 , CrossAxisAlignment 垂直于主轴对齐 三.Column 列 四.ListVie ...
- Elasticsearch使用java读取数据报错NoNodeAvailableException: None of the configured nodes are available: [127.0.0.1:9300]
对于这个问题,大部分人出现在这个地方: Client client = new TransportClient(settings).addTransportAddress(new InetSocket ...
- HDU 1280 前m大的数(排序,字符串)
前m大的数 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- 33、Django实战第33天:我的消息
1.编辑usercenter-message.html继承usercenter-base.html 2.编辑users.views.py ... from operation.models impor ...