模块化插件

其实只要在最终的html页面中加载了插件，任何component.ts的生命周期内部都可以直接用正确语法(比如改写var成let)抄写普通的js，new一个插件什么的，只是编译时会报找不到变量的红字，编译后完全functional...

我是在组件ts里面写require的，只要不报没有这个module，定义一下用到的变量后终于把找不到$和Swiper的红字给消了。

let $ = require('jquery');
let Swiper = require('Swiper');

这个require要成功必须在webpack.config中设置

module.exports = {
externals:[
    { $:"jQuery" },
    { jQuery:"jQuery" },
    { window: "window"},
    { Swiper: "Swiper"},
  ],

如果是index.html里面<script>了jquery和swiper的话就不需用到loader(是否只是避免了编译时报错而并没有实际获取到jquery对象)

var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  //devtool : 'inline-source-map',
  entry: {
        main:['./app/main.ts',
        './app/sass/main.scss',
        './app/sass/home.scss',
        './app/sass/personal.scss',
        ],
        vendor:[
            
        ]
  },
  externals:[
    { $:"jQuery" },
    { jQuery:"jQuery" },
    { window: "window"},
    { Swiper: "Swiper"},
  ],
  output: {
    path: './dist',
    filename: 'js/app.bundle.js',
    publicPath:'/',
    libraryTarget: "var"
  },
  module: {
    loaders: [
      {test: /\.ts$/, loader: 'ts'},
      {test: /\.html$/, loader: 'raw'},
      {test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css!postcss')},
      {test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")},
      {
        test: require.resolve("./dist/assets/js/jquery.min.js"),
        loader: "imports-loader?jQuery=>jquery"
      },
      {
        test: require.resolve("./dist/assets/js/swiper.jquery.js"),
        loader: 'imports-loader?Swiper=>swiper'
      }
    ]
  },
  postcss: [autoprefixer()],
  resolve: {
    extensions: ['', '.js', '.ts', '.scss'],
    //alias: { jquery: "assets/js/jquery.min.js"}
  },
  plugins: [
    new ExtractTextPlugin("assets/css/[name].css", {publicPath: '/assets/',allChunks: true}),
    new HtmlWebpackPlugin({template: './app/index.html'}),
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        //filename : 'vendor_[chunkhash].js',
        filename : 'js/vendor.js',
        minChunks: Infinity
    }),
    new webpack.ProvidePlugin({
        // $: "jquery",
        // jQuery: "jquery",
        // "window.jQuery": "jquery"
    }),
    /*new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),*/
    new webpack.DefinePlugin({
      app: {
        environment: JSON.stringify(process.env.APP_ENVIRONMENT || 'development')
      }
    })
  ]
};

webpack.config