在开发环境中也使用 webpack答案

【问题标题】：Use also webpack in development environment在开发环境中也使用 webpack
【发布时间】：2018-07-28 09:22:57
【问题描述】：

我按照 webpack 官方“入门”指南制作前端页面，我想知道它是否也打算用于开发环境。

我设法捆绑了我所有的 foo.js 依赖项，但是每次我更改我的 foo.js 时我是否必须再次将所有内容捆绑在一起，或者是否有其他方法能够编码并继续使用捆绑的依赖项？

webpack.config.js

var path = require('path');

module.exports = {
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  },
  resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }
};

foo.js

require(['vue', 'jquery'], function(Vue, $){
    console.log(Vue);
    dynamo(Vue);
});

我计划的解决方法是定义一个 window.dynamo 闭包，该闭包在随后加载的 webpack 包中调用。 dynamo 函数将导入开发版本 foo.js（正在开发的那个）。

    <script>
    window.dynamo = function(Vue){
        console.log(Vue);
    }
    </script>
    <script src="/js/foo.bundle.js"></script>

您对 webpack 和开发环境有何看法？

【问题讨论】：

使用 webpack 模板。那里已经为你完成了一切。 github.com/vuejs-templates/webpack
我的问题并没有专门针对框架，但仍然感谢您指出这一点@connexo
所有现代框架都有类似的设置。我真的建议使用这些，自己设置需要几个月的时间。

标签： javascript webpack

【解决方案1】：

我发现将 --watch 参数传递给 webpack 会使其监视所有文件并在修改文件时即时捆绑它们：

webpack.js --watch

@connexo 还指出要使用 https://github.com/vuejs-templates/webpack，我还没有尝试过，因为它暗示了有关 vue-cli 的知识。但这绝对是下一步。

【讨论】：