webpack-dev-server - 关于webpack的三个问题

问题描述

问 题

关于webpack2的3个问题

问题一：
如果有一个a.js

function foo() {
    return 'foo';
}

function bar() {
    return 'bar';
}
export { foo, bar };

然后入口文件entry.js

import {foo} from './a.js'

虽然我只import引入了其中的foo，但是打包还是会把无用的bar也弄进来，怎样能排除？

---

问题二：

babel编译的配置：

{
            test: /\.js$/,
            exclude: /node_modules/,
            use: [{
                loader: 'babel-loader',
                query: { presets: ['es2015'] }
}

query: { presets: ['es2015'] }

这句加上就会报错:

DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/lo...
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

gitHub的解决方法，在上面链接里了，但是我试了好几种都没用。。谁方便的话帮看看

现在只能把这句删掉，用.babelrc文件里加上，不知道谁知道报错的具体原因和解决方法？

---

问题三：webpack-dev-server热更新对js无效
server.js的配置：

for (var i in config.entry) {
    config.entry[i].unshift('webpack-dev-server/client?http://0.0.0.0:' + devPort, 'webpack/hot/dev-server');
}

使用'webpack/hot/dev-server'时，js文件被修改后，会刷新整个页面，而如果改为："webpack/hot/only-dev-server"把整页刷新禁掉，再改js干脆直接弹出提示让你手动F5刷新了。。。

不知道有什么方法让js文件也可以像css一样热替换？

---

以上三个问题，希望知道的能帮解答一下（全部或者其中某个都行），拜谢！

解决方案

对于问题一：
是可以做到不引入export中没有用的函数的，这种技术叫tree shaking.它的大概是就是在打包的时候，精简掉没有用的export。

在webpack2下，是默认支持tree shaking，我们编译后的bundle.js里面，已经是没有打包进去的

function(module, exports, __webpack_require__) {
  "use strict";

  /* harmony export (immutable) */ exports["a"] = foo;
  /* unused harmony export bar */

  function foo() {
    return 'foo';
  }

  function bar() {
    return 'bar';
  }
}

但是，因为你是webpack+babel配合使用的，因为babel的transform-es2015-modules-commonjs插件的影响，使得tree shaking无法实现。这个使用，babel的配置需要更改为：

presets: [
    'es2015',
    {
        'modules': false
    }
]

这样打包就可以实现了。

这篇关于webpack-dev-server - 关于webpack的三个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！