webpack 삽질기

webpack을 사용해 보기

 

html-webpack-plugin을 플러그인에 추가하니 아래와 같은 에러가 계속 발생하고 있다.

ERROR in   Error: C:\workspace\temp\babel\node_modules\html-webpack-plugin\default_index.ejs:207
  var TAG = __webpack_require__(/*! ./_wks */ "./node_modules/core-js/modules/_wks.js")('toStringTag'); // ES3 wrong here
                                                                                       ^
  TypeError: __webpack_require__(...) is not a function
  
  - default_index.ejs:207 Object../node_modules/core-js/modules/_classof.js
    [babel]/[html-webpack-plugin]/default_index.ejs:207:86
  
  - default_index.ejs:21 __webpack_require__
    [babel]/[html-webpack-plugin]/default_index.ejs:21:30
  
  - default_index.ejs:2287 Object../node_modules/core-js/modules/es6.object.to-string.js
    [babel]/[html-webpack-plugin]/default_index.ejs:2287:15
  
  - default_index.ejs:21 __webpack_require__
    [babel]/[html-webpack-plugin]/default_index.ejs:21:30
  
  - default_index.ejs:2783 Module../node_modules/core-js/modules/es6.regexp.to-string.js
    [babel]/[html-webpack-plugin]/default_index.ejs:2783:94
  
  - default_index.ejs:21 __webpack_require__
    [babel]/[html-webpack-plugin]/default_index.ejs:21:30
  
  - default_index.ejs:241 Module.<anonymous>
    [babel]/[html-webpack-plugin]/default_index.ejs:241:140
  
  - default_index.ejs:251 Module../node_modules/core-js/modules/_cof.js
    [babel]/[html-webpack-plugin]/default_index.ejs:251:30
  
  - default_index.ejs:21 __webpack_require__
    [babel]/[html-webpack-plugin]/default_index.ejs:21:30
  
  - default_index.ejs:867 Object../node_modules/core-js/modules/_is-regexp.js
    [babel]/[html-webpack-plugin]/default_index.ejs:867:11
  
 
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 968 bytes {0} [built]
    [./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 631 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {0} [built]
        + 86 hidden modules

 

원인은 module -> rules에 exclude에 /node_modules/를 넣지 않았기 때문이었다. 

아래와 같이 추가하니 에러는 발생하지 않았다.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
    entry: './src/test.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/, 
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [        
        new HtmlWebpackPlugin()
    ],
    mode: 'development',
    devtool: 'inline-source-map'
}