Webpack.config.js

웹팩이란?

웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리입니다.

라는데 나는 잘 모르겠고, 그냥 느낌바로는 가장 최초로 실행되는 .js .html 파일에서 import 되어 있는 모든 .js 파일 .html 파일 .css, .scss 파일은 한 파일에 압축해서 때려 박았다라고 생각했다.

웹팩을 사용하기 위해서 설정 파일은 만들어야 한다

파일이름은 webpack.config.js로 폴더는 해당 프로젝트 폴더 가장 상단에 위치해 있어야 한다

//webpack.config.js

module.exports = [
  Object.assign({}, { // 확장성을 위해 추가 했던 기억이....아마도 ?
    entry: {
      react_index: "./index.js", // webpack을 적용할 최상단의 .js 파일
    },
    output: {
        filename: "[name].js", // file build하고 나온 후의 이름 설정 [name] -> react_index 따라감
        path: path.resolve(__dirname + "/dist/dist"), // build후 js파일 위치
        publicPath: './'
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/, // 모든 .js, .jsx 파일 적용 하겠다 라는 설정
          exclude: /(node_modules|bower_components)/, // 다만 (node_modules|bower_components) 의 하위 폴더는 무시
          use: {
            loader: 'babel-loader', // 웹팩을 적용하기위해 babel-loader 사용
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
            },
          }
        },
        {
          test: /\.(c|sa|sc)ss$/, // 모든 .css .scss .sass 웹팩 적용
          use: [
            {
              loader: 'style-loader',
            },
            {
              loader: 'css-loader', // css만 하려면 여기까지만 해도 무방
              options: {
                sourceMap: true,
                importLoaders: 2,
              },
            },
            { loader: 'scoped-css-loader' },
            {
              loader: 'sass-loader', // sass도 하겠다면 sass-loader 추가
            },
          ],
          exclude: /(node_modules)/ // 단 node_modules 하위 폴더는 무시
        },
        {
          test: /\.(ttf|eot|png|svg|gif|woff|woff2|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, // 해당 된 이미지, 로고 같은 파일 웹팩 적용
          use: [{
              loader: 'file-loader', // 파일을 적용시 file-loader 사용
          }],
          exclude: /(node_modules)/ // 단 node_modules 하위 폴더는 무시
        },
      ]
    },
    resolve: {
      extensions: ['.js', '.jsx'], 
      //웹팩이 알아서 경로나 확장자를 처리할 수 있게 도와주는 옵션 extensions에 넣은 확장자들은 웹팩에서 알아서 처리
    },
    node: {
      __dirname: true, // 각 각의 옵션을 설정해주어야
      __filename: true, // __dirname, __filename을 인식한다 설정 해주지 않는 다면 undefined
    },
    plugins: [ // html을 적용 하기위해 해장 plugin을 설정 해주어야 한다
      new HtmlWebpackPlugin({
        filename: "index.html",
        minify: {
          collapseWhitespace: true
        },
        hash: true,
        template: './public/index.html'
      }),
    ],
    target: 'node',
    externals: {
      fs: 'commonjs fs'
    }
  })
];

아직 웹팩을 완벽하게 이해하지 못했기에 내가 설정했지만 맞게 했는지 확실하지 않고 결과가 잘 나오기 때문에 pass! 였는데 나중에 정확히 분석해봐야 겠다