Webpack: sass & babel в отдельных файлах - PullRequest
Новая
       8

Webpack: sass & babel в отдельных файлах

0 голосов
/ 14 ноября 2018

Я пытаюсь запустить Webpack с Node для автоматической компиляции 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'
}

Спасибо за помощь, ребята!

...