Webpack 실습 (3) - 초기설치 및 설정

:raising_hand: 개인적인 Webpack 학습 및 공부 내용을 기록하기 위한 포스트입니다.

1. webpack / webpack-cli 설치

// webpack 4 버전 설치
npm install -D webpack@4 webpack-cli

// package.json

  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jjou33/webpackStudy/issues"
  },
  "homepage": "https://github.com/jjou33/webpackStudy#readme",
  "dependencies": {
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.1"
  }

package.json 에 devDependencies 확인

2. webpack 설명 확인

이전에는 몰랐는데 이런 라이브러리 들을 사용할때 가장 먼저 봐야하는것이 help 를 통한 설명인것 같다. 각 command 가 어떤 역할을 하는지 알 수 있다.

Options:
  -c, --config <value...>                Provide path to a webpack configuration file e.g.
                                         ./webpack.config.js.
  --config-name <value...>               Name of the configuration to use.
  -m, --merge                            Merge two or more configurations using 'webpack-merge'.
  --env <value...>                       Environment passed to the configuration when it is a
                                         function.
  --node-env <value>                     Sets process.env.NODE_ENV to the specified value.
  --progress [value]                     Print compilation progress during build.
  -j, --json [value]                     Prints result as JSON or store it in a file.
  --entry <value...>                     The entry point(s) of your application e.g. ./src/main.js.
  -o, --output-path <value>              Output location of the file generated by webpack e.g.
                                         ./dist/.
  -t, --target <value>                   Sets the build target e.g. node.
  -d, --devtool <value>                  Determine source maps to use.
  --no-devtool                           Do not generate source maps.
  --mode <value>                         Defines the mode to pass to webpack.
  --name <value>                         Name of the configuration. Used when loading multiple
                                         configurations.
  --stats [value]                        It instructs webpack on how to treat the stats e.g. verbose.
  --no-stats                             Disable stats output.
  -w, --watch                            Watch for files changes.
  --no-watch                             Do not watch for file changes.
  --watch-options-stdin                  Stop watching when stdin stream has ended.
  --no-watch-options-stdin               Do not stop watching when stdin stream has ended.

Global options:
  --color                                Enable colors on console.
  --no-color                             Disable colors on console.
  -v, --version                          Output the version number of 'webpack', 'webpack-cli' and
                                         'webpack-dev-server' and commands.
  -h, --help [verbose]                   Display help for commands and options.

Commands:
  build|bundle|b [entries...] [options]  Run webpack (default command, can be omitted).
  configtest|t [config-path]             Validate a webpack configuration.
  help|h [command] [option]              Display help for commands and options.
  info|i [options]                       Outputs information about your system.
  serve|server|s [entries...]            Run the webpack dev server. To see all available options you
                                         need to install 'webpack', 'webpack-dev-server'.
  version|v [commands...]                Output the version number of 'webpack', 'webpack-cli' and
                                         'webpack-dev-server' and commands.
  watch|w [entries...] [options]         Run webpack and watch for files changes.

To see list of all supported commands and options run 'webpack --help=verbose'.

위 설명을 참조하여 웹팩 mode , entry , output 설정 후 bundling 진행

node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path dist/main.js
결과

image

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./dist/main.js/main.js"></script>
  </body>
</html>

마지막으로 bundling 후 app.js / math.js 의 결과물이 들어 있는 output path 로 설정한 위치 dist/main.js (본인은 한뎁스 더들어감…) 를 script 에서 로딩한다.

결과

image

정상적으로 잘 돌아감

2. webpack.config.js 파일 설정

help 옵션에서 보았듯이 webpack.config.js 로 설정 파일 네이밍 하여 생성 가능

Options:
  -c, --config <value...>                Provide path to a webpack configuration file e.g.
                                         ./webpack.config.js.
  ...
webpack.config.js
//webpack.config.js

const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    main: "./src/app.js",
  },
  output: {
    path: path.resolve("./dist"),
    // entry 에서 지정해준 Key 값으로 name 설정
    filename: "[name].js",
  },
};
package.json
...

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

...

이후 npm run buiild 커멘드를 통해 번들링 하게되면 이전과 동일한 결과 확인 간으

  • dist 폴더 내 main.js 파일생성

You may also enjoy