Скомпилируйте .ts и .less с Webpack - PullRequest
Новая
       8

Скомпилируйте .ts и .less с Webpack

0 голосов
/ 26 февраля 2019

Я пытаюсь скомпилировать файлы TypeScript и Less с использованием отдельных записей.

package.json: 

"devDependencies": {
    "css-loader": "^2.1.0",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.5.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.3",
    "typescript": "^3.3.3",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  }

webpack.config.js: 

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
    entry: {
        ts: './TypeScript/index.ts',
        less: './Less/index.less'
    },
    resolve: {
        extensions: ['.ts', '.js', '.less', '.css'],
        alias: { // workaround issue with lib https://github.com/globalizejs/globalize/issues/814
            'cldr$': 'cldrjs',
            'cldr': 'cldrjs/dist/cldr'
        }
    },
    output: {
        filename: 'bundle-[name].js',
        path: path.resolve(__dirname, 'wwwroot/bundles/')
    },
    devtool: isProduction ? 'none' : 'source-map',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [{
                    loader: 'ts-loader'
                }]
            },
            {
                test: /\.(le|c)ss$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                }, {
                    loader: 'css-loader'
                }, {
                    loader: 'less-loader'
                }]
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: '[name].css',
            chunkFilename: '[id].css',

        })
    ],
};

Он генерирует 3 файла: bundle-less.js, bundle-ts.js и less.css.Как предотвратить генерацию bundle-less.js?Потому что мне нужны только скомпилированные машинописные и CSS-файлы.Или есть причина, по которой он должен быть включен в мой сайт?Я буду признателен за любую помощь.

1 Ответ

0 голосов
/ 26 февраля 2019

Это известная проблема mini-css-extract-plugin.Вы можете проверить прогресс и некоторые обходные пути здесь .

Нет необходимости включать bundle-less.js в ваш окончательный HTML.Также вы можете убедиться, что он содержит только некоторый стандартный код веб-пакета, поскольку стиль был извлечен из него.

Возможные обходные пути

  • Исключить этот файл из HtmlWebpackPlugin (если вы используете его для генерации вашего окончательного HTML) 
plugins: [
    //...
    new HtmlWebpackPlugin({
        template: 'template.html',
            excludeAssets: [/bundle\-less\.js/],
        }),
        new HtmlWebpackExcludeAssetsPlugin()
],
  • Удалить этот файл после сборки
    • Просто rm на postbuildnpm hook
    • Настройка del-webpack-plugin (или аналогичный) для удаления этих нежелательных файлов
...