zoukankan      html  css  js  c++  java
  • Webpack 引入bootstrap

    Bootstrap中是一种事实上的界面标准,标准到现在的网站大量的使用它。如果可以使用webpack引入的bootstrap.css,就可以一个npm install完成项目的依赖,而不必手工的添加到html内。
    本来以为在入口文件内加一行就行:

    1. import 'bootstrap/dist/css/bootstrap.css'
    复制代码

    然后安装依赖:

    1. npm i bootstrap url url-loader style-loader css-loader --save
    复制代码

    实际上却不是想象的那么简单。因为css文件内还引用了很多类型的字体文件和矢量图文件。要引入它,必须同时提供css之外的类型的对应的loader:

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

    我们在html文件内使用那么一点点的bootstrap:

    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>
    复制代码

    再次执行转译:

    1. webpack
    复制代码

    打开浏览器:

    1. open c.html
    复制代码

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

    引入jquery

    如果需要使用bootstrap的js插件的话,就必须首先引入jquery。引用jquery的一个方法是使用webpack插件。

    首先安装jquery:

    1. npm i jquery
    复制代码

    其次使用插件装入jquery,方法是修改webpack的配置文件,加入:

    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... 。我看看看到此答案时以为是个玩笑。

  • 相关阅读:
    我的前端故事----欢乐大富翁( ̄︶ ̄)↗ (摇骰子+棋盘)
    我的前端故事----优美的编辑器GitHub Atom
    我的前端故事----Ajax方式和jsonp的实现区别
    关于Web服务器的认识
    Django--全文检索功能
    对Ajax连接的认识~为毛不能上传文件!!!
    前端页面--天猫右侧信息栏弹出效果实现
    前端页面--瀑布流布局的实现
    Django分析之如何自定义manage命令
    Django分析之使用redis缓存服务器
  • 原文地址:https://www.cnblogs.com/liuchuanfeng/p/6802825.html
Copyright © 2011-2022 走看看