Webpack 2：如何从Bootstrap预制模板生成bundle.js？

如果要使用webpack进行构建，则第一步实际上是使用您的入口点import或require其他库/文件。

因此，例如，如果您在wepback.config.js中的入口是

entry: {
   bundle: './src/js/api/index.js',
   vendor: VENDOR_LIBS
},

然后，该文件需要包含imports您希望包含在该文件中的文件。然后，这些文件包括其他文件，依此类推，直到所有文件都通过树的根（索引）捆绑在一起为止。这是webapack的一种非常简单的方式：它导入/需要您的文件，将它们打包，然后根据您的配置加载它们。

为了加载/编译LESS，您要么必须将其作为导入内容包含在JS文件中，要么还可以使用extract-text-webpack-plugin生成单独的CSS包。

这是我可以给这个问题的最好的概述，因为我不知道您想要获取代码并将其打包的确切方法。如有问题，请随时提出，我将编辑答案以尝试并帮助回答它们。

编辑：这是旧配置的示例，我已将SASS提取到它自己的文件中。它使用的是v1，但对于webpack 2来说，它的工作原理大致相同。我现在没有一个示例：（这是extract在v2中使用的文档。虽然有点不同，但差别不大）。

module.exports = {
    devtool: 'eval',

    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        'babel-polyfill',
        './app/index',
    ],

    resolve: {
        extensions: ['', '.js']
    },

    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: '/public/'
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin('public/app.css'),
        new DashboardPlugin(dashboard.setData)
    ],

    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['react-hot', 'babel'],
            include: path.join(__dirname, '..', 'app')
        },

        // JSON
        {
            test: /\.json$/,
            loaders: ['json-loader']
        },

        // Img
        {
            test  : /\.(png|jpg|svg|eot|ttf|woff|raw)$/,
            loader: 'url-loader?limit=4096'
        },

        // Sass
        {
            test: /\.scss$/,
            loaders: [ 'style', 'css?sourceMap', 'postcss', 'sass?sourceMap' ]
        }]
    },

    postcss: [autoprefixer({ browsers: ['last 2 versions'] })],
}

主要编辑：

这里有一个示例存储库：https : //github.com/thesublimeobject/webpack2example

运行webpack将捆绑您的文件，这些文件是从我创建的index.js文件导入的。这将捆绑我通过npm安装并从index.html文件中删除的所有外部库。我没有测试任何生成的代码，因为这超出了这个问题的答案。您的LESS也将作为一个单独的文件捆绑到dist文件夹中，您需要在HTML中提供一个链接（这是我忘记做的一件事情，是将链接添加到/ dist，但我确定您可以做到这一点。