webpck
4系でwebpack-dev-server
で立ち上げて.scss
を修正して、再ビルドすると編集したscss
ファイル名のcss
とcss.map
ファイルが同じディレクトリに生成されてしまいます。前まではそのような挙動はしてなかったのですが、急にファイル生成されるようになったので、生成しないようにするにはどうしたらよいでしょうか。
ご存知の方がいたら教えてください。下記がwebpack.config.js
になります。
const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const MODE = 'development'; const enabledSourceMap = (MODE === 'development'); module.exports = { mode: MODE, entry: ['./src/index.js'], output: { path: path.resolve(__dirname, 'dist'), publicPath: '/', filename: 'bundle.js' }, resolve: { alias: { '@': path.resolve(__dirname, 'src'), public: path.resolve(__dirname, 'public') } }, devtool: 'source-map', module: { rules: [ { test: /.js$/, use: [ { loader: 'babel-loader', options: { plugins: ['react-hot-loader/babel'] } } ], exclude: /node_modules/ }, { test: /.scss/, use: ExtractTextPlugin.extract({ use: [ { loader: 'css-loader', options: { modules: true, // CSS内のurl()メソッドの取り込みを禁止する url: false, // CSSの空白文字を削除する minimize: true, // ソースマップを有効にする sourceMap: enabledSourceMap, // 0 => no loaders (default); // 1 => postcss-loader; // 2 => postcss-loader, sass-loader importLoaders: 2 } }, { loader: 'postcss-loader', options: { // PostCSS側でもソースマップを有効にする sourceMap: enabledSourceMap, plugins: [ // Autoprefixerを有効化 // ベンダープレフィックスを自動付与する require('autoprefixer')({ grid: true }) ] } }, { loader: 'sass-loader', options: { // ソースマップの利用有無 sourceMap: enabledSourceMap } } ], fallback: 'style-loader' }) }, { // 対象となるファイルの拡張子 test: /.(gif|png|jpg|eot|wof|woff|ttf|svg)$/, // 画像を埋め込まず任意のフォルダに保存する loader: 'file-loader', options: { name: '[path][name][hash].[ext]', publicPath: '/' } } ] }, devServer: { contentBase: path.join(__dirname, 'public'), historyApiFallback: true, hot: true, open: true }, plugins: [ new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(), new ExtractTextPlugin('style.css'), new HtmlWebpackPlugin({ template: './public/index.html' }) ], optimization: { splitChunks: { cacheGroups: { commons: { test: /[\/]node_modules[\/]/, name: 'vendor', chunks: 'all' } } } } };
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。