网站开发岗位介绍,网站建设+泰安,qq推广链接生成,黑马程序员培训学校1.目的
主要是为了自动引入打包后的js与css资源#xff0c;避免手动引入
2.安装相关包
npm install --save-dev html-webpack-plugin
3.引入插件
const HtmlWebpackPlugin require(html-webpack-plugin);
4.添加插件#xff08;通过new方法调用#xff09; /**插件 *…1.目的
主要是为了自动引入打包后的js与css资源避免手动引入
2.安装相关包
npm install --save-dev html-webpack-plugin
3.引入插件
const HtmlWebpackPlugin require(html-webpack-plugin);
4.添加插件通过new方法调用 /**插件 */plugins: [//plugin配置new ESLintPlugin({/** 检测哪些文件 */context: path.resolve(__dirname, src)}),new HtmlWebpackPlugin()],
进行打包可以看到打包后的文件夹中多了html文件 并且自动引入了dist.js 5.配置插件是打包后的html文件有一个指定的模版
new HtmlWebpackPlugin({/**模板 */template: path.resolve(__dirname, src/public/index.html)})
可以看到打包后的html文件既保留了模版的结构又自动引入了js文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlewebpack/title
script defer srcstatic/js/dist.js/script/head
bodyh1hell webpack/h1!-- div classred/divdiv classbox/divdiv classbox2/divdiv classbox3/div --span classiconfont icon-tianjia/span!-- --!-- script src../../dist/static/js/dist.js/script --
/body
/html
