Использование Webpack или Babel для использования node_modules через операторы импорта во внешнем интерфейсе - PullRequest
Новая
       24

Использование Webpack или Babel для использования node_modules через операторы импорта во внешнем интерфейсе

1 голос
/ 31 мая 2019

Поэтому я пытаюсь настроить проект Fontend JS, используя операторы import как для своих пользовательских компонентов, так и для любых node_modules, которые я хотел бы использовать. (Я уверен, что есть другие способы, которыми я мог бы сделать это, но именно так я пытаюсь сделать это для этого проекта.)

Я продолжаю читать, что мне просто нужна некоторая комбинация webpack и babel-loader, но у меня все еще проблемы.

При тестировании lodash и использовании импорта следующим образом: import lodash from 'lodash'; Я получаю Failed to resolve module specifier "lodash". Relative references must start with either "/" ../etc

Непосредственный импорт полного пути дал 404, для ./node_modules/lodash/lodash.js

Вот мой webpack.config.js 

module.exports = {
    entry: './src/app.js',
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    devServer: {
        contentBase: './src',
        port: 9000,
        historyApiFallback: {
            index: 'index.html'
        }
    }
};

Я пытался не исключать node_modules

и мой babel.config.js 

const presets = [
    "@babel/preset-env"
];
const plugins = [
    "@babel/plugin-proposal-class-properties"
];

Есть ли что-то очевидное, что я делаю не так?

У меня большая часть этого в git-репо здесь

1 Ответ

1 голос
/ 03 июня 2019

Я проверил ваш код и обнаружил, что ваша конфигурация не создает index.html.

И devServer.contentBase указывает на ./src, что вызывает ошибку. Он должен указывать на вывод, который является папкой ./dist.

Я обновил конфигурацию вашего веб-пакета 

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

module.exports = {
  context: path.join(process.cwd(), 'src'),
  entry: './app.js',
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader']
    }]
  },
  resolve: {
    modules: [
      path.join(process.cwd(), 'node_modules'),
    ]
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      template: 'index.html'
    })
  ],
  devServer: {
    contentBase: './dist',
    port: 9000,
    overlay: true,
  }
};

и на вашем index.html удалите тег сценария, указывающий на app.js

...