설치

Webpack4에서 webpack-cli 설치도 필요하게 된 것 같습니다.

npm i -D webpack webpack-cli webpack-dev-server

Babel7에서 core라든지 preset라든지 여러가지 인스톨 방법에서 바뀌었다babel-loader 만은 지금까지대로

npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/polyfill @babel/register babel-loader

그리고 이번에는 HtmlWebpackPlugin도 사용해 보겠습니다.

npm i -D html-webpack-plugin html-loader

마지막으로 React

npm i -S react react-dom

설정

Webpack

@babel/register 를 넣으면 Webpack의 설정도 webpack.config.babel.js
webpack.config.babel.js

import webpack from 'webpack'
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'

export default {
  mode: 'development',
  context: path.resolve(__dirname, 'src'),
  entry: './js/index.js',
  output: {
    path: path.join(__dirname, '/www'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.html?$/, loader: 'html-loader' },
    ],
  },
  resolve: {
    modules: [ 'node_modules', path.resolve(__dirname, 'src/js') ],
    extensions: ['.js'],
  },
  devServer: {
    inline: true,
    contentBase: path.resolve(__dirname, 'www'),
    watchContentBase: true,
    hot: true,
    open: true,
    port: 8888,
  },
  devtool: 'inline-source-map',
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
}

설명은 할애
어쩌면 특별한 일은하지 않는 일반적인 설정이라고 생각합니다.

Babel

설치가 @babel/〜가 되었기 때문인지, .babelrc의 쓰는 방법도 바뀌었다useBuiltIns 설정 쓰면 마음대로 polyfill 해주는 것 같다

.babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "targets": { "browsers": ["last 2 versions"] }
    }],
    "@babel/preset-react"
  ],
  "plugins": [],
}

움직여 보자

움직이는 명령 추가

package.json

  "scripts": {
    "start": "webpack-dev-server --hot",
    "build": "webpack --config webpack.config.babel.js"
  },

나머지는 적절하게 파일을 준비합니다.

src/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
  <div id="main"></div>
  <script src="bundle.js"></script>
</body>
</html>

src/js/index.js

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => <div>Hello</div>

ReactDOM.render(
  <App />,
  document.getElementById('main'),
)

npm start 로 움직이면 OK

Reference

이 문제에 관하여(Webpack4 + Babel7 + webpack-dev-server로 React 환경 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/k_tada/items/58424eaed279386b66bc

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다