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

bwitn5fc  于 2022-11-13  发布在  Webpack
关注(0)|答案(7)|浏览(221)

就像标题所说的那样。有没有可能在webpack的帮助下构建一个vue应用程序而不使用vue cli?如果没有,为什么?就我的理解,vue cli也使用webpack来构建他们的文件。

zujrkrfu

zujrkrfu1#

是的,当然。
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文件中引用的模块,如图像和字体
7gyucuyw

7gyucuyw2#

我在一个具有自定义Webpack配置的现有应用程序中使用不带Vue CLI的Vue 3,以下步骤对我很有效:
安装版本3:

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文档中找不到它。

dsekswqp

dsekswqp3#

是的,这是非常有可能的...事实上,直到最近,很多项目都没有这样做!

lmvvr0a8

lmvvr0a84#

是的。你可以在没有Vue CLI的情况下将Vue功能添加到现有项目中。最好是使用Webpack作为捆绑器的项目...这样就很简单了。
您需要3个软件包:vue@next、@vue/compiler-sfc和vue-loader,并在webpack.config.js文件中添加一些规则配置。
注意!在编写时,您不能选择最新的官方vue加载程序,因为它仍然依赖于vue模板编译器(在Vue 2中使用)。您需要强制安装v16+(我使用vue加载程序16.8.3)以及最新的Vue v.3(3.2.28)...
在这里您可以阅读如何做的详细描述。

xesrikrc

xesrikrc5#

如果你愿意在浏览器支持的JavaScript的限制下工作,你根本不需要任何构建工具。onboarding guide根本不使用vue-cli、webpack甚至Node。
我的第一个重要的Vue应用程序确实使用了webpack,但没有使用vue-cli。它是根据当时的how-to建议手动配置的。
Vue-cli可以方便地快速启动和运行构建过程,但它针对那些非常熟悉节点构建工具或不想过多使用默认值的人进行了优化。

bihw5rsg

bihw5rsg6#

是的,vue-cli包括webpack来构建资产。现在,vue.js做同样的事情。https://github.com/vuejs/vue/blob/dev/package.json这里是Vue.js的package.json,您可以看到webpack是必需的。
因此,默认情况下,Webpack包含在Vue.js中

a2mppw5e

a2mppw5e7#

2022年9月更新

请使用create-vue

npm init vue@latest project-name

或在当前目录中

npm init vue@latest .

相关问题