質問編集履歴

具体的症状を修正

2020/06/15 16:52

投稿

komurojun

スコア16

test CHANGED Viewed

	@@ -1 +1 @@
1	- Webpack~~の「webpack dev server」実行中は、~~SCSSのsource-mapは生成されないので~~しょうか？~~
1	+ WebpackでSCSSをコンパイル時にsourcemapが生成されているのですが、元のSCSSファイルの記載場所に辿れません。

test CHANGED Viewed

@@ -1,3 +1,475 @@
+WebpackでSCSSをコンパイル時にsourcemapが生成されているのですが、chormeの検証ツールで元のSCSSファイルの記載場所に辿れません。
+色々調べたのですが何が原因か全くわかりませんでした。
+コンパイル時に外部ライブラリのCSSも一緒にコンパイルしているのですが原因でしょうか？
+一応、外してコンパイルしたのですがダメでした。
+以下、設定を記載します。よろしくお願いします。
+**index.js**
+```ここに言語を入力
+import '../scss/library/XXXXX.css';
+import '../scss/style.scss';
+```
+**package.json**
+```ここに言語を入力
+{
+  "name": "webpack",
+  "version": "1.0.0",
+  "description": "test",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack --mode development",
+    "build": "webpack --mode production",
+    "watch": "webpack --mode development --watch",
+    "start": "webpack-dev-server"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.10.2",
+    "@babel/polyfill": "^7.10.1",
+    "@babel/preset-env": "^7.10.2",
+    "autoprefixer": "^9.8.0",
+    "babel-loader": "^8.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.0.2",
+    "css-loader": "^3.5.3",
+    "ejs": "^3.1.3",
+    "ejs-plain-loader": "^1.4.1",
+    "file-loader": "^6.0.0",
+    "html-loader": "^1.1.0",
+    "html-webpack-plugin": "^4.3.0",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-mozjpeg": "^9.0.0",
+    "imagemin-pngquant": "^9.0.0",
+    "imagemin-svgo": "^8.0.0",
+    "imagemin-webpack-plugin": "^2.4.2",
+    "imagesloaded": "^4.1.4",
+    "import-glob-loader": "^1.1.0",
+    "jquery": "^3.5.1",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.14.1",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.2.1",
+    "stylelint": "^13.6.0",
+    "stylelint-webpack-plugin": "^2.0.0",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
-Webpackの「webpack dev server」実行中は、SCSSのsource-mapは生成されないのでしょうか？
+    "webpack-dev-server": "^3.11.0"
+  },
+  "dependencies": {
+    "jquery": "^3.5.1",
+    "tether": "^1.4.7"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "ie >= 11",
+    "Android 4.0"
+  ]
+}
+```
+**webpack.config.js**
+```ここに言語を入力
+const path = require('path');
+const webpack = require('webpack');
+//html
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+//CSS
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const StylelintPlugin = require('stylelint-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const ImageminPlugin = require('imagemin-webpack-plugin').default;
+const ImageminMozjpeg = require('imagemin-mozjpeg');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+module.exports = {
+  entry: {
+    'index': path.join(__dirname, '/src/js/index.js'),
+  },
+  devtool: 'source-map',
+  output: {
+    filename: 'js/[name].[hash].js',
+    path: path.resolve(__dirname, 'dist')
+  },
+  devServer: {
+    contentBase: `${__dirname}/dist`,
+    watchContentBase: true,
+    historyApiFallback: true,
+    compress: true,
+    port: 8080,
+    open: true,
+    inline: true
+  },
+  module:{
+    rules: [
+        {
+          test: /.js$/,
+          exclude: /node_modules/,
+          use:
+            {
+              loader: 'babel-loader',
+              options: {
+                presets: [
+                  '@babel/preset-env',
+                ]
+              }
+            }
+        },
+        {
+          test: /.(jpg|png|gif|svg)$/,
+          use: {
+            loader: 'file-loader',
+            options: {
+              name: '/img/[name].[hash].[ext]',
+            }
+          }
+        },
+        {
-コンパイルされて1つのCSSになって修正箇所が追えないです。
+          test:/.(scss|css)$/,
+          use:[
+            {
+              loader: MiniCssExtractPlugin.loader,
+            },
+            {
+              loader: 'css-loader',
+              options: {
+                url: false,
+                sourceMap: true
+              },
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                plugins: [
+                  require('autoprefixer')({
+                    grid: 'autoplace'
+                  }),
+                ]
+              }
+            },
+            {
+              loader: 'sass-loader',
+              options: {
+                sassOptions: {
+                  outputStyle: 'compressed',
+                  sourceMap: true
+                },
+              },
+            },
+            {
+              loader: 'import-glob-loader',
+            },
+          ]
+        },
+        {
+          test: /.ejs$/i,
+          use: [
+            {
+              loader: 'html-loader',
+              options: {
+                minimize: false
+              },
+            },
+            {
+              loader: 'ejs-plain-loader'
+            }
+          ]
+        },
+      ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template : 'src/ejs/index.ejs',
+      minify: false,
+    }),
+    new HtmlWebpackPlugin({
+      filename: 'about/index.html',
+      template : 'src/ejs/about.ejs',
+      minify: false,
+    }),
+    new CleanWebpackPlugin({
+      cleanOnceBeforeBuildPatterns: [`${__dirname}/dist/js/*.*.js`, `${__dirname}/dist/css/*.*.css`]
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'css/style.[hash].css',
+    }),
+    new StylelintPlugin({
+        fix: true,
+    }),
+    new CopyPlugin({
+      patterns: [
+        { from: 'src/img', to: 'img' }
+      ],
+    }),
+    new ImageminPlugin({
+      test: /.(jpe?g|png|gif|svg)$/i,
+      pngquant: {
+        quality: '65-80'
+      },
+      gifsicle: {
+        interlaced: false,
+        optimizationLevel: 1,
+        colors: 256
+      },
+      svgo: {
+      },
+      plugins: [
+        ImageminMozjpeg({
+          quality: 60,
+          progressive: false
+        })
+      ]
+    }),
+  ]
+}
+```