Question

我是webpack的新手，有很多选项，文档很少，我真的不知道如何继续。

我的应用程序的结构使我可以轻松构建独立组件（用AngularJS编写），如下所示：

app / styles / 包含一般样式表和模块，这些样式表和模块是应用程序的全局样式和组件之间共享的。
app / src / 包含组件，例如app / src / dashboard /.
app / src / dashboard / 可能包含.js文件（index.js中需要），特定于_resources / stylesheets中的组件的scss文件和_resources / views中的.html模板。

因此我尝试创建多个输出文件，让浏览器有效地处理缓存。

到目前为止，我设法使用以下Webpack配置正确捆绑文件templates.js，vendor.js和app.js：

var path = require("path");
var webpack = require("webpack");

var SplitByNamePlugin = require('split-by-name-webpack-plugin');

module.exports = {
    entry: {
        app: path.resolve(__dirname, 'app/src/app.js')
    },

    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js',
        chunkFilename: '[name].js'
    },

    resolve: {
        root: [
            path.resolve(__dirname, "bower_components")
        ],
        alias: {
            component: path.resolve(__dirname, "app/src"),
            root: path.resolve(__dirname),
            bower: path.resolve(__dirname, "bower_components"),
            node: path.resolve(__dirname, "node_modules"),
            stylesheet: path.resolve(__dirname, "app/sass")
        }
    },

    plugins: [
        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ),

        new SplitByNamePlugin({
            buckets: [
                {
                    name: 'templates',
                    regex: /\.html/
                },
                {
                    name: 'vendor',
                    regex: /node|bower/
                }
            ]
        })
    ],

    module: {
        loaders: [
            {
                test: /\.json/,
                loader: "json-loader"
            },
            /*{
                test: /\.scss/,
                loader: "style!css!sass"
            },*/
            {
                // angularjs doesn't properly export a CommonJS module, so we need to manually export the variable
                test: /[\/]angular\.js$/,
                loader: "exports?angular"
            },
            {
                test: /\.html$/,
                loader: "ngtemplate?relativeTo=" + (path.resolve(__dirname)) + "/!html"
            }
        ]
    }
};

基本上，使用 bower 或节点别名所需的每个.js文件都内置在vendor.js文件中，其他所有内容都会转到app.js.扩展名为.html的所有内容都使用优秀的ngtemplate-loader解析器编译到templates.js中。

这很有效。

现在出现了困难的部分，即使用扩展名.scss或.css 来构建 require（）＆＃39; d> webpack ，而不是使用别名节点| bower < / strong>进入app.css，每个样式表从node | bower别名进入vendor.css文件。

我尝试过使用extract-text-plugin和split-by-name-webpack-plugin无济于事，这两者之间是否存在冲突，或者我做错了什么（在.scss加载器上使用.extract和新的ExtractTextPlugin（＆＃34; styles.css＆＃34;）根本就没有生成任何文件）。

此时此刻我已经迷失了。我感谢任何指点我正确方向的人，我在这个问题上浪费了一个星期没有到达任何地方。

非常感谢任何帮助。

webpack将输出拆分为vendor.js，app.js，templates.js，app.css和vendor.css

0 个答案: