javascript - Webpack 2 : How do I generate a bundle. js 来自 Bootstrap 预制模板？

Question

我想从这个预先存在的引导模板生成一个bundle.js(它使用较少)https://github.com/BlackrockDigital/startbootstrap-sb-admin-2

我尝试生成它，但失败了，因为样式永远不会生成，并且正如您在“dist”文件夹中看到的那样，bundle.js 是空的(这是预期的，因为作为入口点的 index.js 是空的https://github.com/juanlet/webpack .我应该怎么做才能让 webpack2 包含模板附带的所有 js、css 和 less 文件并将其放入 bundle.js 中？.我应该包含 index.js 上的每个文件吗入口文件？。我已经没有主意了。非常欢迎任何文章、文档或说明。非常感谢。

Answer 1

如果您想使用 webpack 构建它，那么您的第一步实际上是使用您的入口点来导入或需要其他库/文件。

例如，如果您的 wepback.config.js 中的入口点是

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

然后该文件需要包含您希望包含在该文件中的导入。然后这些文件包括其他文件等等，直到您将所有文件通过树的根(索引)捆绑在一起。以一种非常简单的方式，这就是 webapack 所做的事情:它导入/需要您的文件，捆绑它们，并根据您的配置加载它们。

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

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

编辑:这是我将 SASS 提取到它自己的文件中的旧配置示例。它使用 v1，但它或多或少与 webpack 2 相同。我只是现在没有示例:( Here 是在 v2 中使用 extract 的文档。略有不同，但差别不大)。

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 的链接，但我确信您可以做到这一点.