-
記錄查看全部
-
loader是使用方法二： 在配置文件中配置： test的意思是對文件名進行按照后面的正則表達式進行正則匹配，匹配符合則使用后面對應的loader loader是對不同類型文件的一種處理，使它能夠變成瀏覽器能識別的信息查看全部
-
優化1： 減少http請求，可以將一些固有的內容（腳本源碼）直接插入到模板中： 在<script></scritp>中插入： <%= complication.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebapckPlugin.files.publicPath.length)].source() %> 其中： compilation.assets[url-1].source() //這里會根據路徑url-1拿到對應文件的源碼 進入url-1: htmlWebpackPlugin.files.chunks.main.entry.substr(length-1) //這里會取出entry這個url下標從length-1開始的剩下的url： length-1 = htmlWebpackPlugin.files.publicPath.length //也就是說 http://www.cdn.com/script/js/main.js 會取出publicPath長度后的部分： script/js/main.js 優化2：為了針對性（不要在body中再次引入main）地引入chunk，可以在body中利用模板語言加入邏輯： <%= for (var k in htmlWebpackPlugin.files.chunks) { %> <% if (k !== 'main') { %> <script src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script> <% } %> <% } %>查看全部
-
<%= htmlWebpackPlugin.files.chunks.main.entry %> 這里，通過webpack來拿到main這個chunk的路徑 entry：是main這個chunk的路徑，里面是帶有publicPath的查看全部
-
場景： html中使用<script>標簽引入文件會發生http請求，http請求比較費時，如何優化呢？？ complication //webpack暴露出來的自身的一個引用查看全部
-
針對多頁面的場景： 模板中指定指向的chunk查看全部
-
上線準備： 準備一： output中的publicPath參數： output: { path: "./dist/" publicPath: "http://www.cds.com/" } 在項目正式上線時，會將所生成文件中的path替換為線上路徑publicPath 準備二： html-webpack-plugin中minify來對生成文件index.html進行壓縮： 此處可以參考文檔，在www.npmjs.com中搜索html-webpack-plugin： new htmlWebpackPlugin({ minify: { removeComments: true, //根據模板生成文件時去除注釋 collapseWhitespace: true // 去除空格或者換行符（非字符） } })查看全部
-
業務場景： 如何在index.html中拿到html-webpack-plugin中傳入的參數： 通過模板語言拿到： <%= htmlWebpackPlugin.options.title %> 參數傳入: 在webpack的plugin中 new htmlWebpackPlugin({ title: "這是模板的名字哦" })查看全部
-
htmlWebpackPlugin 其他配置： filename //可以指定生成的html的文件名 inject //可以指定生成js文件插入的html的位置"head"或者"body"查看全部
-
解決問題： html-webpack-plugin生成的index.html在output指定的path路徑下： 可以在output的filename中指定js所需要的單獨的相對路徑查看全部
-
解決的問題：業務場景： 為了建立webpack生成的index.html與根目錄下的index.html的聯系，這里需要為webpack用來生成index.html的插件-htmlWebpackPlugin指定模板為： 根目錄下的index.html查看全部
-
解決的問題：業務場景： 建立webpack生成的index.html與根目錄下的index.html的聯系： 以根目錄下的index.html為模板生成dist下的index.html: 這里的context中可以設定 new htmlWebpackPlugin({ template: 'index.html' //context可以設定這里html的路徑，默認是根目錄 })查看全部
-
html-webpack-plugin的使用： webpack.config.js中的配置查看全部
-
在webpack中使用插件： 1- 在webpack.config.js中引入該插件 2- webpack的plugins（對應的值的類型是數組）中去加入該插件的對象（對插件對象進行初始化）查看全部
-
webpack插件： html-webpack-plugin 業務場景： 在根目錄下的index.html中： 需要引入webpack打包后生成的文件（例如bundle.js）， 但是對于利用[chunkhash]生成的文件名每次都是不固定的，則，index.html中不可能每次把引入的js名去手動改寫，所以： 需要這個插件來解決這個問題查看全部
舉報
0/150
提交
取消