Как подключить bower в webpack?

Question

[Wasya UK]

в main.js подключаю библиотеку, но ничего не работает. Получаю ERROR in ./app/public/javascripts/main.js
Module not found:

Вот webpack.config:

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: './app/public/javascripts/main.js',
  output: {
    filename: './bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: ["bower_components", "node_modules"],
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./app/public/index.html",
      filename: "./index.html",
      inject: true
    })
  ]
};

Comments

[Алексей Ярков]

в main.js подключаю библиотеку, но ничего не работает

Код main.js я, конечно же, показывать не буду

[Wasya UK]

Алексей Ярков, Так принципиально?
main.js
require("pptxgenjs");

[Алексей Ярков]

Wasya UK,

Так принципиально?

Да конечно нет. Просто ошибка в нем возникает, а остальное и додумать можно =)
А почему именно bower, а не npm?
$ npm install pptxgenjs
var pptx = require("pptxgenjs")

[Wasya UK]

Алексей Ярков, сам не знаю, я новичок. Мне даже лучше взять npm, но почему же используют bower?

[Алексей Ярков]

Wasya UK, сайт bower как-бы намекает

[Wasya UK]

Алексей Ярков, вроде понял как запустить, но вот тут новая ошибка:

ERROR in ./node_modules/image-size/lib/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\ukran\Desktop\PowerPointWeb\node_modules\image-size\lib'
 @ ./node_modules/image-size/lib/index.js 3:9-22
 @ ./node_modules/pptxgenjs/dist/pptxgen.js
 @ ./app/public/javascripts/main.js

ERROR in ./node_modules/image-size/lib/types/tiff.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\ukran\Desktop\PowerPointWeb\node_modules\image-size\lib\types'
 @ ./node_modules/image-size/lib/types/tiff.js 6:9-22
 @ ./node_modules/image-size/lib/types.js
 @ ./node_modules/image-size/lib/index.js
 @ ./node_modules/pptxgenjs/dist/pptxgen.js
 @ ./app/public/javascripts/main.js

ERROR in ./node_modules/pptxgenjs/dist/pptxgen.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\ukran\Desktop\PowerPointWeb\node_modules\pptxgenjs\dist'
 @ ./node_modules/pptxgenjs/dist/pptxgen.js 4776:10-23
 @ ./app/public/javascripts/main.js

Может проблема в модуле?

[Алексей Ярков]

Wasya UK, я погуглил за вас
https://github.com/webpack-contrib/css-loader/issu...

[Wasya UK]

все заработало, спс

Answer 1

[Wasya UK]

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: './app/public/javascripts/main.js',
  output: {
    filename: './bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /\.node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  node: {
    fs: "empty"
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./app/public/index.html",
      filename: "./index.html",
      inject: true
    })
  ]
};