Question

我正在尝试使用webpack使我的角度应用程序对SEO友好。我已经成功运行“ npm run build：prod”和“ npm run server”。但是，当我运行我的应用程序时，我面对的是webpack生成的server.js文件中的“ bxslider未定义”。

但是我已经在角度分量中定义了此变量。

这是我的代码。webpack.server.config.js

const path = require('path');
const webpack = require('webpack');
var node_modules_dir = path.join(__dirname, 'node_modules');

var config = {
entry: {
   server: './server.ts',
},
target: 'node',
resolve: { 
   extensions: ['.ts', '.js'],
alias:{
  bxslider:'./src/assets/js/bxslider.js'
 }
},
externals: [/(node_modules|main\..*\.js)/,],
output: {
  libraryTarget: 'commonjs2',
  path: path.join(__dirname, 'dist'),
  filename: '[name].js'
},
module: {
  rules: [
    { test: /\.ts$/, loader: 'ts-loader' }
  ]
},
optimization: {
  minimize: false
},
plugins: [
new webpack.ContextReplacementPlugin(
  /(.+)?angular(\\|\/)core(.+)?/,
  path.join(__dirname, 'src'), // location of your src
  {} // a map of your routes
),
new webpack.ContextReplacementPlugin(
  /(.+)?express(\\|\/)(.+)?/,
  path.join(__dirname, 'src'),
  {}
),
new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery',
   "window.jQuery": "jquery"
}),
new webpack.DefinePlugin({

})
]
}
module.exports = config;

这是我的Angular组件，我在上面定义了bxslider

import { Component, OnInit } from '@angular/core';
import { CommonService } from '../common/common.service';
declare var $:any;
import { Subscription }   from 'rxjs';
import { Router , ActivatedRoute} from '@angular/router';
declare var $:any;
declare var bxslider: any;

@Component({
  selector: 'app-layout',
  templateUrl: './auth-layout.component.html'
})
export class AuthLayoutComponent implements OnInit {
   subscription: Subscription;
   constructor(private commonService: CommonService, private router: Router) 
    { }

      ngOnInit() {

      }


  }

我正面临dist文件夹中server.js文件中的“ bxslider未定义”。谁能告诉我如何在webpack或server.js文件中定义的变量中添加第三方库

这对我有很大帮助。

谢谢

在angular 6的webpack.server.config中添加第三方库变量

0 个答案: