Wie bekomme ich Webpack Chunk Hash während des Builds?

Wie kann ich eine Variable in meiner HTML-Vorlage ersetzen, die auf den aktuellen Chunk-Hash verweist?Wie bekomme ich Webpack Chunk Hash während des Builds?

Meine HTML-Template sieht wie folgt aus:

<html> 
    <head> 
     <link href="$css" rel="stylesheet"> 
    </head> 
    <body> 
     <h1>Hello World</h1> 
    </body> 
</html>

Ich versuche, es zu bekommen, so zu bauen:

<html> 
    <head> 
     <link href="app.c824da43.css" rel="stylesheet"> 
    </head> 
    <body> 
     <h1>Hello World</h1> 
    </body> 
</html>

Ich habe versucht, mit [name].[chunkhash:8].css String ersetzen verwenden, aber das macht so wörtlich:

<html> 
    <head> 
     <link href="[name].[chunkhash:8].css" rel="stylesheet"> 
    </head> 
    <body> 
     <h1>Hello World</h1> 
    </body> 
</html>

Mein Projekt:

. 
├── dist 
│   ├── app.c824da43.css 
│   └── index.html 
├── html 
│   └── index.html 
├── package.json 
├── sass 
│   └── main.scss 
└── webpack.config.js

Mein webpack.config.js

var webpack = require('webpack'); 
var outdir = __dirname + '/dist'; 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: { 
     app: [ 
      './sass/main.scss', 
      './html/index.html', 
     ] 
    }, 
    output: { 
     path: outdir, 
     filename: '[name].[chunkhash:8].js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.s[ac]ss$/, 
       use: ExtractTextPlugin.extract({ 
        use: ['css-loader', 'sass-loader'] 
       }) 
      }, 
      { 
       test: /\.html$/, 
       use: [ 
        { 
         loader: "file-loader", 
         options: { 
          name: "/[name].[ext]", 
         }, 
        }, 
        { 
         loader: 'string-replace-loader', 
         query: { 
          search: /\$css/, 
       // What do I need to put here? 
          replace: '/[name].[chunkhash:8].css' 
         } 
        }, 
        { 
         loader: "extract-loader", 
        }, 
        { 
         loader: 'html-loader', 
         options: { 
          minimize: true, 
          removeComments: true, 
          collapseWhitespace: true 
         } 
        } 
       ] 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin("[name].[chunkhash:8].css"), 
    ] 
};

Mein package.json

{ 
    "devDependencies": { 
    "css-loader": "^0.28.4", 
    "extract-loader": "^0.1.0", 
    "extract-text-webpack-plugin": "^2.1.0", 
    "file-loader": "^0.11.1", 
    "html-loader": "^0.4.5", 
    "node-sass": "^4.5.3", 
    "sass-loader": "^6.0.5", 
    "string-replace-loader": "^1.2.0", 
    "webpack": "^2.6.1" 
    } 
}

Demo with solution

Quelle

2017-06-04 Jeff Puckett

Vielleicht hilft das: https://github.com/webpack/webpack/tree/master/examples/multiple-common-chunks –

Entfernen Sie den index.html Einstiegspunkt aus Ihrer webpack Config. Verwenden Sie HtmlWebpackPlugin, um Ihre index.html zu kopieren. Das Plugin fügt automatisch das CSS <link> Tag zu Ihrem generierten HTML hinzu.

Siehe https://github.com/jantimon/html-webpack-plugin

Wenn das Plugin verwendet wird, werden alle minifications sollte innerhalb des Plugin anstelle der HTML-loader in Ihrer /\.html$/ Regel erfolgen.

new HtmlWebpackPlugin({ 
    template: 'html/index.html', 
    filename: 'index.html', 
    minify: { 
    collapseWhitespace: true, 
    removeComments: true 
    } 
})

Quelle

2017-06-05 04:28:04

Wie bekomme ich Webpack Chunk Hash während des Builds?

Antwort

Verwandte Themen