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自动化22-发送各种类型附件邮件【转载】
前言 最近一些小伙伴,在搞邮箱的事情,小编于是去折腾了一下!总结了一些干货,与大家分享一下!速来,抱大腿,我要开车了! 基本思路就是,使用MIMEMultipart来标示这个邮件是多个部分组成的,然后 ...
- 工作管理 (job control)
这个工作管理 (job control) 是用在 bash 环境下的,也就是说:『当我们登入系统取得创建的 bash shell 进程之后,在该bush下同时进行多个工作的行为管理 』. 而所有创建的 ...
- Centos7Yum安装PHP7.2
1.安装源 安装php72w,是需要配置额外的yum源地址的,否则会报错不能找到相关软件包. php高版本的yum源地址,有两部分,其中一部分是epel-release,另外一部分来自webtatic ...
- Laravel查询技巧
1.同时增加几个字段的数量 DB::table('project') ->where('id',$yewuid) ->increment('count', 1, [ 'click'=> ...
- IE8的 JS 引擎如此不堪(二) - 解决方案
上一篇,IE8的JS引擎内存不停增长,是因为动态生成了一个image对象导致的.有了病因,就开始寻找治疗方法. 1.使用一个固定的img对象,但是无法获取地址改变后的图片大小,最总还是放弃: 2.寻找 ...
- 揭秘响应式web设计
0.引言 响应式web设计的作用主要使网页能在不同小大的显示窗口下依然优雅.当前的显示窗口有pc,ipad,iphone以及一些其他的设备.不同的显示窗口的分辨率各不相同,如何在不同的分辨率的情况下 ...
- 上传--下载HDFS文件并指定文件物理块的大小
使用hdfs的api接口分别实现从本地上传文件到集群和从集群下载文件到本地. 1)上传文件主要是使用FileSystem类的copyFromLocalFile()方法来实现,另外我们上传文件时可以指定 ...
- apk打包
1.在导航栏中选择Builder->Generate Signed Apk 2.新建点击Creat new... 3.注意路径后面写apk的名字(这个名字将会显示在手机软件的下方)
- cocoods 出现下面的问题:ERROR: While executing gem ... (Errno::EPERM)
今天安装cocoods 出现下面的问题:ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /us ...
- LVS+Keepalived实现高可用
http://blog.chinaunix.net/uid-16723279-id-3651396.html