Błąd przy użyciu części z wtyczką Webpack HTML

Próbuję utworzyć konfigurację ze statycznymi częściami HTML przy użyciu wtyczki HTML Webpack, ale z pewnymi błędami. To jest mój aktualny config:Błąd przy użyciu części z wtyczką Webpack HTML

webpack.config.js

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() 
); 
}

template.html.ejs (znajduje się pod ./src)

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

(footer.html i nagłówek. html znajduje się pod ./src)

Edycja: Zaktualizowany kod, nadal problemy:

„błąd w błąd: kompilacja Dziecko nie powiodło się: Moduł analizowania nie powiodło się: Nieoczekiwany token (1: 0) Może trzeba odpowiednią ładowarkę do obsługi tego typu plików.
SyntaxError: Nieoczekiwany token (1: 0) Moduł analizowania nie powiodło się: Nieoczekiwany token (1: 2) Może trzeba odpowiednią ładowarkę do obsługi tego typu plików „

Źródło

2017-12-12 Staffan Estberg

EDIT

(Edit.: 2017-12-20 przenieś "ładowniki" do "reguł")

Domyślnie "html-webpack-plugin" analizuje szablon jako "underscore" (zwany także szablonem), twój "template.html" jest niczym źle, błąd jest spowodowany przez pakiet sieci Web nie udało się rozwiązać "html-loader" dla "template.html" <%= require('html-loader!./footer.html') %>, więc trzeba zainstalować "HTML-loader" dla WebPack i skonfigurować go:

W wierszu poleceń:

npm install html-loader

i skonfigurować go do WebPacka, edytować webpack.config.js:

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

Teraz możesz uruchomić "webpack", nie zobaczysz żadnego błędu, ALE wygenerowany "index.html" nie jest oczekiwany, ponieważ twój plik szablonu ma rozszerzenie ".html", webpa ck teraz użyj "html-loader", aby załadować "template.html" zamiast domyślnego "lodash loader", aby rozwiązać ten problem, możesz zmienić nazwę "template.html" na "template.html.ejs" (lub dowolne inne rozszerzenie), aby Funkcja "html-webpack-plugin". Poza tym jest trochę więcej zmian na "template.html", usuń "html-loader!" od niego:

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

teraz powinno działać.

EDIT post mój kod dla odniesienia:

/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

{ 
    "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" 
    } 
}

/src/js/index.js

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

środowiska:

WebPack 3.10.0
npm 5.6.0

treść " /dist/index.html "after run webpack:

<!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>

Jak widać zawartość "footer.html" została poprawnie wstawiona.

OLD ODPOWIEDŹ

Podejście 1:Using "es6" template

Install "HTML-loader" przez npm install html-loader
Add "html-loader" Aplikacje „webpack.config .js "do ładowania plików z rozszerzeniem" .html ", na przykład:

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

Dodaj interpolate flagę w celu umożliwienia interpolacji składnię ES6 ciągów szablonu, tak jak poniżej:

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

Modyfikuj Twój template.html dopasować ES6 szablonu:

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

Run webpack, że to zadziała

Podejście 2: używając "podkreślenia" Szablon

Wykonaj krok "podejście 1" 1 i 2, a następnie:

Zmień nazwę " template.html "do" template.html.EJS”
Zmień template: './src/template.html' do template: './src/template.html.ejs' w "webpack.config.js"
Run WebPack

Źródło

2017-12-15 07:28:59

Dzięki! Próbowałem, dodając to, ale nie wydaje się być jakiś błąd z punktu 3 (dodanie interpolować). Są na pewno powinienem wywoływać tutaj wtyczkę HtmlWebPack, a nie odwoływać się do Html Loader? –

To jest błąd, który dostaję w konsoli podczas uruchamiania Webpacka (lub uruchamiania npm): BŁĄD w ./src/footer.html Moduł przetwarzanie nie powiodło się: nieoczekiwany token (1: 7) Do obsługi tego typu pliku może być potrzebny odpowiedni program ładujący. oter test | @ ./node_modules/html-loader?interpolate!./src/template.html 1: 161-185 –

Opublikuj swój najnowszy "template.html" i "footer.html" tutaj –

Błąd przy użyciu części z wtyczką Webpack HTML

Odpowiedz

Powiązane problemy