asya89
@asya89
Начинающий веб-разработчик

Как настроить конфигурацию webpack+express, чтобы при билдинге формировался только один js файл, но несколько css файлов?

Имеется настройка webpack с express js, прописала в entry два файла для того, чтобы формировалось несколько css файлов для продакшна, но при запуске (npm start) формируется также и второй файл super.min.js, а надо только style.min.css и super.min.css. Подскажите пожалуйста, что нужно исправить. Также, почему-то минифицированный js файл весит очень много, с чем это может быть связано. Спасибо всем за ответы. 5d8651b36d4c6241597848.png

package.json такой:
{
"name": "chessapp",
"version": "0.0.0",
"private": true,
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack -d --watch ",
"dev-server": "nodemon bin/www localhost 8080",
"dev-client": "webpack-dev-server --port 3000"
},
"author": "ALsuSh",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^9.6.1",
"babel-loader": "^8.0.6",
"copy-webpack-plugin": "^5.0.4",
"css-loader": "^3.1.0",
"css-mqpacker": "^7.0.0",
"cssnano": "^4.1.10",
"file-loader": "^4.1.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"path": "^0.12.7",
"postcss-loader": "^3.0.0",
"react-hot-loader": "^4.12.13",
"sass-loader": "^7.1.0",
"style-loader": "^1.0.0",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"dependencies": {
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"ejs": "~2.6.1",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"morgan": "~1.9.1",
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}

и webpack.config.js:
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");

// Main const
const PATHS = {
src: path.join(__dirname, './src'),
public: path.join(__dirname, './public'),
};

module.exports = {
mode: 'development',
externals: {
paths: PATHS
},
entry: {
app : './src/index.js',
super : './src/super.js',
},
devtool: 'inline-source-map',
devServer : {
contentBase: './public'
},
output: {
filename: "js/[name].min.js",
path: PATHS.public,
publicPath: '/'
},
module: {
rules: [
{
test: /\.(js|jsx)?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
},
}
,{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { sourceMap: true }
}, {
loader: 'postcss-loader',
options: { sourceMap: true, config: { path: `./postcss.config.js` } }
}, {
loader: 'sass-loader',
options: { sourceMap: true }
}
]
},
{
test: /\.css$/,
use: ['style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { sourceMap: true }
}, {
loader: 'postcss-loader',
options: { sourceMap: true, config: { path: `./postcss.config.js` } }
}]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].min.css",
}),
/* new webpack.HotModuleReplacementPlugin({
multiStep: true
}),

new CopyWebpackPlugin([
{ from: `${PATHS.src}/${PATHS.assets}img`, to: `${PATHS.assets}img` },
{ from: `${PATHS.src}/static`, to: '' },
]),
new HtmlWebpackPlugin({
template: `${PATHS.src}/index.html`
})*/
]
};
  • Вопрос задан
  • 185 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы