Transpile ES6 + на ES5 с webpack-dev-сервером в режиме реального времени - PullRequest
Новая
       8

Transpile ES6 + на ES5 с webpack-dev-сервером в режиме реального времени

0 голосов
/ 30 октября 2018

Я хочу иметь простую настройку, основанную на webpack и webpack-dev-server, чтобы писать код ES6 - классы, функции стрелок и сразу видеть результат в браузере. Это работает. Но как создать версию исходного файла ES5 в режиме реального времени. Так что это читабельно для человека. Вот что у меня есть:

package.json 

{
"name": "sand",
"description": "js project",
"version": "1.0.0",
"author": "me",
"scripts": {
    "dev": "webpack-dev-server --hot --open",
    "build": "webpack"
},
"dependencies": {},
"devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-loader": "^8.0.0",
    "webpack": "^4.20.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  }
}

webpack.config.js 

module.exports = {
      entry: "./index.js",
      output: { filename: "bundle.js" },
      mode: 'development',
      module: {
         rules: [   
            {
               test: /\.js?$/,
               exclude: /(node_modules)/,
               loader: "babel-loader",
               options: { "presets": ["@babel/preset-env"] }
            }  
         ]
      }
};

index.html 

<!DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8">
       <title>Sandbox</title>
     </head>
     <body>
       <div id="container"></div>
       <script src="bundle.js"></script>
     </body>
   </html>

.babelrc 

 {
   "presets": ["@babel/preset-env"]
 }

В настоящее время эта настройка выполняется в браузере и выполняет горячие обновления, если я пишу и сохраняю код js. Но у меня нет версии ES5.

...