Webpack：“vue init webpack”和“vue init webpack-simple”项目的不同行为答案

【问题标题】：Webpack: Different behavior with 'vue init webpack' and 'vue init webpack-simple' projectWebpack：“vue init webpack”和“vue init webpack-simple”项目的不同行为
【发布时间】：2018-03-27 20:10:07
【问题描述】：

我对 Webpack 和 Vue.js 还是很陌生。

我们知道vue-cli 带有两个项目模板，webpack 和webpack-simple。

当我使用webpack模板时，如果我想使用其他包，如Bootstrap 4 beta，我只需要这样做：

在main.js:

import 'jquery'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap'

在 Webpack 配置中：

plugins: [
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery',
    Popper: ['popper.js', 'default']
  })
]

Bootstrap 也能正常工作。

如果我使用 webpack-simple 模板，我需要在 App.vue 中执行此操作以使 Bootstrap 工作：

<style scoped>
    @import '~bootstrap/dist/css/bootstrap.css';
</style>

那么如果有一些选项会导致这些差异呢？

我更喜欢webpack-simple 来简化我的项目。

但我认为这是导致我的应用程序中的一些其他包无法正常工作的原因（即mavon-editor 中的图标不显示，但与webpack 模板一起工作正常）。

谢谢。

【问题讨论】：

标签： webpack vue.js vuejs2 webpack-2

【解决方案1】：

恐怕这两种方式都不是导入引导程序的最佳方式。试试npm install bootstrap@4.0.0-alpha.6

和网站中的follow the instructions。

【讨论】：

感谢您的回答。我做了npm install bootstrap@4.0.0-beta，这真的不是关于这个......不过谢谢
你在做额外的不必要的工作。 npm 包解决了您要解决的问题，例如处理 jquery 依赖项。当您使用该软件包时，他们已经为您完成了。
我确实通过 npm 安装了这个包，只是不是 alpha 版本。我的问题是关于将样式导入我的应用程序的某些页面，而不是将包安装到项目目录。我想也许我只是没有清楚地描述我的问题，而您没有发现我的问题。 BTW npm 解决了大多数依赖，但是 bootstrap 是一个例外，它只是给出警告，但不安装 jQuery 和 Popper.js。

【解决方案2】：

我比较了两者的 webpack 配置和 package.json 并找到了答案。

关键是一个叫style-loader的插件，实际上是Vue.js中的vue-style-loader

可以：

通过注入标签将 CSS 添加到 DOM

由npm install vue-style-loader --save-dev安装

并从以下位置编辑 webpack 配置：

  {
    test: /\.css$/,
    loader: 'css-loader'
  },

到：

  {
    test: /\.css$/,
    use: [
      {
        loader: 'vue-style-loader'
      },
      {
        loader: 'css-loader'
      }
    ]
  },

现在css 文件会自动加载，不再需要<style> 标签中的@import *.css。其他第三方软件包也开始正常工作。

【讨论】：