Webpack: Как встроить CSS из внешнего файла, либо по ссылке, либо по прямому пути? - PullRequest
Новая
       5

Webpack: Как встроить CSS из внешнего файла, либо по ссылке, либо по прямому пути?

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

Мне не повезло, когда я пытался найти способ встроить мои JS и CSS в один файл, но извлекал код из нескольких файлов. Сейчас моя работа заключается в том, чтобы поместить все мои CSS в файл шаблона, но это ужасно медленный и громоздкий способ сделать это.

Моя текущая настройка компилирует .ts в .js, а затем помещает весь этот код в мой окончательный .html. Я хочу иметь возможность получить файл .css из какого-то места и вставить его в мой окончательный .html до того, как будет завершена веб-упаковка, поэтому весь код находится в одном файле. У моего inlineSource уже есть .(js|css)$, поэтому он должен включать мой источник CSS, но когда я использую тег <link>, он не вытягивает CSS.

Вот мой webpack.config.js: 

const path = require('path');
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/myFile/myFile.ts',
    output: {
        filename: 'myFile.js',
        path: path.resolve(__dirname, 'dist/myFile')
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new HtmlWebpackPlugin({
            inlineSource: '.(js|css)$',
            filename: 'myFile.html',
            // title: 'titleHere',
            template: 'src/myFile/myFileTemplate.html'
        }),
        new HtmlWebpackInlineSourcePlugin(),
    ]
};

Вот мой tsconfig.json: 

{
    "compilerOptions": {
        "declaration": true,
        "experimentalDecorators": true,
        "noImplicitAny": true,
        "lib": [ "es2015", "dom" ],
        "module": "es6",
        "moduleResolution": "node",
        "outDir": "./dist",
        "sourceMap": true,
        "strict": false,
        "target": "es5",
        "typeRoots": [
            "./node_modules/@types/"
        ]
    },
    "exclude": [
        "node_modules/*",
        "test/*",
        "src/**/*.spec.ts",
        "dist/*"
    ]
}

Я искренне надеюсь, что кто-то может мне помочь, потому что я на некоторое время разбил голову над этим. Заранее спасибо миллион.

...