Question

就像标题一样。是否可以借助webpack而不使用vue cli来构建vue应用程序？如果没有，为什么？据我了解，vue-cli还使用webpack来构建其文件。

谢谢

Answer 1

我在具有自定义Webpack配置的现有应用程序中使用不带Vue CLI的Vue 3，以下步骤对我有用：

安装Vue3：

npm install --save vue@next

安装vue-loader（v16或更高版本）和新的模板编译器：

npm install --save-dev vue-loader@^16 @vue/compiler-sfc

Webpack配置：

const { VueLoaderPlugin } = require('vue-loader'); // load plugin

//...

module: {
  rules: [
    {
        test: /\.vue$/,
        exclude: /(node_modules)/,
        use: [
          { loader: 'vue-loader' }
        ]
      }
  ]
},

plugins: [
  new VueLoaderPlugin()
]

感谢Webpack for Vue 3提供了不使用CLI来安装编译器的提示；我在Vue 3文档中找不到。

Answer 2

是的，vue-cli包含用于打包资产的webpack。现在，vue.js做同样的事情。 https://github.com/vuejs/vue/blob/dev/package.json是Vue.js的package.json，可以看到需要webpack。

因此，默认情况下，Webpack包含在Vue.js中

Answer 3

如果您愿意在受浏览器支持的JavaScript的限制内工作，则根本不需要任何构建工具。 onboarding guide根本不使用vue-cli，webpack甚至是Node。

我的第一个非凡的Vue应用程序确实使用了webpack，但没有使用vue-cli。它是根据当时的方法指导手工配置的。

Vue-cli可以很方便地使构建过程快速启动并运行，但是它针对那些对节点构建工具非常熟悉，或者不想过多地使用默认值的人进行了优化。

Answer 4

是的，当然。

vue-cli在后台使用了webpack，但是它通过合理的默认值提取了所有繁琐的webpack配置，因此您可以专注于编写应用程序。

如果您需要更改应用程序的构建方式（例如，您要压缩图像资产），那么除非vue-cli为您的特定需求提供配置选项，否则您将不得不在某些情况下更改webpack配置方式（例如，添加新的加载程序或更改现有加载程序的配置等）。 vue-cli确实提供了一些方法，但是从一开始您就无法完全控制webpack的构建。

我通常对构建Web应用程序有非常具体的要求，因此我选择了DIY Webpack解决方案，以便对构建的各个方面都拥有完全的控制权。

如果您不想使用vue-cli，但仍然想使用webpack，那么我至少建议使用以下软件包：

webpack
vue
vue-loader用于编译和捆绑.vue单个文件组件
babel-loader用于转译JavaScript
file-loader（用于图像资产）
style-loader用于在运行时将样式注入DOM
css-loader用于加载CSS文件中引用的模块，例如图像和字体

Answer 5

是的，这很有可能……事实上，直到最近，很多项目都没有这样做！

是否可以在没有vue-cli的情况下构建vue应用程序？

5 个答案: