Миграция RequireJS / AMD с плагинами в Webpack - PullRequest
Новая
       30

Миграция RequireJS / AMD с плагинами в Webpack

0 голосов
/ 01 декабря 2018

Я работаю над переносом большого приложения RequireJS в Webpack.Кажется, что базовая сборка с Webpack работает нормально - я переместил определения «путей» в «псевдоним» и установил загрузчики для своего контента и прокладок, например jQuery.

Однако осталась проблемаЯ не уверен, как решить.В основном приложение RequireJS использует «текстовый плагин» для включения шаблонов HTML, а Webpack выдает ошибки «Модуль не найден» для шаблонов HTML.

Пример модуля AMD, который я хочу объединить, выглядит примерно так:

Модуль AMD с текстовым плагином 

define([
   'security',
   'modals',
   'text!../templates/contact_info.html'
], function(security, modals, contactInfoTemplate) {
   return {
      foo: function() { return "bar"; }
   };
});

Я думал Я мог бы использовать raw-загрузчик для загрузки файлов шаблонов.Я добавил псевдоним 'text' в 'raw-loader': 

text: {
        test: /\.html$/,
        loader: "raw-loader"
      },

Однако я вижу следующую ошибку для всех моих шаблонов, которые требуются, как указано выше: 

Module not found: Error: Can't resolve 'text'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'text-loader' instead of 'text'.

Я попытался заменить 'text! ...' на 'text-loader! ...', и затем я вижу эту ошибку с жалобой на то, что он не может загрузить / найти модуль HTML! 

Module not found: Error: Can't resolve '../templates/contact_info.html'

webpack.config.js, версия 3.9.1 

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

let basePath = path.join(__dirname, '/');

module.exports = {
  entry: {
    'main': basePath +  'js/main.js',
  },
  context: __dirname,
  output: {
    path: __dirname + '/build',
    filename: '[name].min.js',
    libraryTarget: 'amd',
    umdNamedDefine: true
  },
  module: {
    rules: [
      {
        test: /(\.js)$/,
        exclude: /(node_modules)/,
        use: {
          // babel-loader to convert ES6 code to ES5 + amdCleaning requirejs code into simple JS code, taking care of modules to load as desired
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: []
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      { test: /\.jpg$/, use: [ "file-loader" ] },
      { test: /\.png$/, use: [ "url-loader?mimetype=image/png" ] },
      {
        test: /\.(html)$/,
        use: {
          loader: 'raw-loader',
          options: {
            minimize: true
          }
        }
      }
    ]
  },
  resolve: {
    modules: [
      'js/**/*.js',
      'node_modules',
      path.resolve('./js')
    ],
    extensions: ['.js'], // File types,
    alias: {
      text: {
        test: /\.html$/,
        loader: "raw-loader"
      },
      bridge: 'libs/bridge',
      cache: 'libs/cache',
      cards: 'libs/cards',
      moment: 'libs/moment',
      underscore: 'libs/underscore',
    }
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: '../index.html'
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

Кто-нибудь знает, как заставить Webpack красиво играть с плагином RequireJS Text?

Спасибо!

1 Ответ

0 голосов
/ 11 декабря 2018

Может быть, попробуйте установить text-loader?

Для того, чтобы что-то вроде 'text!../templates/contact_info.html' правильно "загрузилось", поскольку это не JS, вам нужно установить text-loader, чтобы получить веб-пакет для понимания синтаксисаtext!.

npm install text-loader --save-dev

гуд ... я только что установил text-loaded и, похоже, нам также нужно изменить text! на text-loader!

...