Не получается настроить webpack 4 для работы с css в dev режиме. При запуске в dev режиме стили просто не подтягиваются. Хотелось бы еще настроить возможность livereload для css.
Мои package.json
{
"name": "layout",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development --open"
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/preset-env": "^7.6.2",
"babel-loader": "^8.0.6",
"babel-preset-stage-3": "^6.24.1",
"css-loader": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"path": "^0.12.7",
"style-loader": "^1.0.0",
"webpack": "^4.40.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1"
},
"dependencies": {}
}
и webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
let conf = {
entry: './src/index.js',
output:{
path: path.resolve(__dirname, './dist'),
publicPath: './dist',
filename: 'main.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
rules:[
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/env']
}
},
exclude: '/node_modules/'
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
ignoreOrder: false,
}),
]
};
module.exports = (env, options) => {
console.log('process.env.NODE_ENV = ' + options.mode);
conf.devtool = options.mode === 'production'? false : 'eval-sourcemap';
conf.module.rules.push({
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../',
hot: true,
// hmr: options.mode === 'development'/* ,
reloadAll: true
}
},
"css-loader"
]
})
return conf;
};