2017-12-12 7 views
10

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 "

cevap

6

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

  1. sizin "webpack.config için npm install html-loader
  2. 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' 
     }], 
    } 
  1. şöyle, ES6 şablon dizeleri interpolasyon sözdizimi etkinleştirmek için interpolate bayrağı ekleyin:
plugins: [ 
     new HtmlWebpackPlugin({ 
      template: '!!html-loader?interpolate!src/template.html' 
     }) 
    ] 
  1. Değiştir
<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head> 
    <body> 
    template 
    </body> 
    ${require('./footer.html')} 
</html> 
    : En template.html ES6 şablonu maç için
  1. 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
+0

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? –

+0

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 –

+0

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

İlgili konular