Question

我正在尝试使用Node运行Webpack，以自动将babel编译为js，然后将sass编译为CSS，但是遇到了问题。

我希望能够具有以下结构，但是由于某些原因，将其分块执行会使构建失败。它卡在构建脚本中，但我不知道为什么。

.
├── dist
|   ├── index.html
|   └── assets
|       ├── css
|       └── js
└── src
    ├── babel
    ├── html
    └── sass

这里您有我当前的webpack.config.js （注意：此文件中的* _DIR常量是上述结构中文件夹的相应路径。）

let entries = {
    html: path.join(HTML_DIR, 'index.html'),
    javascript: path.join(BABEL_DIR, 'index.js'),
    styles: path.join(SASS_DIR, 'index.scss')
};

let moduleRules = {
    rules: [
        {
            exclude: NODE_DIR,
            test: /\.jsx?$/,
            use: 'babel-loader'
        },
        {
            exclude: NODE_DIR,
            test: /\.(sa|s?c)ss$/,
            use: [
                {
                    loader: cssPlugin.loader,
                    options: { 
                        publicPath: path.join(ASSETS_DIR)
                    }
                },
                'css-loader',
                'sass-loader'
            ]
        },
    ]
};

let output = {
    filename: (data) => {
        console.log(data.chunk.id);
        switch (data.chunk.id) {
            case 'html':
                return 'index.html';
                break;
            case 'javascript':
                return path.join(ASSETS_DIR, 'js', 'index.js');
                break;
            case 'styles':
                return path.join(ASSETS_DIR, 'css', 'styles.css');
                break;
        }
    },
    path: DIST_DIR
};

let plugins = [
    new browserPlugin({
        host: 'localhost',
        port: 8080,
        server : {
            baseDir : DIST_DIR
        }
    }),
    new htmlPlugin({
        filename: 'index.html',
        minify: ENVIRONMENT === 'production',
        template: path.join(HTML_DIR, 'index.html') 
    }),
    new cssPlugin({
        filename: 'styles.css'
    }),
];

module.exports = {
    entry: entries,
    mode:  process.env.NODE_ENV,
    module: moduleRules,
    output: output,
    plugins: plugins,
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.scss', '.sass']
    },
    target: 'web'
}

感谢帮助人员！

Webpack：单独文件中的Sass和Babel

0 个答案: