개발자.. 너란놈..

WebPack에서 그냥 실행 했을 경우에는 개발자 도구 시 소스가 깨져서 보이는 경우가 있다.

개발 시에는 개발자 도구를 통하여 디버깅을 할 수도 있기 때문에 webpack 세팅을 2개로 나눠서 하는 경우가 좋다.

2개로 나눠서 아래와 같이 개발 실행 시에는 개발자 도구에서 볼 수 있게 세팅을 해주면 된다.

devtool : 'inline-source-map',

Webpack에서 scss를 사용하기 위해서는 아래와 같이 세팅이 필요하다.

module: {
    rules: [
      {
        test: /\.s[ac]ss/i,
        use: [
          'style-loader',
          // css-loader 소스맵 옵션 활성화
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            }
          },
          // sass-loader 소스맵 옵션 활성화
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ],
        exclude: /nodeModules/,
      },    
    ],
  },

Webpack을 사용하여 이미지를 경로에 넣으려면 webpack.config.js를 수정하지 않으면 넣기가 어렵습니다.

아래와 같이 2가지를 추가해주고 소스 상에서는 alias로 되어있는 부분으로 이미지를 가져와서 사용하면 됩니다.

아래는 사용 하는 방법 입니다.