webpack4中引入bootstrap 樣式

2021-10-03 10:34:50 字數 1526 閱讀 2291

有時候我們要引入bootstrap ui樣式 並不引入 bootstrap.js檔案 很多時候只是引入css檔案

這個時候 就來簡單說一下

1.在入口的檔案引入bootstrap

import


"bootstrap"
如果上面這種方式引入的話 是會報錯的錯 它會顯示找不到路徑

頁面上的樣式並沒有顯示 他找到是 檔案下的js檔案

正確引入方式是

import


"bootstrap/dist/css/bootstrap.css"
當然當我們引入css檔案的時候 別忘了配置 css-laoder

首先是安裝 cnpm i css-loader style-loader -d

在頁面上引入樣式

div class


="container"


>


="alert alert-primary"


>hello world<


/div>


="btn btn-primary"


>確認<


/button>


<


/div>
啟動webpack 打包就能看到顯示效果了

當然 每次書寫那麼長的引入路徑是不是 不方便 這個時候 我們可以採用用起別名的方式

在webpack.config.js 配置檔案中 新增配置

resolve：


}
這個時候我們再在 檔案中引入 就可以直接

import 「bootstrap」 就可以上面的那一大串了

既然說到resolve 配置好 那我就再提一下它的其他功能

resolve:
然後看下實際效果哈

// src/index.js


import


"bootstrap/dist/css/bootstrap.css"


const path=


require


('path');


// webpack.config.js


module.exports=


,	module:,]


}}// index.html


<


!doctype html>


"en"


>


"utf-8"


>


document<


/title>


"./bundle.min.js"


>


<


/script>


<


/head>


="btn btn-primary"


>按鈕<


/button>


<


/body>


<


/html>

webpack4配置詳解

方式一 單檔案寫法 entry 方式二 多檔案寫法 entry output 常用的有三種 模板描述 hash模組識別符號的hash,一般應用於filename name hash js chunkhash按需載入塊內容的hash，根據chunk自身的內容計算而來,js name chunkhash...

webpack4快速上手

1.在專案根目錄cnpm init y初始化。生成package.json檔案 2.在專案裡面使用cnpm安裝webpack 3.需要在根目錄下新建webpack.config.js檔案 在其裡面配置暴露物件 module.exports 4.在根目錄下新建src index.js檔案 因為此時執行...

webpack4 基本使用

webpack是基於node構建，所以wepack支援所有node api和語法。即 chrome瀏覽器能支援的ecmascript語法 排除dom bom wbpack都能支援。chrome不支援es6，所以webpack也不支援。建立基本的webpack4.x專案 建立後的目錄 其中 packa...