HTML Webpack Eklentisi ile Kısmi Kullanılırken Hata Oluştu

HTML Webpack Eklentisi'ni kullanarak statik HTML kısmi yapıları içeren bir kurulum oluşturmaya çalışıyorum ancak bazı hatalarla karşılaşıyorum.HTML Webpack Eklentisi ile Kısmi Kullanılırken Hata Oluştu

template.html.ejs

const webpack = require('webpack'); 
const path = require('path'); 
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'); 
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 
const OptimizeCSSAssets = require('optimize-css-assets-webpack-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

    let config = { 
    entry: './src/index.js', 
    output: { 
    path: path.resolve(__dirname, './public'), 
    filename: 'app.js' 
    }, 
    module: { 
    loaders: [{ 
     test: /\.html$/, 
     loader: 'html-loader' 
    }], 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.scss$/, 
     use: ['css-hot-loader'].concat(ExtractTextWebpackPlugin.extract({ 
      fallback: 'style-loader', 
      use: ['css-loader', 'sass-loader', 'postcss-loader'], 
     })), 
     }, 
     { 
     test: /\.(jpe?g|png|gif|svg)$/i, 
     loaders: ['file-loader?context=src/assets/images/&name=images/[path][name].[ext]', { 
      loader: 'image-webpack-loader', 
      query: { 
      mozjpeg: { 
       progressive: true, 
      }, 
      gifsicle: { 
       interlaced: false, 
      }, 
      optipng: { 
       optimizationLevel: 4, 
      }, 
      pngquant: { 
       quality: '75-90', 
       speed: 3, 
      }, 
      }, 
     }], 
     exclude: /node_modules/, 
     include: __dirname, 
     }, 
    ] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: './src/template.html.ejs' 
    }), 
    new ExtractTextWebpackPlugin('main.css') 
    ], 
    devServer: { 
    contentBase: path.resolve(__dirname, './public'), 
    historyApiFallback: true, 
    inline: true, 
    open: true 
    }, 
    devtool: 'eval-source-map' 
} 

module.exports = config; 

if (process.env.NODE_ENV === 'production') { 
    module.exports.plugins.push(
    new webpack.optimize.UglifyJsPlugin(), 
    new OptimizeCSSAssets() 
); 
}

webpack.config.js (./src altında bulunan)

<%=require('./header.html')%> 
    <body> 
    testing schmesting 
    </body> 
    <%=require('./footer.html')%> 
</html>

(altlık.html ve başlık: Bu benim şimdiki yapılandırma olduğunu. html, ./src'un altında bulunur)

Düzenleme: Hata

"HATA: hala kodunu sorunlar Güncelleme Çocuk derleme başarısız oldu: Modül başarısız ayrıştırma: Beklenmeyen belirteci (1: 0) Bu dosya türünü işlemek için uygun bir yükleyici gerekebilir.
SyntaxError: Beklenmeyen belirteç (1: 0) Modül başarısız ayrıştırma: Beklenmeyen belirteç (1: 2) Bu dosya türünü işlemek için uygun bir yükleyici gerekebilir "

kaynak

2017-12-12 Staffan Estberg

DÜZENLEME

(EDIT.: 2017-12-20 "kurallar" ifadesini "kurallara" taşıyın)

Varsayılan olarak, "html-webpack-plugin" şablonu "underscore" (aynı zamanda lodash olarak da bilinir) şablonu olarak ayrıştırır, "template.html" öğeniz hiçbir şeydir yanlış, webpack'in "template.html" için 'html-loader' çözümlenememesi nedeniyle hata oluştu

komut satırında: Eğer WebPack için "html-yükleyici" yükleyin ve onu yapılandırmanız gerekir böylece,

npm install html-loader

Ve WebPack için yapılandırmak, webpack.config.js düzenleyin:

... 
module: { 
    rules: [ 
    // ... 
     { 
      test: /\.html$/, // tells webpack to use this loader for all ".html" files 
      loader: 'html-loader' 
     } 
    ] 
}

Artık "webpack" komutunu çalıştıramazsınız, hiçbir hata görmezsiniz, BUT oluşturulan "index.html" dosyası beklenmedik çünkü şablon dosyanızda ".html" uzantılıdır, webpa ck şimdi "template.html" yerine varsayılan olarak "lodash loader" yüklemek için "html-loader" ı kullanın, bunu çözmek için "template.html" yi "template.html.ejs" (veya herhangi bir başka uzantı) olarak yeniden adlandırabilirsiniz. "html-webpack-plugin" geri dönüşü. Ayrıca "template.html" üzerinde biraz daha fazla değişiklik var, "html-loader!" ondan: şimdi

<%= require('./footer.html') %>

çalışması gerekir.

DÜZENLEME başvuru için Mesaj kodum:

/src/template.html.ejs

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>test</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body> 
     <h1>template</h1> 
     <%=require('./footer.html')%> 
    </body> 
</html>

/src/footer.html

<footer>this is a footer</footer>

/webpack.config.js

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

let config = { 
    entry: { 
     index: './src/js/index' 
    }, 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: '[name].js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.html$/, 
       loader: 'html-loader' 
      } 
     ], 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './src/template.html.ejs' 
     }) 
    ] 
} 


module.exports = config;

/package.json

"Nin

webpack 3.10.0
npm 5.6.0

içeriği:

{ 
    "name": "test", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "html-loader": "^0.5.1", 
    "html-webpack-plugin": "^2.30.1", 
    "webpack": "^3.10.0" 
    } 
}

console.log("A test page!");

çevre /src/js/index.js /dist/index.html "web paketini çalıştırdıktan sonra:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>test</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body> 
     <h1>template</h1> 
     <footer>this is a footer</footer> 
    <script type="text/javascript" src="index.js"></script></body> 
</html>

"footer.html" içeriğinin doğru bir şekilde yerleştirildiğini görebilirsiniz.

ESKİ CEVAP

Yaklaşım 1:Using "es6" template

sizin "webpack.config için npm install html-loader
Ekle "html-yükleyici" ile "html-yükleyici" Yükle .js ".html" uzantılı dosyaları yüklemek için:

module: { 
     rules: [{ 
      test: /\.html$/, 
      loader: 'html-loader' 
     }], 
    }

şöyle, ES6 şablon dizeleri interpolasyon sözdizimi etkinleştirmek için interpolate bayrağı ekleyin:

plugins: [ 
     new HtmlWebpackPlugin({ 
      template: '!!html-loader?interpolate!src/template.html' 
     }) 
    ]

Değiştir

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head> 
    <body> 
    template 
    </body> 
    ${require('./footer.html')} 
</html>

template.html

Run webpack, bu

Yaklaşım 2 çalışacağız: "çizgi" şablonu kullanarak

Takip ardından "yaklaşımı 1" adım 1 ve 2, ve:

yeniden adlandır " template.html "to" template.html.webpack.config.js "ejs" içinde template: './src/template.html.ejs' için
Değişim template: './src/template.html'"
Çalıştır webpack

kaynak

2017-12-15 07:28:59

teşekkürler! Ben bu ekleyerek ama noktadan 3 (interpole ekleyerek). Are ile bazı hata var gibi görünüyor çalıştı HtmlWebPack Eklentisi için buraya gelip Html Loader'a bir başvuru yapmamam gerektiğine emin misin? –

Webpack'i çalıştırırken konsolda aldığım hata (veya npm çalıştırma başlangıcı): ERROR ./src/footer.html Modül ayrıştırma başarısız: Beklenmedik belirteci (1: 7) Bu dosya türünü işlemek için uygun bir yükleyiciye gereksinim duyabilirsiniz | fo oter testi | @ ./node_modules/html-loader?interpolate!./src/template.html 1: 161-185 –

Lütfen en yeni "template.html" ve "footer.html" öğelerinizi gönderin –

HTML Webpack Eklentisi ile Kısmi Kullanılırken Hata Oluştu

cevap

İlgili konular