html-webpack-plugin

来源：2-4 Webpack loader基础应用

王金强

2018-03-01

引入html-webpack-plugin之前，npm run build没有问题，而引入之后，会报错

配置文件如下

const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')

module.exports = {
entry: {
app: path.join(__dirname, '../client/app.js')
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[hash].js',
publicPath: ''
},
module: {
rules: [
{
test: /.jsx?$/,
loader: 'babel-loader'
},
{
test: /.js?$/,
loader: 'babel-loader',
exclude: [
path.join(__dirname,  '../node_modules')
]
}
]
},
plugins: [
new HTMLPlugin()
]
}

报错信息如下

ERROR in   Error: Child compilation failed:
  Module build failed: SyntaxError: Unexpected token (1:1)
  > 1 | <!DOCTYPE   html>
      |  ^
    2 | <html>
    3 |   <head>
    4 |     <meta charset="UTF-8"9m>
  :
  BabelLoaderError: SyntaxError: Unexpected token (1:1)
  > 1 | <!DOCTYPE   html>
      |  ^
    2 | <html>
    3 |   <head>
    4 |     <meta charset="UTF-8"9m>
  
  - compiler.js:73 childCompiler.runAsChild
    [react]/[.npminstall]/html-webpack-plugin/3.0.3/html-webpack-plugin/lib/comp    iler.js:73:16
  
  - Compiler.js:300 compile
    [react]/[.npminstall]/webpack/3.11.0/webpack/lib/Compiler.js:300:11
  
  - Compiler.js:510 applyPluginsAsync.err
    [react]/[.npminstall]/webpack/3.11.0/webpack/lib/Compiler.js:510:14
  
  - Tapable.js:202 next
    [react]/[.npminstall]/tapable/0.2.8/tapable/lib/Tapable.js:202:11
  
  - CachePlugin.js:78 Compiler.<anonymous>
    [react]/[.npminstall]/webpack/3.11.0/webpack/lib/CachePlugin.js:78:5
  
  - Tapable.js:206 Compiler.applyPluginsAsyncSeries
    [react]/[.npminstall]/tapable/0.2.8/tapable/lib/Tapable.js:206:13
  
  - Compiler.js:507 compilation.seal.err
    [react]/[.npminstall]/webpack/3.11.0/webpack/lib/Compiler.js:507:11
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [react]/[.npminstall]/tapable/0.2.8/tapable/lib/Tapable.js:195:46
  
  - Compilation.js:677 applyPluginsAsync.err
    [react]/[.npminstall]/webpack/3.11.0/webpack/lib/Compilation.js:677:19
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [react]/[.npminstall]/tapable/0.2.8/tapable/lib/Tapable.js:195:46
  
  - Compilation.js:668 applyPluginsAsync.err
    [react]/[.npminstall]/webpack/3.11.0/webpack/lib/Compilation.js:668:11
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [react]/[.npminstall]/tapable/0.2.8/tapable/lib/Tapable.js:195:46
  
  - Compilation.js:663 applyPluginsAsync.err
    [react]/[.npminstall]/webpack/3.11.0/webpack/lib/Compilation.js:663:10
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [react]/[.npminstall]/tapable/0.2.8/tapable/lib/Tapable.js:195:46
  
  - Compilation.js:659 applyPluginsAsyncSeries
    [react]/[.npminstall]/webpack/3.11.0/webpack/lib/Compilation.js:659:9
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [react]/[.npminstall]/tapable/0.2.8/tapable/lib/Tapable.js:195:46
  
  - Compilation.js:602 Compilation.seal
    [react]/[.npminstall]/webpack/3.11.0/webpack/lib/Compilation.js:602:8
  
  - Compiler.js:504 applyPluginsParallel.err
    [react]/[.npminstall]/webpack/3.11.0/webpack/lib/Compiler.js:504:17
  
  - Tapable.js:289 
    [react]/[.npminstall]/tapable/0.2.8/tapable/lib/Tapable.js:289:11
  
  - Compilation.js:505 _addModuleChain
    [react]/[.npminstall]/webpack/3.11.0/webpack/lib/Compilation.js:505:11
  
  - Compilation.js:475 processModuleDependencies.err
    [react]/[.npminstall]/webpack/3.11.0/webpack/lib/Compilation.js:475:14
  
  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7
  
  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9
  

Child html-webpack-plugin for "index.html":
     1 asset
       1 module
    
    ERROR in ./node_modules/.npminstall/html-webpack-plugin/3.0.3/html-webpack-plugin/lib/loader.js!./node_modules/.npminstall/html-webpack-plugin/3.0.3/html-webpack-plugin/default_index.ejs
    Module build failed: SyntaxError: Unexpected token (1:1)
    
    > 1 | <!DOCTYPE html>
        |  ^
      2 | <html>
      3 |   <head>
      4 |     <meta charset="UTF-8">
    
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react@1.0.0 build: `webpack --config build/webpack.config.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the react@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/molphy/.npm/_logs/2018-03-01T10_39_09_293Z-debug.log

写回答

1回答