需要一個包導致錯誤

Question

每次我捆綁腳本時，都會出現以下錯誤：

ERROR in ./resources/assets/scripts/main.js
Module not found: Error: Can't resolve 'datatables.net-colreorder-bs4' in '/home/vagrant/sites/laravel/resources/assets/scripts'
 @ ./resources/assets/scripts/main.js 12:23-63

我的 webpack 配置 js：

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry:  './resources/assets/scripts/main.js',
    output: {
        path: path.resolve(__dirname, './public/js'),
        filename: 'mainBundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['env']
                }
            }
        ]
    },
    stats: {
        colors: true
    },
    node: {
        fs: 'empty'
    },
    devtool: 'source-map'
};

我的主要 js 文件看起來像這樣（沒有其他模塊導致任何問題）。

var jszip = require('jszip');
var pdfmake = require('pdfmake');
var netBs4 = require('datatables.net-bs4')();
var netButtonsBs4 = require('datatables.net-buttons-bs4')();
var buttonsHtml5 = require('datatables.net-buttons/js/buttons.html5.js')();
var buttonsPrint = require('datatables.net-buttons/js/buttons.print.js')();
var netColreorderBs4 = require('datatables.net-colreorder-bs4')();
var netReponsiveBs4 = require('datatables.net-responsive-bs4')();

我檢查了路徑，沒問題，我也將路徑更改為絕對路徑，但沒有任何影響。

包json：

"dependencies": {
        "add": "^2.0.6",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "chart.js": "^2.7.1",
        "datatables.net-bs4": "^1.10.16",
        "datatables.net-buttons-bs4": "^1.5.1",
        "datatables.net-colreorder-bs4": "^1.4.1",
        "datatables.net-responsive-bs4": "^2.2.1",
        "gulp-changed": "^3.2.0",
        "gulp-debug": "^3.2.0",
        "jquery": "^3.2.1",
        "jquery-ui": "^1.12.1",
        "jszip": "^3.1.5",

這個問題仍然沒有解決，由於某種原因，使用 npm 時不會找到 'datatables.net-colreorder-bs4'...我決定將它加載為一個隨時可用的包而不是 webpacking 它...

Answer 1

唯一可能缺少的是resolve但我不確定 webpack 是否默認在 node_modules 中查找：

module.exports = {
  entry:  './resources/assets/scripts/main.js',
  output: {
      path: path.resolve(__dirname, './public/js'),
      filename: 'mainBundle.js'
  },
  resolve: {
    modules: [
      resolve("./node_modules/")
    ]
  },

如果是這種情況會很奇怪，因為找到了其他模塊。

Answer 2

要在客戶端模式下使用 pdfmake，您需要直接使用構建版本：

window.pdfMake = require('pdfmake/build/pdfmake.js');
var vfs = require('pdfmake/build/vfs_fonts.js');
window.pdfMake.vfs = vfs.pdfMake.vfs;