HtmlWebpackPlugin が生成するリンクのパスを絶対パス指定したい
javascriptをwebpackでビルドしています。
HtmlWebpackPluginを使ってindex.htmlはテンプレートから生成しています。
また、index.htmlが読み込むjsファイルはリビジョン番号つけてます。([name][hash].js)
HtmlWebpackPluginがindex.htmlの末尾にjsを参照するscriptタグを挿入してくれるのですが、
そのパスが相対パス(src="script.js")になっており、絶対パス(src="/script.js")で出力させたいです。
(SPAを開発しているので、ドメイン配下のURLでアクセスされた時にスクリプトのパスが絶対パスでないと読み込めないです。)
フォルダの構成は以下の通りです。
├── public
│ └── js この中に全部出力
├── src
│ ├── html
│ │ └── index.html
│ └── js
│ └── index.jsx
webpackの設定とテンプレートのhtml
javascript
1webpack.config.js 2 3const HtmlWebpackPlugin = require("html-webpack-plugin"); 4 5module.exports = [ 6 { 7 context: path.join(__dirname, 'src'), 8 entry: { 9 app: './js/index.jsx' 10 }, 11 output: { 12 path: path.join(__dirname, 'public/js'), 13 filename: '[name]-[hash].js' 14 }, 15 module: { 16 rules: [ 17 { 18 test: /.js[x]?$/, 19 exclude: /node_modules/, 20 loader: "babel-loader", 21 query:{ 22 presets: ['react', 'env'] 23 } 24 }, 25 { test: /.html$/, loader: "html-loader" } 26 ] 27 }, 28 resolve: { 29 modules: [path.resolve(__dirname, "src/js"), "node_modules"], 30 extensions: ['.js', '.jsx'] 31 }, 32 plugins: [ 33 new HtmlWebpackPlugin({ 34 template: "./html/index.html" 35 }) 36 ], 37 } 38];
html
1index.html 2 3<!DOCTYPE html> 4<html lang="en"> 5<head> 6 <title>CarL</title> 7</head> 8<body> 9<noscript> 10 You need to enable JavaScript to run this app. 11</noscript> 12<div id="root"></div> 13</body> 14</html>
詳しい方いましたらよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/28 13:31
2018/11/28 13:35
2018/11/28 13:39