04_Webpack 설정
FrontEnd/웹 지식

04_Webpack 설정

728x90

 

handlebars

화면을 표현할 수 있는 템플릿 엔진

 

Model

문서에 노출시킬 데이터

 

Template

데이터가 문서에 어떻게 보여질지도 작성되어있음

 

 

위 두개를 컴파일을 거쳐 View가된다!

 

 

View

템플릿내에 데이터가 담겨있는 완성된 뷰

 

 

 

그럼이제 handlebars를 사용해보자.

npm i -handlebars -D
npm i handlebars-loader -D

 

//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "singletonStyleTag",
            },
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.hbs$/, //handlebars 설정
        use: ["handlebars-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack",
      template: "./template.hbs",
    }),
  ],
  mode: "none",
};

전 글에서 사용했던 프로젝트에 handlebars 모듈과 loader속성을 추가시켜주고

 

<!--template.hbs-->
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack {{htmlWebpackPlugin.options.title}}</title>
</head>
<body></body>
</html>

 

template.hbs로 파일명을 변경을 해주고 title에 옵션으로 넣어준 title값이 들어가게 설정해주고 빌드하면

 

<!--template.html-->
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack Webpack</title>
<script defer src="bundle.js"></script></head>
<body></body>
</html>

dist파일의 title이 Webpack Webpack으로 원한대로 잘 변경된걸 알 수 있다.

 

plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack",
      template: "./template.hbs",
      meta: {
        viewport: "width-device-width, initialscale=1",
      },
    }),
  ],

만약 meta값을 넣어주고 빌드하면 meta값이 추가된 형태로 html파일이 생성되는것을 볼 수 있다.

 

 

 

Caching

 

서버와 사용자는 사이에 계속해서 데이터를 주고받으면서 자원을 소모한다. 이 자원은 금전적인거 외에도 시간적은 부분도 포함한다. 이 자원을 최소화시켜주는것이 캐싱이다.

 

캐싱을 리소스들의 복사본과 같은 역할을 한다. 리소스의 역할이 변하지 않는다면 같은 요청을 서버에 할 필요가 없는 것이다.

 

이러면 서버요청횟수가 줄어들어 부하가 줄어들게 된다.

 

이 중에서 우리는 브라우저에 담긴 캐시인 Local Caching에 대해 다뤄보겠다.

 

 

브라우저는 우리가 bundle로 전달해준 파일을 실행한다. 이때 bundle.js파일이 바뀌었다해도 브라우저는 파일 명을 가지고 구분하기에 수정되기전 파일을 실행하게 된다. 그래서 Webpack은 bundle파일에 해시값을 넣어줘서 구분하게된다.

 

bundle.1a2a3a.js    > bundle.4d5d6d.js 처럼

 

번들링을 할때 해시값이 붙여지게 되는 것이다.

 

 

 

entry: "./index.js",
  output: {
    filename: "bundle.[hash].js",
    path: path.resolve(__dirname, "dist"),
  },

해시값을 넣으려면 webpack.config에 [hash]를 넣으면 쉽게 적용할 수 있다.

 

이러면 index파일의 값을 변화시키고 빌드할때마다 해시이름이 붙은 파일이 빌드되는것을 볼 수 있다.

 

이런방식은 불필요한 파일을 계속 생성하는 방식이라 이를 제거하는 방법을 알아보자.

 

npm i clean-webpack-plugin -D

위 플러그인을 사용하면 불필요한 파일들을 제거할 수 있다.

 

더보기
더보기 
//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.[hash].js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "singletonStyleTag",
            },
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.hbs$/, //handlebars 설정
        use: ["handlebars-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack",
      template: "./template.hbs",
      meta: {
        viewport: "width-device-width, initialscale=1",
      },
    }),
    new CleanWebpackPlugin(), //CleanWebpack
  ],
  mode: "none",
};

이전에 했던듯이 plugin에 설정값을 넣어주면 된다.

 

 

 

 

기존에 스타일태그를 만들어 html에 주입해줬던 style-loader를 막고 아래 플러그인으로 교체를 해보자.

 

아래 플러그인은 css를 별도 파일로 추출하게 한다.

npm i install mini-css-extract-plugin -D

 

더보기
더보기 
//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.[hash].js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // {
          //   loader: "style-loader",
          //   options: {
          //     injectType: "singletonStyleTag",
          //   },
          // },
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.hbs$/, //handlebars 설정
        use: ["handlebars-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack",
      template: "./template.hbs",
      meta: {
        viewport: "width-device-width, initialscale=1",
      },
    }),
    new CleanWebpackPlugin(), //CleanWebpack
    new MiniCssExtractPlugin(),
  ],
  mode: "none",
};

 

그 후, 똑같이 플러그인과 설정을 해주면 되는데 오류가 났다..

 

검색하면서 시간좀 허비하고 위 플러그인 버전을 1.3.5로 바꾸어줬더니 해결되었다.

 

css가 별도 파일로 잘 만들어져있다.

 

 

이러면 css도 따로 캐싱이되어 재사용도 할 수 있고, html의 파일 길이가 줄어드는 효과가 있다.

 

이 css도 해시값이 있어야 한다.

 

new MiniCssExtractPlugin({
      filename: "[hash].css",
    }),

플러그인에 아래 옵션을 추가해주어서 해시값을 붙여준다.

 

 

 

위 방법의 경우 Js파일을 수정하고 빌드하면 수정하지 않았던 css의 해시값도 바뀌어버리는 문제가 발생한다. 이러면 결국 브라우저가 새 파일로 인식하기때문에 캐싱하는 의미가 없어지게 된다.

 

컨텐츠 hash값을 설정하면 이 문제를 해결할 수 있다.

 

filename: "[contenthash].css",

 

contenthash를 사용하면 각 파일마다 다르게 해시값을 할당한다.

 

부여된 해시값이 다른것을 알 수 있다!

 

 

 

 

Chunk

번들링을 하다보면 Bundle파일이 점점 커지게 된다. 이 큰 bundle파일을 어떠한 규칙을 통해 나눈것들을 Chunk파일이라고 한다.

 

 

runtime chunk

런타임 환경에서 모듈들을 순서대로 실행할 수 있게 초기화하는 코드들을 빼낸 코드들이다. 이 코드들은 변하지 않는 코드들이기 때문에 따로 빼내면 속도를 좀 더 빠르게 할 수 있다.

 

Vender Chunk

외부에서 관리되는 모듈들만 빼낸 Chunk로 외부관리 모듈만 뺀다면 실제로 우리가 작업하는 코드만 관리할 수 있게 된다.

 

 

RuntimeChunk를 만들기 위해서는 아래와같이 optimization 값에 Runtime을 넣어주면 된다. 확인하기 위해 ouput fillename을 살짝 변경하였다.

더보기
더보기 
//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./index.js",
  output: {
    filename: "[name].[chunkhash].js", //name을 넣어준다.
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // {
          //   loader: "style-loader",
          //   options: {
          //     injectType: "singletonStyleTag",
          //   },
          // },
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.hbs$/, //handlebars 설정
        use: ["handlebars-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack",
      template: "./template.hbs",
      meta: {
        viewport: "width-device-width, initialscale=1",
      },
    }),
    new CleanWebpackPlugin(), //CleanWebpack
    new MiniCssExtractPlugin({
      filename: "[contenthash].css",
    }),
  ],
  optimization: {
    //Chunk
    runtimeChunk: {
      name: "runtime",
    },
  },
  mode: "none",
};

 

 

runtime파일이 빌드된것을 볼 수 있다.

 

 

 

Vender thunk를 사용해보기 위해

npm i jquery -S

jquery를 설치해주자.

 

더보기
더보기 
//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./index.js",
  output: {
    filename: "[name].[chunkhash].js", //name을 넣어준다.
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // {
          //   loader: "style-loader",
          //   options: {
          //     injectType: "singletonStyleTag",
          //   },
          // },
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.hbs$/, //handlebars 설정
        use: ["handlebars-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack",
      template: "./template.hbs",
      meta: {
        viewport: "width-device-width, initialscale=1",
      },
    }),
    new CleanWebpackPlugin(), //CleanWebpack
    new MiniCssExtractPlugin({
      filename: "[contenthash].css",
    }),
  ],
  optimization: {
    //Chunk
    runtimeChunk: {
      name: "runtime",
    },
    splitChunks: {
      //node_modules내의 파일을 chunk 분리
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "venders",
          chunks: "all",
        },
      },
    },
  },
  mode: "none",
};

다음 splitChunks옵션을 넣어주면 된다.

 

 

 

이번엔 소스코드와 리소스들을 최적화하는 방법에 대해 알아보자.

 

 

Minification

 

코드의 압축과정이다. 주석을 삭제하거나 console.log()와같은 어플리케이션 실행과 필요없는 코드들을 삭제하게 된다.

 

Mangling

변수명들을 알파벳 한두글자로 압축한다. 코드길이는 많이 줄어들지만 코드를 볼때 난독화되어 알아보기 어렵다는 단점이 있다.

 

 

https://github.com/jantimon/html-webpack-plugin

 

GitHub - jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles

Simplifies creation of HTML files to serve your webpack bundles - GitHub - jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles

github.com

 

위 readme에서 plug속성을 확인할 수 있는데, minify 속성을 보면 예제와 내용을확인할 수 있다.

 

 

plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack",
      template: "./template.hbs",
      meta: {
        viewport: "width-device-width, initialscale=1",
      },
      minify: {
        collapseWhitespace: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
      },
    }),
    new CleanWebpackPlugin(), //CleanWebpack
    new MiniCssExtractPlugin({
      filename: "[contenthash].css",
    }),
  ],

위 설정들을 넣어서 공백을 없애주거나 하는 등의 설정을 넣어줄 수 있다.

 

 

css도 줄여줄 수 있다.

 

https://cssnano.co/

 

CSSNANO | CSSNANO

CSSNANO - postcss based css optimizer

cssnano.co

소스가 중복되거나 주석같은 부분들이 코드가 압축되게 된다.

 

 

cssnano가  적용되게 하기위해서는 아래 플러그인이 필요하다.

 

npm install --save-dev optimize-css-assets-webpack-plugin

 

더보기
더보기 
//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
  entry: "./index.js",
  output: {
    filename: "[name].[chunkhash].js", //name을 넣어준다.
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // {
          //   loader: "style-loader",
          //   options: {
          //     injectType: "singletonStyleTag",
          //   },
          // },
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.hbs$/, //handlebars 설정
        use: ["handlebars-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack",
      template: "./template.hbs",
      meta: {
        viewport: "width-device-width, initialscale=1",
      },
      minify: {
        collapseWhitespace: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
      },
    }),
    new CleanWebpackPlugin(), //CleanWebpack
    new MiniCssExtractPlugin({
      filename: "[contenthash].css",
    }),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require("cssnano"),
      cssProcessorPluginOptions: {
        preset: ["default", { discardComments: { removeAll: true } }],
      },
      canPrint: true,
    }),
  ],
  optimization: {
    //Chunk
    runtimeChunk: {
      name: "runtime",
    },
    splitChunks: {
      //node_modules내의 파일을 chunk 분리
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "venders",
          chunks: "all",
        },
      },
    },
  },
  mode: "none",
};

그 후 홈페이지에 있는 plugin설정들을 그대로 가져다 쓰면 css최적화가 진행된다.

 

 

Js파일은 플러그인만 추가해주면 된다.

 

npm i terser-webpack-plugin -D

 

 

 

더보기
더보기 
//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");

module.exports = {
  entry: "./index.js",
  output: {
    filename: "[name].[chunkhash].js", //name을 넣어준다.
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // {
          //   loader: "style-loader",
          //   options: {
          //     injectType: "singletonStyleTag",
          //   },
          // },
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.hbs$/, //handlebars 설정
        use: ["handlebars-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack",
      template: "./template.hbs",
      meta: {
        viewport: "width-device-width, initialscale=1",
      },
      minify: {
        collapseWhitespace: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
      },
    }),
    new CleanWebpackPlugin(), //CleanWebpack
    new MiniCssExtractPlugin({
      filename: "[contenthash].css",
    }),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require("cssnano"),
      cssProcessorPluginOptions: {
        preset: ["default", { discardComments: { removeAll: true } }],
      },
      canPrint: true,
    }),
  ],
  optimization: {
    //Chunk
    runtimeChunk: {
      name: "runtime",
    },
    splitChunks: {
      //node_modules내의 파일을 chunk 분리
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "venders",
          chunks: "all",
        },
      },
    },
    minimize: true, // js압축
    minimizer: [new TerserWebpackPlugin({})],
  },
  mode: "none",
};

역시 옵션을 넣어주고 빌드를 해보면

 

JS파일들이 압축도 되어있고 난독화 즉 위에서 소개했던 Mangling 작업이 잘 이루어져있음을 볼 수 있다.

 

 

 

 

 

Development Mode

예전에 개발자가 보는 관점과 사용자가 프로그램을 보는 관점이 다르다는 표현을 한 적이 있는데, 그 개발자 모드를 한번 알아보자.

 

npm i webpack-merge -D

위 모듈을 먼저 설치해주자.

 

 

webpack merge는 이전글에 조금더 간단하게 설명되어 있다!

 

다음과 같은 파일구성을 만들어주고

 

 

더보기
더보기 
//webpack.common.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./index.js",
  output: {
    filename: "[name].[chunkhash].js", //name을 넣어준다.
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // {
          //   loader: "style-loader",
          //   options: {
          //     injectType: "singletonStyleTag",
          //   },
          // },
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.hbs$/, //handlebars 설정
        use: ["handlebars-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack",
      template: "./template.hbs",
      meta: {
        viewport: "width-device-width, initialscale=1",
      },
      minify: {
        collapseWhitespace: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
      },
    }),
    new CleanWebpackPlugin(), //CleanWebpack
    new MiniCssExtractPlugin({
      filename: "[contenthash].css",
    }),
  ],
};

 

//webpack.dev.js
const { merge } = require("webpack-merge");
const common = require("webpack.common");

const config = {
  mode: "development",
};

module.exports = merge(common, config);

 

//webpack.prod.js
const { merge } = require("webpack-merge");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const common = require("./webpack.common");

const config = {
  plugins: [
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require("cssnano"),
      cssProcessorPluginOptions: {
        preset: ["default", { discardComments: { removeAll: true } }],
      },
      canPrint: true,
    }),
  ],
  optimization: {
    //Chunk
    runtimeChunk: {
      name: "runtime",
    },
    splitChunks: {
      //node_modules내의 파일을 chunk 분리
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "venders",
          chunks: "all",
        },
      },
    },
    minimize: true, // js압축
    minimizer: [new TerserWebpackPlugin({})],
  },
  mode: "production",
};

module.exports = merge(common, config);

위 코드처럼 중복된 부분을 모은 common파일을 사용해서 분류해주고

 

package.json에서

 

 "scripts": {
    "dev": "webpack --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },

scripts로 빌드 설정을 편하게 할 수 있게 하면 된다.

 

 

위 코드로 실행이 되지 않는다면

 

npm i cross-env

해당모듈을 설치하고

 

"scripts": {
    "dev": "cross-env NODE_ENV=DEVELOPMENT webpack --config webpack.dev.js",
    "build": "cross-env NODE_ENV=PRODUCTION webpack --config webpack.prod.js"
  },

script를 위처럼 바꾸어준다.

 

더보기
더보기 
//webpack.common.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");

const isProduction = process.env.NODE_ENV === "PRODUCTION";

module.exports = {
  entry: "./index.js",
  output: {
    filename: "[name].[chunkhash].js", //name을 넣어준다.
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // {
          //   loader: "style-loader",
          //   options: {
          //     injectType: "singletonStyleTag",
          //   },
          // },
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.hbs$/, //handlebars 설정
        use: ["handlebars-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack",
      template: "./template.hbs",
      meta: {
        viewport: "width-device-width, initialscale=1",
      },
      minify: isProduction //모드에 따라 html이 압축될수도 안될수도
        ? {
            collapseWhitespace: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
          }
        : false,
    }),
    new CleanWebpackPlugin(), //CleanWebpack
    new MiniCssExtractPlugin({
      filename: "[contenthash].css",
    }),
    new webpack.DefinePlugin({
      IS_PRODUCTION: true,
    }),
  ],
};

삼항연산자를 통해 minify에 설정변경하는 부분을 넣어주면

 

npm run build
npm run dev

두 실행방식에 따라 index.html이 압축되거나 안되거나 한다.

 

 

 

 

 

webpack에서는 webpack dev 서버를 지원한다. 이를알아보자.

 

npm i -D webpack-dev-server

역시 모듈을 먼저 설치해 주자.

 

"scripts": {
    "dev": "cross-env NODE_ENV=DEVELOPMENT webpack --config webpack.dev.js",
    "build": "cross-env NODE_ENV=PRODUCTION webpack --config webpack.prod.js",
    "start": "cross-env NODE_ENV=DEVELOPMENT webpack-dev-server --config webpack.dev.js"
  },

위 스크립트를 만들고 실행시켜주자.

 

 

위 설정으로 만든 서버는 몇가지 특징이있다.

 

먼저, dist파일을 제거해도 서버가 잘 작동한다. 파일을 빌드해야지만 바뀌는 브라우저랑 달리 수정만해도 바로바로 적용되기 때문에 무언가 수정했을때 결과를 눈으로 한번에 보기 용이하다.

 

설정내용이나 여러 환경을 볼수있는 옵션도 많다.

 

 

//webpack.dev.js
const { merge } = require("webpack-merge");
const common = require("./webpack.common");

const config = {
  mode: "development",
  devServer: {
    historyApiFallback: true, //라우팅과 관련, 제공하지 않는 라우팅으로 이동하면 예외처리
  },
};

module.exports = merge(common, config);

다음과같이 history.ApiFallback설정을 하면 라우팅이 이상한데로 되었을때 원래 서버로 돌아가던지 하는 기능을 설정할 수 있다.

 

//webpack.dev.js
const { merge } = require("webpack-merge");
const common = require("./webpack.common");

const config = {
  mode: "development",
  devServer: {
    historyApiFallback: {
      rewrites: [{ from: /./, to: "404.html" }],
    }, //라우팅과 관련, 제공하지 않는 라우팅으로 이동하면 예외처리
  },
};

module.exports = merge(common, config);

404 페이지를 직접 만들어 전달할 수도 있다.

 

 

https://webpack.js.org/configuration/dev-server/

 

DevServer | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

다른 옵션은 위 페이지를 참조해보자.

 

 

728x90

'FrontEnd > 웹 지식' 카테고리의 다른 글

GitHub Pull Request  (0) 2022.08.27
05_Webpack 여러 loader들  (0) 2022.01.15
03_Webpack 기본구조  (0) 2022.01.14
02_Module,Bundle  (0) 2022.01.14
01_마크다운(MARK DOWN)  (0) 2022.01.11

    티스토리툴바