Мой код работает, но он заканчивается ненужными файлами .js в выходном каталоге. Я пытаюсь найти способ получить чистый вывод. Чтобы понять, что я имею в виду, я опишу свой код ниже:
Вы можете найти мой проект здесь .
Конфигурация Webpack следующая (tasks/options/webpack.js
, я использую grunt для запуска webpack, если это важно):
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
build: {
...
entry: {
app: `${path.resolve()}/src/assets/js/app.js`,
main: `${path.resolve()}/src/assets/sass/main.scss`,
editor: `${path.resolve()}/src/assets/sass/editor.scss`,
},
output: {
path: `${path.resolve()}/dist/assets/js`,
filename: '[name].js',
},
...
devtool: 'nosources-source-map',
plugins: [
...
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer()],
},
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '../css/[name].css',
}),
...
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|vendor)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/env', '@babel/preset-react'],
plugins: [
'transform-class-properties',
'@babel/plugin-proposal-object-rest-spread',
],
},
},
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader?-url&sourceMap',
},
{
loader: 'postcss-loader',
options: {
parser: 'postcss-scss',
sourceMap: true,
},
},
{
loader: 'sass-loader',
query: {
outputStyle: 'extended',
sourceMap: true,
sourceMapContents: false,
},
},
],
},
],
},
},
};
Если я запускаю это, я получаю следующий вывод в dist/assets/...
:
- JS / app.js
- JS / app.js.map
- JS / editor.js
- JS / editor.js.map
- JS / main.js
- JS / main.js.map
- CSS / editor.css
- CSS / editor.css.map
- CSS / main.css
- CSS / main.css.map
, где следующие файлы не нужны, только с небольшим кодом веб-пакета:
- JS / editor.js
- JS / editor.js.map
- JS / main.js
- JS / main.js.map
Я получаю, что они генерируются из-за вывода, который я объявил, и MiniCssExtractPlugin
извлекает (S) код CSS из файлов .js.
Нет ли способа, чтобы я мог сказать: "Если запись является файлом SCSS, выведите CSS в dist/css/[name].css
" вместо того, чтобы сначала вывести его в dist/js/[name].js
, затем извлеките CSS из этого файла JS в dist/css/[name].css
и оставляя неиспользованные файлы .js в dist/js/
?
Может быть, это не так, как работает Webpack.
Я, конечно, могу запустить другой плагин, чтобы потом очистить папку dist, но мне любопытно, есть ли способ поместить все файлы в нужное место, не оставляя файлы, которые мне там не нужны.
Надеюсь, все достаточно ясно, если нет, пожалуйста, спросите. Спасибо за вашу помощь!