Как я могу использовать несколько загрузчиков js в веб-пакете для преобразования моего кода - PullRequest
Новая
       7

Как я могу использовать несколько загрузчиков js в веб-пакете для преобразования моего кода

0 голосов
/ 09 января 2019

Я только что создал свой собственный загрузчик, такой как babel-loader, который преобразует мой код по своему желанию. Сейчас я пытаюсь использовать мой пользовательский загрузчик вместе с babel-loader. Я не могу этого сделать. Я получаю ошибку.

Мой код: - 

var path               = require('path'),
HtmlWebpackPlugin  = require('html-webpack-plugin'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
CleanWebpackPlugin = require('clean-webpack-plugin'),
extractCSS = new ExtractTextPlugin({ filename: 'css.bundle.css'}),
multi = require('multi-loader');



module.exports = {
   mode: 'development',
   entry: './src/app.js',
   output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './app.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: multi(
             'babel-loader'
             'myown-loader'
           ),
          options: {
            presets: ['@babel/preset-env'],
            plugins: [require('@babel/plugin-proposal-object-rest-spread')]
          }
        }
      },
      {
        test: /\.css$/,
        use: extractCSS.extract({ // Instance 1
          fallback: 'style-loader',
          use: [ 'css-loader' ]
        })
      },
      {
        test:/\.html$/,
        use:['html-loader']
      },
      {
        test:/\.html$/,
        use:[
          {
            loader:'file-loader',
            options:{
              name:'[name].[ext]',
            }
          }
        ],
        exclude:path.resolve(__dirname,'./src/index.html')
      },
      {
        test:/\.(jpg|png)$/,
        use:[
          {
            loader:'file-loader',
            options:{
              name:'[name].[ext]',
              outputPath:'img/',
              publicPath:'img/'
            }
          }
        ]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    }),
    extractCSS
  ]
};

Когда я использую приведенный выше код, я получаю эту ошибку, как показано ниже.

Ошибка, которую я получаю: - 

    [0] multi (webpack)-dev-server/client?http://localhost:8081 ./src/app.js 40 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8081] (webpack)-dev-server/client?http://localhost:8081 260 bytes {main} [built] [failed] [1 error]
[./src/app.js] 260 bytes {main} [built] [failed] [1 error]

ERROR in ./src/app.js
Module build failed (from ./node_modules/multi-loader/index.loader.js):
TypeError: this.query.substr is not a function
    at Object.module.exports.pitch (/home/o/Desktop/CodeBase/js/node_modules/multi-loader/index.loader.js:4:36)
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/app.js main[1]

ERROR in (webpack)-dev-server/client?http://localhost:8081
Module build failed (from ./node_modules/multi-loader/index.loader.js):
TypeError: this.query.substr is not a function
    at Object.module.exports.pitch (/home/o/Desktop/CodeBase/js/node_modules/multi-loader/index.loader.js:4:36)
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/app.js main[0]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 254 bytes {0} [built]
ℹ ｢wdm｣: Failed to compile.

Я хочу использовать оба загрузчика. Пожалуйста, помогите мне

...