自动导入JS模块-打字稿和Webpack

时间:2018-09-18 14:52:09

标签: javascript typescript webpack

我想知道是否有一种方法可以在Typescript和/或Webpack中自动导入javascript模块。

我正在每个Typescript类中导入引导程序,但我认为这不是一个好习惯,因为有时我会在一个html视图中使用2个类。我试图做的是将每个类导入一个文件,然后将其导出,如下所示:

import { ODT } from './Classes/Odt.class';
import { Proyecto } from './Classes/Proyecto.class';
import { Reporte } from './Classes/Reporte.class';

import 'bootstrap';
import 'bootstrap-select';
import 'select2';
import swal from 'sweetalert';;

export {
    ODT,
    Proyecto,
    Reporte,
};

但是当我在webpack中将其编译为产品时,我得到以下警告:The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB)

这是我的webpack(开发版)配置:

const path           = require('path');
var LiveReloadPlugin = require('webpack-livereload-plugin');
var webpack          = require('webpack');

module.exports = {
    mode: 'development',
    watch: true,
    watchOptions: {
        aggregateTimeout: 300,
        poll: true
    },
    plugins: [
        new LiveReloadPlugin({
            appendScriptTag: true
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            'window.jQuery': 'jquery',
            Vue: ['vue/dist/vue.esm.js', 'default'],
        }),
    ],
    entry: {
        main: './src/main.ts',
        odts: './src/Classes/Odt.class.ts',
        proyectos: './src/Classes/Proyecto.class.ts',
        reportes: './src/Classes/Reporte.class.ts',
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
                // exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                loader: 'url-loader',
                options: {
                    limit: 10000
                }
            },
            {
                test: /\.exec\.js$/,
                use: ['script-loader']
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'dev.[name].bundle.js',
        library: ['EntryPoint', '[name]'],
    },
};

0 个答案:

没有答案