Webpack：與'vue init webpack'和'vue init webpack-simple'項目不同的行爲

我對Webpack和Vue.js相當陌生。Webpack：與'vue init webpack'和'vue init webpack-simple'項目不同的行爲

我們知道vue-cli帶有2個項目模板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做引導工作：

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

因此，如果有一些選項將導致這些差異？

我更喜歡webpack-simple使我的項目更簡單。

但我認爲這是什麼原因導致我的應用程序的一些其他的包不能正常工作（即不顯示圖標mavon-editor，但它正常工作與webpack模板）。

謝謝。

來源

2017-10-16 raaay0608

恐怕這兩種方式都不是導入bootstrap的最佳方式。嘗試npm install [email protected]

和follow the instructions在網站中。

來源

2017-10-16 10:53:50 LiranC

感謝您的回答。我做了'npm install bootstrap @ 4.0.0-beta'，並且這不是關於這個......多虧了 – raaay0608

，你正在做額外的不必要的工作。 npm包解決了你正在嘗試解決的問題，比如照顧jquery依賴。當你使用包裝時，他們已經爲你做了。 – LiranC

我確實通過npm安裝了軟件包，而不是alpha版本。我的問題是關於將它導入到我的應用程序的某些頁面，而不是將程序包安裝到項目目錄。我想也許我只是沒有清楚地描述我的問題，而且你沒有注意到我的問題。 BTW npm解決大多數依賴項，但bootstrap是一個例外，它只是提供警告，但不安裝jQuery和Popper.js。 – raaay0608

-1

我比較了兩者的webpack配置和package.json並找到答案。

的關鍵點Vue.js

是一個叫 style-loader插件，其實 vue-style-loader

它可以：

再添CSS和DOM通過注入標籤

通過安裝它npm install vue-style-loader --save-dev

並編輯webpack config：

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

到：

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

現在css文件自動加載，無需@import *.css在<style>標籤了。其他第三方軟件包也開始正常工作。

來源

2017-10-16 11:25:26 raaay0608

Webpack：與'vue init webpack'和'vue init webpack-simple'項目不同的行爲

回答

相關問題