摘要:三添加源文件上一步呢我們只是了一個沒有任何參數的。可以配置最后的文件的源文件。例如這里,我們使用根目錄下的,最后生成的文件其實是以這里的為源文件的,這一點可以從和的一樣看出來。關于更多的配置可以參考它的
如果你的是用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的
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/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...
閱讀 2229·2019-08-30 10:51
閱讀 785·2019-08-30 10:50
閱讀 1463·2019-08-30 10:49
閱讀 3130·2019-08-26 13:55
閱讀 1591·2019-08-26 11:39
閱讀 3412·2019-08-26 11:34
閱讀 1937·2019-08-23 18:30
閱讀 3381·2019-08-23 18:22