想问个 webpack-dev-server/babel 的问题，生成的 js 里目标代码没执行，也没报错

[cleveryun]

代码所在仓库地址： https://github.com/Yakima-Teng/utils-daily/tree/master/examples

不过我感觉问题主要跟下面贴的这些代码有关，麻烦诸位帮忙看看是不是哪里写错了（现在的问题是能生成目标文件 index.js ，里面也有入口文件 app.js 中的代码console.log($utils)，但是在 html 页面引入 index.js 后发现并没有打印出来$utils 变量的值，也没有报错信息）：

webpack 配置：

// webpack.config.js

module.exports = {

  //...other code

  entry: fs.readdirSync(__dirname).reduce((entries, dir) => {
    const fullDir = path.join(__dirname, dir)
    const entry = path.join(fullDir, 'app.js')
    // judge whether dir is a directory and whether there is a `app.js` in it in case that it's a directory
    if (fs.statSync(fullDir).isDirectory() && fs.existsSync(entry)) {
      entries[dir] = ['es6-promise/auto', entry]
    }
    return entries
  }, {}),

  output: {
    // file built by webpack-dev-server is stored in memory
    path: __dirname,
    filename: '[name]/index.js',
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  // .....other code
}

babel 配置（.babelrc ）：

{
  "presets": ["env", "flow"],
  "plugins": []
}

入口文件之一（ app.js ）：

console.log($utils)

生成文件（ index.js ，在内存里）太长就不贴了，里面也是有console.log($utils)这句代码的，但是没执行。

[oswuhan]

不清楚你的水平，而且我的水平也不高，所以以我的水平来分析这个问题，只能先假设这是一个低级错误：

出现这个问题的原因会不会是，webpack 打包了你的 esm，但是你并没有 import 并执行这个 esm?

[cleveryun]

@oswuhan 谢谢回复，我想问的就是怎么可以立即执行-_-。rollup 里可以配 iife、umd 这样直接就执行，webpack 里我需要怎么做呢？
这里如果我把 app.js 里的内容改成 import 其他的包并且执行，跟现在这样直接写 console.log 应该效果是一样的，应该编译后还是不会执行。

[oswuhan]

你的配置文件我看了一下，感觉问题可能有两点：

一是，你标题里提到了 webpack-dev-server，但你的 webpack.config.js 并没有 devServer 的相关配置；

二是，devServer 配置中的 contentBase 字段与 output.publicPath，以及 index.html 文件中的 srcipt 标签的 src 属性值，三者是相关联的，正确配置才能得到你想要的结果。

[cleveryun]

@oswuhan 加了个 HtmlWebpackPlugin 插件解决掉了，具体原因不知道，原先以为自己手动加 script 标签的话就不用这个插件了，可能这个插件和 webpack4 结合起来起到的效果不只是加个 script 标签的作用。不用这个插件手动 script 引入文件能引入成功，但是编译后的结果跟用了这个插件后自动加的 script 里引入的 js 内容不一样。

Anyway, 五一快乐😀

[oswuhan]

@cleveryun

webpac-dev-server 就是内置了一个 express，配合 html-webpack-plugin 使用的话，与你手工创建 html 并引入打包好的 js 文件再用浏览器打开的过程是同等效果的。

同乐。

[cleveryun]

@oswuhan 恩，是的，之前我说的有问题。回答我已经追加到问题底部了。