search

numical / script-ext-html-webpack-plugin

Enhances html-webpack-plugin functionality with different deployment options for your scripts including 'async', 'preload', 'prefetch', 'defer', 'module', custom attributes, and inlining.
MIT License
588 stars 105 forks source link

Does not work for Vue.js SPA #68

Closed BonBonSlick closed 4 years ago

BonBonSlick commented 4 years ago 

const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
....

 plugins:      [
        new VueLoaderPlugin(),
        new FriendlyErrorsPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new ScriptExtHtmlWebpackPlugin({
            defaultAttribute: 'defer',
            preload:          /\.js$/,
        }),

 "dependencies": {
    "@fortawesome/fontawesome-free": "^5.5.0",
    "@mintuz/horizon": "BonBonSlick/horizon",
    "bootstrap": "^4.1.3",
    "cross-env": "^5.2.0",
    "dotenv": "^8.0.0",
    "eslint": "^6.8.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-html": "^5.0.0",
    "eslint-plugin-node": "^8.0.0",
    "eslint-plugin-promise": "^4.0.1",
    "faker": "^4.1.0",
    "i": "^0.3.6",
    "ismobilejs": "^1.0.3",
    "js-cookie": "^2.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "moment": "^2.22.2",
    "npm": "^6.10.2",
    "resumablejs": "^1.1.0",
    "script-ext-html-webpack-plugin": "^2.1.4",
    "secure-ls": "^1.2.5",
    "source-map-loader": "^0.2.4",
    "standard": "^14.3.1",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "url-loader": "^1.1.2",
    "video.js": "^7.6.0",
    "vue": "^2.5.17",
    "vue-meta": "^2.3.1",
    "vue-resource": "^1.2.1",
    "vue-router": "^3.0.1",
    "vue-style-loader": "^4.1.0",
    "vuex": "^3.0.1",
    "vuex-persistedstate": "^2.7.0",
    "vuex-router-sync": "^5.0.0",
    "webpack-cli": "^3.3.6",
    "webpack-merge": "^4.1.4"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "copy-webpack-plugin": "^5.0.4",
    "css-loader": "^0.28.11",
    "eslint-plugin-vue": "^4.7.1",
    "file-loader": "^4.2.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^4.0.0",
    "node-sass": "^4.10.0",
    "popper.js": "^1.12",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.13.1",
    "vue-loader": "^15.2.2",
    "vue-router-sitemap": "^0.0.4",
    "vue-template-compiler": "^2.5.17",
    "watch": "^1.0.2",
    "webpack": "^4.20.2",
    "webpack-bundle-analyzer": "^3.4.1",
    "webpack-dev-server": "^3.8.0"
  }

Result 


<head>
<link rel="preload" href="/main.js" as="script"> // worked only for main.js!
<script src="/0.js" ></script> // scripts appended in head
<script src="/1.js" ></script>
....
<footer>
<script src="/main.js" defer=""></script> // only here added DEFER

Expected, everything DEFER and preload.

<head>
<link rel="preload" href="/0.js" as="script">
....
<footer>
<script src="/0.js"  defer></script>
BonBonSlick commented 4 years ago

With this config, preload works fine, but defer still does not applied to head script tags


    new ScriptExtHtmlWebpackPlugin({
      defaultAttribute: 'defer',
      preload:          {
        test:   /\.js$/,
        chunks: 'async',
      },
    }),

EG

<head>
<link rel="preload" href="/0.main.js" as="script">
<script charset="utf-8" src="/0.main.js"></script>

Probably I am missing something for HtmlPlugin, VueLoaderPlugin or this one.

hellokvn commented 4 years ago

Got the same issue. @BonBonSlick did you find a solution?

BonBonSlick commented 4 years ago

@hellokvn I do not remember :(

numical commented 4 years ago

Hello - I'm sorry to say that this plugin is no longer being maintained. I have tried to close all issues ahead of doing this but instead have found that the issue list just keeps growing. I simply do not have the time to keep up. Sorry. Please keep an eye on the README where I will record anyone who forks this repo with the intention to supporting it in the future.