質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1099閲覧

webpackで再ビルドすると*.cssと*.css.mapファイルが生成される。

moro123

総合スコア18

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/07/16 08:59

編集2018/07/16 09:01

webpck4系でwebpack-dev-serverで立ち上げて.scssを修正して、再ビルドすると編集したscssファイル名のcsscss.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' } } } } };

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

‘’’
devtool: 'source-map',
‘’’
ここを、
‘’’
devtool: 'inline-source-map',
‘’’
こんな?で、ソースマップを埋め込みするよう指定します。

投稿2018/08/21 09:54

ItoTomonori

総合スコア1283

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問