DataTables с веб-пакетом

Question

У меня возникли некоторые проблемы при использовании DataTables с веб-пакетом ... Это нормально работает, когда я компилирую в режиме разработки, но не в рабочем режиме ...

webpack.config . js:

const webpack = require('webpack');
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

let config = {
  entry: {
    check_process_nomenclature: path.join(
      __dirname,
      'src',
      'js',
      'toto.js'
    ),
    user_login: path.join(__dirname, 'src', 'js', 'tata.js')
  },
  output: {
    path: path.join(__dirname, 'web', 'dist'),
    filename: '[name].[chunkhash].bundle.js'
  },
  resolve: {
    extensions: ['.js'],
    alias: {
      style: path.resolve(__dirname, 'src', 'style')
    }
  },
  module: {
    rules: [
      { test: /datatables\.net.*/, loader: 'imports-loader?define=>false' },
      {
        test: /\.js$/i,
        exclude: [/(node_modules)/, /(ckfinder)/],
        use: ['babel-loader']
      },
      {
        test: /\.(png|webp|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: '/web/dist',
              name: '[name].[hash].[ext]'
            }
          }
        ]
      },
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {}
          }
        ]
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {}
          },
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin(),
    new ManifestPlugin(),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new CleanWebpackPlugin()
  ],
  optimization: {
    minimizer: [
      new TerserJSPlugin({
        test: /\.js$/i,
        exclude: /\/node_modules/,
        parallel: true,
        sourceMap: true
      })
    ]
  },
  stats: true,
  devtool: 'source-map'
};

module.exports = (env, argv) => {
  if (argv.mode === 'production') {
    config.mode = 'production';
    config.optimization.minimize = true;
  } else {
    config.mode = 'development';
    config.optimization.minimize = false;
  }

  return config;
};

данные. js:

import dt from 'datatables.net-bs';
import 'datatables.net-bs/css/dataTables.bootstrap.css';
import 'style/_datatables.css';
dt(window, $);

всего. js:

import { productInformation, alertMsg, autoLogout } from './_common';
import './datatables';
import { modalOnHide } from './_modal_onhide';
import 'style/toto.css';

const $table= $('#table');
$table.DataTable({
  autoWidth: true,
  paging: true,
  lengthMenu: [
    [25, 50, 100, 250],
    [25, 50, 100, 250]
  ],
  ordering: true,
  info: true,
  stateSave: true,
});

пробег: webpack --mode=production

ошибка:

Я пытался удалил плагин Terser и поместил все import в один и тот же файл js безуспешно. Если у кого-то есть идеи, как решить эту проблему, было бы здорово !!

Answer 1

Я наконец-то нашел, где была ошибка, и, как правило, она была полностью моей ошибкой ... но ее трудно найти, потому что где-то неожиданно (по крайней мере, для меня).

Так что на самом деле "единственная" ошибка Это было связано с тем, что, когда я изучал веб-пакет, я прочитал раздел встряхивания дерева руководства и по какой-то причине скопировал и вставил часть его в свой пакет. json ...

"sideEffects": false

Что, очевидно, было плохой идеей / ошибкой, поскольку в моих модулях не все в es6 (например, в datatables, но не только).