2.【webpack】打包编译生成html 太过爱你忘了你带给我的痛 2022-01-11 06:37 450阅读 0赞 在上一篇中讲到了webpack的简单使用,从webpack的初始化,项目创建到项目编译,在本篇为大家讲解webpack如何打包html ### 目录 ### \--------------------------- [1.【webpack】初识及项目创建][1._webpack] [2.【webpack】打包编译生成html][2._webpack_html] 首先接着上一篇,我们就看一下项目的目录文件情况: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70][] 接着为大家讲解webpack中plugins插件的作用,在webpack中可以支持使用插件来扩展我们的webpack功能,例如在此篇文章中将为大家带来HtmlWebpackPlugin插件的使用,它的作用是使用一个html做为模板,来生成一个新的html文件,具体操作如下: ### 1.安装html-webpack-plugin插件 ### npm install --save-dev html-webpack-plugin 使用npm安装慢的同学可以使用cnpm,具体的安装方法请咨询我们的百度妹子 ### 2.配置webpack.config.js添加插件 ### 编辑webpack.config.js文件 'use strict' const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: { index: './src/index.js' }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }) ] } 此处我们首先引入了html-webpack-plugin插件,并添加plugins配置 其中filename表示我们要生成的html文件名 template表示我们的html模板的位置,还记得上一篇中在根目录下创建的index.html文件吗?没错,就是它啦 接下来再编译试试 npm run dev 运行结果: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 1][] 哈哈,从日志上我们已经看到生成了index.html文件,再到dist目录中看看 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 2][] 此时,已经生生了index.html文件,接着打开浏览器,运行一下index.html文件看看效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 3][] 哈哈,发现已经成功了,有木有? 此时我们观察index.html发现文件中除了模板html中的内容外,还将index.js中的内容也引入进来了 我们再试试给index.js换个名字 修改webpack.config.js文件,编辑entry下的index,改为app 'use strict' const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: { app: './src/index.js' }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }) ] } 再次执行npm run dev ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 4][] 接着,发现script在body标签中,那么就有人问了,怎么放在head标签下? 回到webpack.config.js修改HtmlWebpackPlugin的构造参数,将 inject:true 改为 inject: 'head' 即可 'use strict' const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: { app: './src/index.js' }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: 'head' }) ] } 再编译发现: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <title>demo</title> <script type="text/javascript" src="app.js"></script> </head> <body></body> </html> 接着,如果我们需要动态的修改title需要怎么做呢? 其实HtmlWebpackPlugin是可以支持自定义参数的,比如: plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: 'head', title: 'webpack-demo' }) ] 增加一个title参数,并修改index.html模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body></body> </html> 再次编译: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 5][] 哈哈,是不是很好玩呢? [1._webpack]: https://blog.csdn.net/cc_want/article/details/92840712 [2._webpack_html]: https://blog.csdn.net/cc_want/article/details/92844098 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70]: /images/20220111/b19aff06677545d582c301610484761c.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 1]: /images/20220111/04797a61575948939ee78db017cfdc4b.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 2]: /images/20220111/4a769fc64c5f49fbabcbba4114ba7726.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 3]: /images/20220111/b3f86204ff344c8c8dbea9ea1f62ae87.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 4]: /images/20220111/e2d10050ec8847ab9d0e8bdf40bccae1.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjX3dhbnQ_size_16_color_FFFFFF_t_70 5]: /images/20220111/1ade89d42f8c40d99e2da730116c7622.png
还没有评论,来说两句吧...