Webpack 引入bootstrap

時間  2019-11-09
標籤 webpack 引入 bootstrap 欄目 Bootstarp 简体版
原文   原文鏈接

Bootstrap中是一種事實上的界面標準，標準到如今的網站大量的使用它。若是能夠使用webpack引入的bootstrap.css，就能夠一個npm install完成項目的依賴，而沒必要手工的添加到html內。
原本覺得在入口文件內加一行就行：javascript

  1. import 'bootstrap/dist/css/bootstrap.css'
複製代碼

而後安裝依賴：css

  1. npm i bootstrap url url-loader style-loader css-loader --save
複製代碼

實際上卻不是想象的那麼簡單。由於css文件內還引用了不少類型的字體文件和矢量圖文件。要引入它，必須同時提供css以外的類型的對應的loader：html

  2. //webpack.config.js:
  3. module.exports = {
  4. entry: {
  5. '1.js'
  6. },
  7. output: {
  8. filename: 'bundle.js'
  9. },
  10. module: {
  11. loaders: [
  13. { test: /\.css$/, loader: 'style-loader!css-loader' },
  14. { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
  15. { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
  16. { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
  17. { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
  18. ]
  19. }
  20. };
複製代碼

咱們在html文件內使用那麼一點點的bootstrap：java

  1. // c.html
  2. <html>
  3. <body>
  4. <ul class="nav nav-pills">
  5. <li role="presentation" class="active"><a href="#">Home</a></li>
  6. <li role="presentation"><a href="#">Profile</a></li>
  7. <li role="presentation"><a href="#">Messages</a></li>
  8. </ul>
  9. <script type="text/javascript" src="bundle.js"></script>
  10. </body>
  11. </html>
複製代碼

再次執行轉譯：jquery

  1. webpack
複製代碼

打開瀏覽器：webpack

  1. open c.html
複製代碼

看到bootstrap那熟悉而太熟悉的界面。git

引入jquery

若是須要使用bootstrap的js插件的話，就必須首先引入jquery。引用jquery的一個方法是使用webpack插件。github

首先安裝jquery：web

  1. npm i jquery
複製代碼

其次使用插件裝入jquery，方法是修改webpack的配置文件，加入：npm

  1. plugins: [
  2. new webpack.ProvidePlugin({
  3. $: "jquery",
  4. jQuery: "jquery"
  5. })
  6. ]
複製代碼

在入口文件內加入代碼來作驗證：

  1. $("body").append("<div>hello world</div>")
複製代碼

若是成功，說明jquery加載成功。這樣你就能夠在入口js文件內加載bootstrap.js了：

  1. import 'bootstrap/dist/js/bootstrap.js'
複製代碼
排除錯誤

我確實在引入bootstrap的時候，遇到一個神奇的錯誤。在webpack轉譯時報錯，css-loader，unknown word樣子的錯誤。對webpack.config.js文件加入一個include屬性並指向到不存在的目錄便可。

  1. {
  2. test: /\.css$/,
  3. include: [
  4. path.resolve(__dirname, "not_exist_path")
  5. ],
  6. loader: "style!css"
  7. }
複製代碼

原始的issue在此：https://github.com/webpack/cs... 。我看看看到此答案時覺得是個玩笑。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程