Javascript 带有网页包的独立块文件

我正在构建一个组件库，并使用Webpack将其打包。有些组件只依赖于我编写的html模板、css和JavaScript，但有些组件需要外部库

我想要实现的是一个

vendor.js

，如果您想要使用的组件需要它，它是可选的

例如，如果用户只需要一个没有供应商依赖关系的组件，那么他们使用只包含我自己的代码的

main.bundle.js

就足够了

在我的

index.js

中，我导入了以下内容：

import { Header } from './components/header/header.component';
import { Logotype } from './components/logotype/logotype.component';
import { Card } from './components/card/card.component';
import { NavigationCard } from './components/navigation-card/navigation-card.component';
import { AbstractComponent } from './components/base/component.abstract';
import { Configuration } from './system.config';

import 'bootstrap-table';

import './scss/base.scss';

所有这些导入都是我自己的，除了

引导表

我已将网页包配置为：

const webpack = require('webpack');

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractScss = new ExtractTextPlugin({
    filename: "[name].bundle.css"
});

module.exports = {
    entry:  {
        main: './src/index.ts'
    },
    output: {
        path: path.resolve(__dirname, 'dist/release'),
        filename: "[name].bundle.js",
        chunkFilename: "[name].bundle.js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor', // Specify the common bundle's name.
            minChunks: function (module) {
                // Here I would like to tell Webpack to give 
                // each bundle the ability to run independently
                return module.context && module.context.indexOf('node_modules') >= 0;
            }
        }),
        extractScss
    ],
    devtool: "source-map",
    resolve: {
        // Add `.ts` as a resolvable extension.
        extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.ejs']
    },
    module: {
        rules: [
            // All files with a '.ts' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.ts?$/, exclude: /node_modules/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },

            // Allows for templates in separate ejs files
            {test: /\.ejs$/, loader: 'ejs-compiled-loader'},

            {
                test: /\.scss$/,
                use: extractScss.extract({
                use: [{
                    loader: 'css-loader', options: {
                        sourceMap: true
                    }
                }, {
                    loader: 'sass-loader', options: {
                        soureMap: true
                    }
                }]
            })}
        ]
    }
}

const webpack = require('webpack');

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractScss = new ExtractTextPlugin({
    filename: "[name].bundle.css"
});

module.exports = {
    entry:  {
        main: './src/index.ts',
        vendor: './src/vendor/vendor.ts'
    },
    output: {
        path: path.resolve(__dirname, 'dist/release'),
        filename: "[name].bundle.js",
        chunkFilename: "[name].bundle.js"
    },
    plugins: [
        extractScss
    ],
    devtool: "source-map",
    resolve: {
        // Add `.ts` as a resolvable extension.
        extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.ejs']
    },
    module: {
        rules: [
            // All files with a '.ts' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.ts?$/, exclude: /node_modules/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },

            // Allows for templates in separate ejs files
            {test: /\.ejs$/, loader: 'ejs-compiled-loader'},

            {
                test: /\.scss$/,
                use: extractScss.extract({
                use: [{
                    loader: 'css-loader', options: {
                        sourceMap: true
                    }
                }, {
                    loader: 'sass-loader', options: {
                        soureMap: true
                    }
                }]
            })}
        ]
    }
}

这将产生两个

.js

文件和一个

.css

。然而，webpacks通用模块加载功能驻留在

vendor.js

中，如果我没有首先包含vendor，那么我的main就无法使用，而且并不总是需要它

总之，如果用户只需要页脚（没有外部依赖项），这就足够了：

如果用户希望使用具有外部依赖关系的表，则需要同时包含这两个内容：

现在，仅包含

main.bundle.js

会给我带来以下错误：

未捕获引用错误：未定义webpackJsonp

我知道，在Webpack配置中创建供应商区块后，我可以通过添加以下内容提取所有常见功能：

new webpack.optimize.CommonsChunkPlugin({
    name: 'common'
})

但是这种方法仍然需要用户包含两个

.js

文件

---

我如何才能做到这一点？当我没有像上面那样提取通用模块时，它似乎只相差2 kb，这对我来说很好。

如果你能忍受一些手工工作，并且真正理解Webpack的功能（我没有）。我是这样解决的：

const webpack = require('webpack');

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractScss = new ExtractTextPlugin({
    filename: "[name].bundle.css"
});

module.exports = {
    entry:  {
        main: './src/index.ts'
    },
    output: {
        path: path.resolve(__dirname, 'dist/release'),
        filename: "[name].bundle.js",
        chunkFilename: "[name].bundle.js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor', // Specify the common bundle's name.
            minChunks: function (module) {
                // Here I would like to tell Webpack to give 
                // each bundle the ability to run independently
                return module.context && module.context.indexOf('node_modules') >= 0;
            }
        }),
        extractScss
    ],
    devtool: "source-map",
    resolve: {
        // Add `.ts` as a resolvable extension.
        extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.ejs']
    },
    module: {
        rules: [
            // All files with a '.ts' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.ts?$/, exclude: /node_modules/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },

            // Allows for templates in separate ejs files
            {test: /\.ejs$/, loader: 'ejs-compiled-loader'},

            {
                test: /\.scss$/,
                use: extractScss.extract({
                use: [{
                    loader: 'css-loader', options: {
                        sourceMap: true
                    }
                }, {
                    loader: 'sass-loader', options: {
                        soureMap: true
                    }
                }]
            })}
        ]
    }
}

const webpack = require('webpack');

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractScss = new ExtractTextPlugin({
    filename: "[name].bundle.css"
});

module.exports = {
    entry:  {
        main: './src/index.ts',
        vendor: './src/vendor/vendor.ts'
    },
    output: {
        path: path.resolve(__dirname, 'dist/release'),
        filename: "[name].bundle.js",
        chunkFilename: "[name].bundle.js"
    },
    plugins: [
        extractScss
    ],
    devtool: "source-map",
    resolve: {
        // Add `.ts` as a resolvable extension.
        extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.ejs']
    },
    module: {
        rules: [
            // All files with a '.ts' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.ts?$/, exclude: /node_modules/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },

            // Allows for templates in separate ejs files
            {test: /\.ejs$/, loader: 'ejs-compiled-loader'},

            {
                test: /\.scss$/,
                use: extractScss.extract({
                use: [{
                    loader: 'css-loader', options: {
                        sourceMap: true
                    }
                }, {
                    loader: 'sass-loader', options: {
                        soureMap: true
                    }
                }]
            })}
        ]
    }
}

在

vendor.ts

中，我只需导入我拥有的任何供应商依赖项：

import 'jquery';
import 'bootstrap-table';

这将导致两个不同的文件，它们都具有Web包引导逻辑

---

希望这对某人有所帮助。

如果你能忍受一些手工工作，并且真正理解Webpack的功能（我没有）。我是这样解决的：

const webpack = require('webpack');

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractScss = new ExtractTextPlugin({
    filename: "[name].bundle.css"
});

module.exports = {
    entry:  {
        main: './src/index.ts'
    },
    output: {
        path: path.resolve(__dirname, 'dist/release'),
        filename: "[name].bundle.js",
        chunkFilename: "[name].bundle.js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor', // Specify the common bundle's name.
            minChunks: function (module) {
                // Here I would like to tell Webpack to give 
                // each bundle the ability to run independently
                return module.context && module.context.indexOf('node_modules') >= 0;
            }
        }),
        extractScss
    ],
    devtool: "source-map",
    resolve: {
        // Add `.ts` as a resolvable extension.
        extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.ejs']
    },
    module: {
        rules: [
            // All files with a '.ts' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.ts?$/, exclude: /node_modules/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },

            // Allows for templates in separate ejs files
            {test: /\.ejs$/, loader: 'ejs-compiled-loader'},

            {
                test: /\.scss$/,
                use: extractScss.extract({
                use: [{
                    loader: 'css-loader', options: {
                        sourceMap: true
                    }
                }, {
                    loader: 'sass-loader', options: {
                        soureMap: true
                    }
                }]
            })}
        ]
    }
}

const webpack = require('webpack');

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractScss = new ExtractTextPlugin({
    filename: "[name].bundle.css"
});

module.exports = {
    entry:  {
        main: './src/index.ts',
        vendor: './src/vendor/vendor.ts'
    },
    output: {
        path: path.resolve(__dirname, 'dist/release'),
        filename: "[name].bundle.js",
        chunkFilename: "[name].bundle.js"
    },
    plugins: [
        extractScss
    ],
    devtool: "source-map",
    resolve: {
        // Add `.ts` as a resolvable extension.
        extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.ejs']
    },
    module: {
        rules: [
            // All files with a '.ts' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.ts?$/, exclude: /node_modules/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },

            // Allows for templates in separate ejs files
            {test: /\.ejs$/, loader: 'ejs-compiled-loader'},

            {
                test: /\.scss$/,
                use: extractScss.extract({
                use: [{
                    loader: 'css-loader', options: {
                        sourceMap: true
                    }
                }, {
                    loader: 'sass-loader', options: {
                        soureMap: true
                    }
                }]
            })}
        ]
    }
}

在

vendor.ts

中，我只需导入我拥有的任何供应商依赖项：

import 'jquery';
import 'bootstrap-table';

这将导致两个不同的文件，它们都具有Web包引导逻辑

希望这对别人有帮助