摘要:三添加源文件上一步呢我们只是了一个没有任何参数的。可以配置最后的文件的源文件。例如这里,我们使用根目录下的,最后生成的文件其实是以这里的为源文件的,这一点可以从和的一样看出来。关于更多的配置可以参考它的
如果你的是用vue-cli生成你的vue项目,意味着生成的项目的默认webpack配置几乎不需要做什么修改,你通过npm run build就能得到可以用于发布的/dist文件夹,里面包含着一个index.html文件和build出来的output文件。如果打开/dist/index.html文件,大概你看到的是类似于这样:
Output Management
这里值得注意的一点是,文件里面的index.65580a3a0e9208990d3e.js和main.3d6f45583498a05ab478.js,在每次执行npm run build之后这两个文件的文件名里面的hash值是可能变化的,而我们不可能每次都手动去修改这个index.html文件所引用的文件的名字吧?所幸,有这么一个plugin能帮我们做这件事,他就是:html-webpack-plugin。
简单地来说我们需要html-webpack-plugin能做2件事:
生成用于发布的index.html文件
自动替换每次build出来的output文件
说了那么多也是废话,直接看代码来得直接:
一:安装html-webpack-plugin
npm install --save-dev html-webpack-plugin
二:配置webpack.config.js
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: { index: "./src/index.js", main: "./src/main.js" }, output: { path: path.resolve(__dirname, "dist"), filename: "[name].[chunkhash].js", }, plugins: [ new HtmlWebpackPlugin({ }) ] }
执行
npm run build
得到:
打开dist/index.html文件看下:
Webpack App
在我们的webpack.config.js文件里,我们只是new HtmlWebpackPlugin({}),没有给HtmlWebpackPlugin任何参数。可以看到HtmlWebpackPlugin做了2件事:
1: HtmlWebpackPlugin会默认生成index.html文件, 放到我们的dist/目录下面
2:dist/index.html会自动更新我们每次build出来的文件
在进行更多的探讨之前,我们有必要来先看看现目前项目的结构:
可以看到截止到目前我们的项目里面是没有任何html源文件的。
三:添加源文件index.html
上一步呢我们只是new了一个没有任何参数的HtmlWebpackPlugin。其实HtmlWebpackPlugin有很多参数可以使用,下面我们介绍比较常用的几个。
1:我们先在项目的根目录下添加一个index.html源文件,里面的内容是:
index.html source file
2: 修改webpack.config.js,给HtmlWebpackPlugin添加参数:
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: { index: "./src/index.js", main: "./src/main.js" }, output: { path: path.resolve(__dirname, "dist"), filename: "[name].[chunkhash].js", }, plugins: [ new HtmlWebpackPlugin({ filename: "html/example.html", template: "index.html" }) ] }
执行
npm run build
得到:
配置里面的:
new HtmlWebpackPlugin({ filename: "html/example.html", template: "index.html" })
filename
filename可以配置最后生成的文件名字,甚至可以给一个带父文件夹路径的,比如这里的‘html/example.html’。
template
template可以配置最后的html文件的源文件。例如这里,我们使用根目录下的index.html,最后生成的dist/html/example.html文件其实是以这里的index.html为源文件的,这一点可以从dist/html/example.html和index.html的
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/104181.html
摘要:还记得我们上文中的文件吗那里面的标签还是写死的文件,那么怎么把他们变成动态的文件,这个动态生成的文件会动态引入我们打包后生成的文件呢,我们可以使用插件,首先安装这个插件,好的,接下来就开始用这个插件了官方参考文档插件通用用法 还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html...
摘要:可以根据你设置的模板,在每次运行后生成对应的模板文件,同时所依赖的也都会被引入,如果中含有值,则生成的模板文件也会引入正确版本的文件。 上一节的入门中,只是跑通了一个很简单的webpack项目的流程,对其中的参数以及实战运用中的一些用法并不太清楚,虽然目前工作项目中并没有用起webpack,不过觉得还是需要再去摸索一番,以便可以更清楚的用起这个工具。 上一节最终运行webpack命令,...
摘要:上文我们讲到了的配置和获取数据的方式,本文,我们继续深入的配置一插件中的除了自己定义了一些基本配置外,我们是可以任意的添加自定义的数据文件,就是当前文件所在的绝对路径输出路径,要用绝对路径打包之后输出的文件名教你学我们在中新增了个 上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一、html-webpack-plugin插件中的options...
摘要:以插件为例先安装插件,在命令行中输入执行完之后,在的中就多了下面的代码即安装了插件在配置文件中让插件生效,在对象中加入一个字段,这个字段接收一个数组,也就意味着,可以给应用很多各种各样的插件先将插件引进来由于插件可以携 以html-webpack-plugin插件为例 1、先安装插件,在命令行中输入:npm i -D html-webpack-plugin(执行完之后,在packag...
摘要:彻底分离源文件目录和生成文件目录使用生成出来的页面可以很安心地跟打包好的其它资源放到一起,相对于另起一个目录专门存放页面文件来说,整个文件目录结构更加合理如何利用生成页面生成页面主要是通过来实现的,下面来介绍如何实现。 本文首发于Array_Huang的技术博客——实用至上,非经作者同意,请勿转载。原文地址:https://segmentfault.com/a/119000000712...
阅读 2198·2019-08-30 10:51
阅读 754·2019-08-30 10:50
阅读 1424·2019-08-30 10:49
阅读 3098·2019-08-26 13:55
阅读 1534·2019-08-26 11:39
阅读 3391·2019-08-26 11:34
阅读 1905·2019-08-23 18:30
阅读 3344·2019-08-23 18:22