WebPACKのブログシリーズコードはGitHub上にある:https://github.com/JEmbrace/webpack-practice
"WebPACKの練習(2) - WebPACKのプロフィール"
"WebPACKの練習(3) - のhtml-のWebPACK-プラグイン"
I.はじめに
前の二つの記事では、我々はWebPACKのCLIとこの2つのパッケージの方法のプロファイルを練習しますが、検証では、手動でのindex.htmlに追加index.bundle.jsをパッケージ化された結果ファイルです。
実際の開発、外部のファイル名は、通常知られて導入され、我々はまた、パッケージが完了した後に決定する必要があり、ファイル名を導入する必要があります。これは、当社の実際の開発プロセスから明らかです。
さて、今日は、この問題を解決するには、このHTML-wepback-プラグインを学ばなければなりません。
II。インストール
III。使用
例としては、公式ドキュメントを参照してください、私たちは、このプラグインについての使用します
1.基本的な使い方
まずwebpack.config.jsコードTieshanglai
//最初のステップ:導入
VAR htmlWepackPlugin =( 'htmlの-WebPACKの-プラグイン')が必要です
VARパスは=(「パス」)を必要とします。
module.exportsは= {
モード:「開発」、
エントリー:{
メイン:」./index.js'
}、
出力:{
パス:path.resolve(__ dirnameは、 'DIST')、
ファイル名: 'index.bundle.js'
}、
// 第二步:创建html-webpack-plugin的实例,配置到plugins选项中
plugins:[
new htmlWepackPlugin()
]
};
可以看到添加html-webpack-plugin的基本使用方法就是两个步骤:
使用require引入
创建实例对象并配置到plugins选项中
为了看清楚添加这个插件的效果,我们将前两篇文章中根目录下的index.html和dist删除
现在,我们在使用webpack命令进行打包
查看打包后的生成的文件和目录
可以看到打包完成后,在项目根目录下生成了一个dist目录,在该目录下生成了一个indx.bundle.js脚本文件和一个index.html模板文件。
index.bundle.js文件和前两节打包的结果文件内容一致。
index.html内容如下
dist/index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> </head> <body> <script type="text/javascript" src="index.bundle.js"></script></body> </html>
这个indx.html就是html-webpack-plugin这个插件帮我们生成的,而且它还将打包后的结果文件index.bundle.js引入到了界面中。这样是不是有点有贴近我们平时的开发了。
实际上,日常项目开发中,通常我们会有自己html模板,因此我们还需要对这个插件做一些配置,让它使用我们的模板并且将打包后的结果文件自动引入到我们编写的模板中。
2.配置模板
配置模板需要在创建html-webpack-plugin示例是传入template参数。
template: 模板路径和模板名称
现在我们将template的配置添加到webpack.config.js配置文件中
// 第一步:引入 var htmlWepackPlugin = require('html-webpack-plugin') var path = require('path'); module.exports = { mode: 'development', entry: { main: './index.js' }, output: { path: path.resolve(__dirname,'dist'), filename: 'index.bundle.js' }, // 第二步:创建html-webpack-plugin的实例,配置到plugins选项中 plugins:[ new htmlWepackPlugin({ template: './index.html' }) ] };
在此我们还需要做两件事:
删除基本用法中生成的dist目录
在根目录下新建我们的模板文件index.html
index.html的内容如下:
<html> <head> <meta charset="utf-8" /> </head> <body> <h1>webpack实践(三)- html-webpack-plugin</h1> </body> </html>
最后,我们在进行一次打包
dist目录下的index.bundle.js文件还是和之前一样,我们看一下index.html文件的内容
<html> <head> <meta charset="utf-8" /> </head> <body> <h1>webpack实践(三)- html-webpack-plugin</h1> <script type="text/javascript" src="index.bundle.js"></script></body> </html>
可以看到dist/index.html已经将打包后的结果文件index.bundle.js引入。
浏览器打开dist/index.html验证结果:
和之前的结果一致。
到此,本节内容结束,下一篇将深入学习总结一下html-webpack-plugin除template之外更多的配置项。