javascript - 为 SASS(编译、产品缩小)、JS(Concat + 缩小)和多个 Vue 单页应用程序构建 Webpack 4 配置

Question

尝试为我们的应用程序中的整个资源生成工作流程设置 webpack 设置。我不需要任何热重载、浏览器同步等。只需要监视更改，并在发生更改时重建相关对象。文件结构如下所示:

(我对这张图片表示歉意，我认真查找了其他方法来发布结构，但预览中没有任何效果，我可以在之后的评论中发布带有此输出的 fiddle 或代码笔)

唯一值得注意的地方是:

1) 每个单页迷你应用程序 (SPA) vue-spas 下的每个文件夹都会生成自己的应用程序输出文件。 2) js 下的构造中的所有项目都被连接并缩小为一个输出文件 (/dist/js/main.min.js)，但 js/components/下的每个项目仅呈现该文件的缩小和损坏版本

最后，我知道这可能是一个很难解决的问题，但我现在让 Gulp 做一些工作，让 Webpack 做 Vue 编译，只是想看看是否可以合并到 webpack 中并让它做工作。

感谢您的帮助。

Answer 1

有几种方法。最简单的方法是为 entry point configuration 中的每个应用程序添加一个 key 。在您的 webpack.config.js 文件中。

在您的 webpack.config.js 文件中看起来像这样:

module.exports = {
  entry: {
    app1: './vue-spa/vue-spa1/app.js',
    app2: './vue-spa/vue-spa2/app.js'
    // etc
  }
};

这将在您的 dist 中为每个目录输出一个很好捆绑的应用程序文件。

默认情况下，如果您将生产变量传递给 webpack 构建命令，它将应用您正在寻找的所有优化。如果缺少开箱即用的功能，则可能有一个加载程序可以处理您需要的任何优化。

对于 Sass，您可以将 sass-loader 添加到您的 webpack 文件中: https://github.com/webpack-contrib/sass-loader

您的 devServer 可以递归地监视您的 vue-spa 目录的更改。

另一种方法是使用lerna——尽管这需要额外的配置，并且只有在您处于企业环境中(其中每个单独的应用程序都被发送到一个特定的应用程序)时才有必要。私有(private) NPM 注册表，并且需要单独的 semver。