“无法解决''Webpack - 'Aurelia

问题描述：

我试图将Syncfusions的Js库与使用Aurelia Syncfusion Bridge的Aurelia项目集成，但我在尝试加载时遇到以下错误插件到我的供应商包中。“无法解决''Webpack - 'Aurelia

ERROR in dll vendor Module not found: Error: Can't resolve 'syncfusion-javascript' in 'C:\Users\Liam\Downloads\aurelia-webpack1333503894' @ dll vendor

webpack.config.js

const path = require('path'); 
const webpack = require('webpack'); 
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin'); 
const bundleOutputDir = './wwwroot/dist'; 

module.exports = (env) => { 
    const isDevBuild = !(env && env.prod); 
    return [{ 
     stats: { modules: false }, 
     entry: { 'app': 'aurelia-bootstrapper' }, 
     resolve: { 
      extensions: ['.ts', '.js'], 
      modules: ['ClientApp', 'node_modules'], 
     }, 
     output: { 
      path: path.resolve(bundleOutputDir), 
      publicPath: 'dist/', 
      filename: '[name].js' 
     }, 
     module: { 
      rules: [ 
       { test: /\.ts$/i, include: /ClientApp/, use: 'ts-loader?silent=true' }, 
       { test: /\.html$/i, use: 'html-loader' }, 
       { test: /\.css$/i, use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }, 
       { test: /\.(png|jpg|jpeg|gif|cur|svg)$/, use: 'url-loader?limit=25000' }, 
       { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 10000, mimetype: 'application/font-woff2' } }, 
       { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 10000, mimetype: 'application/font-woff' } }, 
       { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }, 

      ] 
     }, 
     plugins: [ 
      new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }), 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./wwwroot/dist/vendor-manifest.json') 
      }), 
      new AureliaPlugin({ aureliaApp: 'boot' }), 

     ].concat(isDevBuild ? [ 
      new webpack.SourceMapDevToolPlugin({ 
       filename: '[file].map', // Remove this line if you prefer inline source maps 
       moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk 
      }) 
     ] : [ 
      new webpack.optimize.UglifyJsPlugin() 
     ]) 
    }]; 
}

webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia- 
webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var extractCSS = new ExtractTextPlugin('vendor.css'); 

module.exports = ({ prod } = {}) => { 
const isDevBuild = !prod; 

return [{ 
    stats: { modules: false }, 
    resolve: { 
     extensions: ['.js'] 
    }, 
    module: { 
     loaders: [ 
      { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, 
      { test: /\.css(\?|$)/, loader: extractCSS.extract([isDevBuild ? 'css-loader' : 'css-loader?minimize']) } 
     ] 
    }, 
    entry: { 
     vendor: [ 
      'aurelia-event-aggregator', 
      'aurelia-fetch-client', 
      'aurelia-framework', 
      'aurelia-history-browser', 
      'aurelia-logging-console', 
      'aurelia-pal-browser', 
      'aurelia-polyfills', 
      'aurelia-route-recognizer', 
      'aurelia-router', 
      'aurelia-templating-binding', 
      'aurelia-templating-resources', 
      'aurelia-templating-router', 
      'bootstrap', 
      'bootstrap/dist/css/bootstrap.css', 
      'jquery', 
      "aurelia-syncfusion-bridge", 
      "syncfusion-javascript"  
     ], 
    }, 
    output: { 
     path: path.join(__dirname, 'wwwroot', 'dist'), 
     publicPath: 'dist/', 
     filename: '[name].js', 
     library: '[name]_[hash]', 
    }, 
    plugins: [ 
     extractCSS, 
     new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) 
     new webpack.DllPlugin({ 
      path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), 
      name: '[name]_[hash]' 
     }), 
     new ModuleDependenciesPlugin({ 
      "aurelia-syncfusion-bridge": ["./grid/grid", "./grid/column"], 
     }), 
    ].concat(isDevBuild ? [] : [ 
     new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) 
    ]) 
}]

};

答

感谢您对Syncfusion控件的兴趣。

我们建议您在webpack.config.js文件中配置aurelia-syncfusion-bridge资源。因为aurelia-syncfusion-bridge的资源被aurelia-webpack-plugin追踪并包含在app.bundle中。

假设如果我们将此插件添加到webpack.vendor.js中，我们需要为每个额外的aurelia-syncfusion-bridge的资源手动绑定以进行适当的绑定。因为，我们建议在webpack.config.js中配置我们的桥接器，它会自动将桥接源与应用程序捆绑在一起。

我们已经准备好相同样本并附在下面。

Sample

请让我们知道，如果你需要在此进一步的援助。

谢谢， Abinaya S

“无法解决''Webpack - 'Aurelia

相关推荐