// ...
module: {
rules: [
{
test: /\.sass$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader?modules&localIdentName=[hash:base64:5]&minimize', 'sass-loader']
})
}
]
}
// ...const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlMinifier = require('html-minifier').minify;
module.exports = {
entry: {
base: './src/base.js',
index: './src/index.js'
},
output: {
filename: '[chunkhash:7].js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.sass$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader?modules&localIdentName=[hash:base64:5]&minimize', 'sass-loader']
})
}
]
},
devServer: {
stats: 'errors-only'
},
plugins: [
new ExtractTextPlugin({
filename: '[md5:contenthash:hex:7].css'
}),
new HtmlWebpackPlugin({
template: 'src/index.html',
minify: htmlMinifier
})
]
};import './base/style.sass';
import './base/logic.js';.page
background-color: #333<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
</head>
<body class="${ ??? }">
<p>Hello world!</p>
</body>
</html>
// styles.scss
.body { color: red; }// file.js
import styles from './style.css';
document.body.classList.add(styles.body);