Cuando se ejecuta Webpack en desarrollo, genera el paquete.js y el bundle.js style.css con los mapas de origen, pero todos los activos a los que se hace referencia en los archivos SCSS se copian en mi carpeta de salida de Webpack, junto con un hash antes de ellos, así:
¿Hay alguna manera de deshabilitar el hash y la copia de activos para el desarrollo local? Entiendo esto para la producción, pero no lo necesito durante el desarrollo. También provoca cambios no organizados que se vuelven molestos.
La configuración de mi Webpack es la siguiente:
const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = (env, argv) => { const hash = generateHash(); const production = argv.mode === 'production' ? true : false; var config = { entry: [ './assets/scripts/src/index.ts', './assets/scss/src/style.scss' ], devtool: production ? false : 'inline-source-map', watch: production ? false : true, devServer: { watchContentBase: true }, module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/, }, { test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ] } ] }, resolve: { extensions: ['.ts', '.js'], }, output: { filename: production ? `bundle.${hash}.min.js` : 'bundle.js', path: path.resolve(__dirname, 'wwwroot') }, plugins: [ new MiniCssExtractPlugin({ filename: production ? `style.${hash}.min.css` : 'style.css' }) ] }; return config; }; function generateHash() { var result = ''; var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; var charactersLength = characters.length; for (var i = 0; i < 15; i++) { result += characters.charAt(Math.floor(Math.random() * charactersLength)); } return result; }Si pasa un objeto de options con url: false a css-loader , dejará de importar esos archivos. Y dado que desea deshabilitar solo para el desarrollo, puede usar esa variable de production que tiene, así:
{ test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, { loader: "css-loader", options: { url: production, }, }, 'sass-loader' ] }