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

Question

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

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

Answer 1

如果你想用 webpack 构建它，你的第一步实际上是使用你的入口点 import 或 require 其他 libs/files.

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

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

然后该文件需要包含您希望包含在该文件中的 imports。然后这些文件包括其他文件等等，直到您通过树的根（索引）捆绑了所有文件。以一种非常简单的方式，这就是 webapack 所做的：imports/requires 你的文件，捆绑它们，并根据你的配置加载它们。

为了 load/compile 你的 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 中提供一个 link （我忘记做的一件事是添加 links 到/dist，但我相信你能做到。

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

Webpack 2: How do I generate a bundle.js from Bootstrap premade template?

javascript

optimization

node.js

npm

webpack-2