Question

我想要一个基于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版本。

使用webpack-dev-server实时将ES6 +转换为ES5

0 个答案: