Скомпилировать CSS и JS в файлах различий / WEBPACK - PullRequest
Новая
       156

Скомпилировать CSS и JS в файлах различий / WEBPACK

0 голосов
/ 07 августа 2020

В течение 2 дней я пытался скомпилировать файлы js и css в отдельный файл, потому что теперь все вместе. Кто-нибудь знает, как это можно решить? Буду очень признателен за помощь.

Вот мой код webpack.config. js

const path = require('path');
const webpack = require('webpack');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'src/dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    "style-loader", // creates style nodes from JS strings
                    {
                        loader: "css-loader",
                        options: {
                            url: false
                        }
                    },
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ]
            },
        ]
    },
    plugins: [
        new BrowserSyncPlugin({
        // browse to http://localhost:3000/ during development,
        // ./public directory is being served
            host: 'localhost',
            port: 3000,
            files: ['./src/*.html'],
            server: { baseDir: ['src'] }
        }),
    
     new webpack.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery'
     })
 
    ]
};

1 Ответ

0 голосов
/ 07 августа 2020

Я думаю, что MiniCssExtractPlugin - это то, что вы ищете.

Он берет результат css-loader и создает. css пакеты. Он позаботится о загрузке их в браузере (нажав часть кода в коде выполнения веб-пакета), а также да, он минимизирует. css:).

Простое использование: 

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

Да, вы правы. Style-loader создает javascript фрагментов, которые позже во время выполнения создает. css правил и sh их в глобальную css область браузера.

...