webpack4 tree-shaking无效？

Question

我按照官方文档来配置了，为啥tree-shaking无效？

//  webpack.config.js
module.exports = {
    mode: 'development',
    entry: './index.js',
    output: {
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                    },
                ],
                exclude: /node_modules/
            }
        ]
    }
}

//  index.js
import {cube} from './validator.js';

console.log(cube(5));

//  validator.js
// 这个函数没有被其他地方引用过
export function square(x) {
    return x * x;
}

// 这个函数被引用了
export function cube(x) {
    return x * x * x;
}

//  .babelrc
{
  "presets": [
    ["@babel/preset-env", {
      "modules": false
    }]
  ]
}

//  打包结果bundle.js
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"square\", function() { return square; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"cube\", function() { return cube; });\n// 这个函数没有被其他地方引用过\nfunction square(x) {\n  return x * x;\n} // 这个函数被引用了\n\nfunction cube(x) {\n  return x * x * x;\n}\n\n//# sourceURL=webpack:///./validator.js?");

bundle.js里并没有标识 unused harmony export square
请问是为什么？？？

Answer 1

还少了步骤吧。
package.json 要配置 sideEffects。
mode 要设为 production。

Answer 2

不要使用mode: development，官方示例bundle.js是测试打包生成的文件，tree-shaking是用于生产环境。