手把手教你webpack3(4)出口(详解)-阿里云开发者社区

开发者社区> 零零水> 正文

手把手教你webpack3(4)出口(详解)

简介:
+关注继续查看

前注:

文档全文请查看 根目录的文档说明

如果可以,请给本项目加【Star】和【Fork】持续关注。

有疑义请点击这里,发【Issues】。

4、出口

示例目录

4.1、标准的出口写法

// 出口文件
output: {
    filename: './dist/dist.js'
}

意思是,将打包好的文件,打包到dist文件夹下的dist.js

注:

大家一般将打包好的文件会放在dist文件夹下,方便管理。


4.2、出口文件名根据入口文件名所决定:

上面讲了多入口,以及对应的多出口的配置写法,可以参考上面【3】中的内容。

那么假如单入口entry: './app.js',,然后output直接写filename: './dist/[name].js'会发生什么事情呢?

因为入口相当于main: './app.js',所以打包好的文件名是:main.js


4.3、设置出口目录

之前我们文件名是统一写的,但在某些情况下(比如根据环境变量来决定出口目录,因此可能存在多个出口目录,在不同情况下【生产/测试】输出到不同目录)。

因此设置方法如下:

output: {
    path: __dirname + '/dist',
    filename: 'dist.js'
}

__dirname是一个绝对路径,指从根目录到当前目录的路径(不带最后一个/),因此path: __dirname + '/dist'指以绝对路径写的到当前目录的dist文件夹下。

注意,这个情况下,path不能用相对路径(如./dist来写),必须写成绝对路径。

filename就是指输出到该绝对路径下,打包好的文件的名字(参考之前的,是一样的)。


4.4、占位符

在上面,解决多入口文件名的问题时,我们使用了[name]来根据入口文件自动生成文件名。

除了[name]之外,我们往往需要给文件名增加[hash]值来解决缓存的问题(即代码更新后,由于文件名的不同,强制用户下载最新的代码)。

增加方法如下:

...
filename: 'dist.[hash].js'
...

原本打包后的文件名为:dist.js,现如今打包后的文件名为(示例):dist.5099da45ae9fc763852d.js

如果要限制hash值的长度,可以通过[hash:10]来限制长度(默认是20,这里输出10位)。输出文件名示例为:dist.49b3713789.js

注:使用[hash]时,这里的hash值,即使文件没有改变,每次生成的结果也不同。

如果想让模块没有改变时,hash值不改变,那么应该使用[chunkhash]替代[hash]

chunk表示模块,chunkhash就是指根据模块内容计算出来的哈希值。

还有一些其他的占位符,以下表格,是我根据官方文档追加写的占位符说明:

模板 描述 特点
[hash] 模块标识符(module identifier)的 hash 每次都不同(低版本webpack可能有问题)
[chunkhash] chunk 内容的 hash 模块内容不变,hash值不变(不能和hash同时使用)
[name] 模块名称 就是entry的key,单入口缩写写法默认是main
[id] 模块标识符(module identifier) 默认情况下是例如'0','1'之类
[query] 模块的 query,例如,文件名 ? 后面的字符串 我也没搞懂这个

因此一个示例是:

filename: 'dist.chunkhash=[chunkhash:10].name=[name].id=[id].js'

具体效果请fork我的项目,并down下来到本地;

然后进入【4、出口文件夹】,在该目录下运行npm run test

最后查看dist文件夹里生成的js文件。对比webpack.config.js文件中的output属性,对比之。

至于加了哈希值后的文件,如何让html自动引入,下来进行说明。


4.5、引入启用了占位符的打好包文件

在【4.4】中,我们启用了 [hash][chunkhash] 占位符。

这个占位符,会根据哈希值,在打包好的js文件的文件名中,添加一段hash值。

而这个hash值显然是不可预期的,如果我们每次都在html里手动去写这些js文件名,不仅傻,还容易漏和犯错。

因此我们需要设法解决这个问题。

解决步骤:

  1. webpack不能全局安装(虽然也可以,但是会造成污染),因此我们先在当前文件夹下安装一次webpack:npm install --save webpack
  2. 我们还需要安装一个webpack插件:npm install --save-dev html-webpack-plugin
  3. 除此之外,我们需要配置一下webpack文件。做两件事:1、引入插件;2、配置插件;
// webpack.config.js
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 入口文件,指向app.js
    entry: './app.js',
    // 出口文件
    output: {
        path: __dirname + '/dist',
        filename: 'dist.chunkhash=[chunkhash:10].name=[name].id=[id].js'
    },
    // 将插件添加到webpack中
    plugins: [
        // 这里是添加的插件
        new HtmlWebpackPlugin({
            title: 'My HTML'
        })
    ]
}

最后,如之前一样,运行npm run test,会发现在dist文件夹下,除了之前的js文件,还出现了一个html文件,而这个html文件引入了我们打包好的js文件。

注:

项目里的是已经将依赖加入了package.json,直接运行npm install即可自动安装webpack和该插件。


4.6、同时引入固定资源,以及打包好的文件

在【4.5】中,我们启用了插件,让插件可以自动创建html模板,并让该html文件引入打包好的js文件。

在本章,我们不会深入讲解这个插件,但是需要解决一个常见需求:

  1. 我通过CDN引入jQuery(或其他类似资源);
  2. 并且该资源可能是一个,或者多个;
  3. 或者是其他已经写在html里的文件内容;
  4. 我不想在自动打包好html后,再去手动插入script标签或者其他类似标签;
  5. 因此我希望以某个html文件为模板,额外加入打包好的js文件;



因此我们需要对这个插件进行配置:HtmlWebpackPlugin的文档(英文)

对于这个需求,我们只需要配置一些简单的东西:

···
plugins: [

// 这里是添加的插件
new HtmlWebpackPlugin({
    title: 'title', // html的title(就是title标签里的东西)
    filename: 'index.html', // 重写后的html文件名,默认是index.html
    template: './demo.html',    // 这个就是那个模板文件,不会改动原有的内容,而是在原来html文件的末尾,将打包编译好的文件添加进去
})

]
···

然后在模板文件里添加一些内容(具体查看文件夹内的 demo.html 文件。

最后一如既往的运行npm run test即可,查看 dist 文件夹下的 index.html 文件。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9716 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12052 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13436 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11698 0
webpack多入口多出口的实现
webpack是一个优秀的打包平台, 可以把sass, 图片, 字体等静态资源全部打包到js中 作者最近在改造一个传统的静态网站, 为了减少http请求, 其中一个策略就是,把单个静态网页对应的多个静态资源(如字体, css, 图片, js), 打包...
2061 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4637 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7109 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载