Как связать файлы JS и CSS независимо с Webpack? - PullRequest
Новая
       4

Как связать файлы JS и CSS независимо с Webpack?

0 голосов
/ 29 сентября 2018

У меня есть несколько файлов JS и SCSS.Мне нужен Webpack 4, чтобы связать каждую запись JS в один файл JS и каждую запись SCSS в один файл CSS.Файлы JS не импортируют файлы SCSS.Я пытаюсь сделать это со следующим webpack.config.js: 

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

module.exports = {
  entry: {
    scriptFoo: './src/js/scriptFoo.js',
    scriptBar: './src/js/scriptBar.js',
    // ...
    styleBaz: './src/css/styleBaz.scss',
    styleBaq: './src/css/styleBaq.scss'
    // ...
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.(scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
};

Работает нормально, Webpack помещает скомпилированные файлы в каталог dist.Но он также создает лишний фиктивный JS-файл для каждого файла SCSS в каталоге dist: 

webpack.config.js
src/
  js/
    scriptFoo.js
    scriptBar.js
    ...
  css/
    styleBaz.scss
    styleBaq.scss
    ...
dist/
  scriptFoo.js
  scriptBar.js
  ...
  styleBaz.css
  styleBaz.js // Excess
  styleBaq.css
  styleBaq.js // Excess
  ...

Как заставить Webpack не создавать лишние JS-файлы?

Ответы [ 2 ]

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

Используйте плагин ignore-emit-webpack-plugin Webpack, чтобы не создавать лишний файл.Сначала установите его, запустив в консоли: 

npm install --save-dev ignore-emit-webpack-plugin

Затем добавьте его в конфигурацию Webpack: 

const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    // ...
    new IgnoreEmitPlugin(['styleBaz.js', 'styleBaq.js']) // Or simply: new IgnoreEmitPlugin(/^style.*\.js$/)
  ]
};
0 голосов
/ 29 сентября 2018

Это связано с тем, что для каждого свойства в объекте ввода файл js создается в выходных местах назначения.

output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') },

Webpack, создающий фиктивные js, когда css является точкой входа, является известной ошибкой, которая еще не исправлена.

Также имеется несколько файлов ввода вконфигурация входа также повлияет на возможности взаимодействия с деревьями

...