小编ARS*_*S81的帖子

我正在使用Babel 7和Webpack 4进行一个Web项目.我之前从未使用过Babel,也无法真正理解它的某些部分.基于我正在使用的文档,@babel/preset-env因为它似乎是推荐的方式(特别是对于初学者).还通过我的.browserslistrc文件使用浏览器列表集成.

Webpack编译好(babel-loader版本8.0.2),我没有错误,但我对useBuiltIns: "entry" 这里提到的这个选项以及polyfill系统如何在Babel中工作感到困惑.

.babelrc.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      "useBuiltIns": "entry" // do I need this?
    }]
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
};

.browserslistrc
从这里复制(认为​​合理,因为我的项目使用的是Bootstrap).

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

所以我的问题是: …

我对ES6 +相对较新（称为现代JavaScript），但似乎如果要在浏览器中使用它，则需要babel- minify或terser。（首先我以为Babili是另一位玩家，但这只是Babel-Minify 的旧名字）

关于用于浏览器的polyfill，可以使用生产就绪的解决方案，例如@ babel / polyfill或Polyfill.io，通过它们，可以将较小的+更快的代码发送给现代浏览器，因为它们不需要/很少需要polyfill（快速测试浏览器，加载动态所需的polyfill，然后启动我们应用的主脚本）。因此，使用这些现代技术似乎绝对合理。

这是我选择babel-minify或的困境terser。

该团队的WebPack 决定开关，以terser在即将举行的WebPack 5
的巴贝尔队取得了比较表显示terser在速度上要好得多。
文档说这terser是uglify-es以前被广泛使用的一个分支。

这些使我认为我必须选择terser。

但是另一方面，转换仍然需要Babel（并且Babel可以用于许多有用的东西）。他们在业务很久以前（虽然Babili/babel-minify是首次发布于2016年8月26日，所以uglify是老年人）。他们在GitHub上有一个很棒的开发人员社区，可能早已发现并修复了错误。基于这些，我对生产安全输出感到更加信任。但是我还没有找到任何有关babel-minifyover 的专业文章terser。

问题：

我会选择，terser因为它看起来很有希望，并且上面已经说明了原因，但是：

• 什么情况下我应该babel-minify用完terser？
• 使用Babel软件包进行所有操作是否具有任何优势？

我从一个月开始学习Webpack 4。我想做的大多数事情都工作得很好，但是这个importLoaders选择css-loader对我来说还是个谜。它的官方文档很差，而且我还没有找到关于它的详细解释。

我的用例与文档中介绍的用例非常接近：

{
  test: /\.s?css$/,
  use: [
    ExtractCssChunks.loader,
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2, // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
        import: true, // is true by default, but should I use instead false here???
        url: false // let postcss do it
      }
    },
    'postcss-loader',
    'sass-loader'
  ]
}

而我的vendor.scss例如具有不同类型的导入：

@charset 'UTF-8';

// Google fonts
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Dosis:200,400,500,600');

//FontAwesome (from node_modules)
@import "~@fortawesome/fontawesome-svg-core/styles";

// Site theme
@import "theme/index"; …

我有一个 Web 项目，其中使用webpack-dev-server了启用 HMR的工作 Webpack4 配置，并通过 npm 脚本以这种方式启动：

cross-env NODE_ENV=development webpack-dev-server --inline --hot

一切正常，HMR 适用于我的 js 和 scss 文件。现在我想知道是否可以扩展我的 Webpack 配置以在我修改视图模板文件时在浏览器中完全重新加载。

对我来说似乎不能自己webpack-dev-server做到这一点，所以我想我需要一些其他的插件。在谷歌搜索了一下之后，这是我得到的：

1. webpack-dev-server +浏览器同步-webpack-plugin
2. 将我的配置重写为webpack-serve，因为它似乎可以做到
3. chokidar + webpack-dev-middleware（用于重新加载的 API？）

所以我的问题是，使用 Webpack 4(.17.2) 获得 HMR + watch 给定路径并在文件更改（blade/twig/php/etc...）时重新加载浏览器的最佳方法是什么？

我当前配置的相关部分：

devServer: {
  index: '',
  open: true,
  hotOnly: true,
  publicPath: '/build/',
  host: 'mysite.test',
  proxy: {
    '**': {
      target: 'http://mysite.test',
      changeOrigin: true,
      headers: {
        'X-Dev-Server-Proxy': 'http://mysite.test'
      }
    }
  }
}