webpack2引入bootstrap的坑

在webpack官网教程的代码分离-css章节中,给出的例子是这样的。

//安装 ExtractTextWebpackPlugin 如下
npm install --save-dev extract-text-webpack-plugin
//配置webpack.config.js
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);
module.exports = {
    module: {
         rules: [{
             test: /\.css$/,
             use: ExtractTextPlugin.extract({
                use: ‘css-loader‘
             })
         }]
     },
    plugins: [
        new ExtractTextPlugin(‘styles.css‘),
    ]
}

可是,发现还是报很多错好不好。关键是bootstrap还引入了woff、woff2、ttf等等什么鬼的东西。

这个链接才是良心链接好吗?

Errors loading ionicons.css #18

本人亲测的两种方法。

第一种利用css-loader和file-loader

npm install --save-dev css-loader

npm install --save-dev file-loader

/**
 * Created by oufeng on 2017/5/6.
 */
var path = require(‘path‘);
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);

module.exports = {
    entry: ‘./app/index.js‘,
    output: {
        filename: ‘bundle.js‘,
        path: path.resolve(__dirname, ‘dist‘)
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: ‘css-loader‘
                })
            },
            {
                test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
                loader: "file-loader"
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin(‘styles.css‘)
    ]
};

第二种利用css-loader和url-loader

npm install --save-dev css-loader

npm install --save-dev url-loader

/**
 * Created by oufeng on 2017/5/6.
 */
var path = require(‘path‘);
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);

module.exports = {
    entry: ‘./app/index.js‘,
    output: {
        filename: ‘bundle.js‘,
        path: path.resolve(__dirname, ‘dist‘)
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: ‘css-loader‘
                })
            },
            {
                test: /.woff|.woff2|.svg|.eot|.ttf/,
                use: ‘url-loader?prefix=font/&limit=10000‘
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin(‘styles.css‘)
    ]
};
时间: 2024-07-31 14:34:40

webpack2引入bootstrap的坑的相关文章

webpack 引入 bootstrap

Bootstrap中是一种事实上的界面标准,标准到现在的网站大量的使用它.如果可以使用webpack引入的bootstrap,就可以一个npm install完成项目的依赖,而不必手工的添加到html内. 首先咱们在前端刚兴起的时候,是在html页面通过<script src='./js/bootstrap.js'> <link href='./css/bootstrap.css'>俩个标签引入bootstrap,在webpack中我们要引入它,也要分这俩个部分. 1. npm i

在Vue-cli项目中引入Bootstrap

(1)到bootstrap官网下载所需版本的bootstrap.zip文件. (2)将bootstrap.min.css以及bootstrap.min.js解压到assets文件夹,另外还需要将fonts字体文件夹解压到src文件夹下面. (3)在main.js文件中通过 import './assets/bootstrap.min.css' import './assets/bootstrap.min' 引入bootstrap,引入完成之后,就可以在组件中使用bootstrap了. 另外需要注

vue2.x利用脚手架快速构建项目并引入bootstrap、jquery

要使用vue-cli脚手架搭建项目,首先需要安装node.js Node.js官网:https://nodejs.org/en/download/ 选择你对应的系统即可下载,下载完成后傻瓜式安装即可. 安装完成之后打开cmd,输入node -v 出现版本号即安装成功 接下来便可使用脚手架快速构建你的项目了: npm install -g vue-cli                   全局安装vue-cli vue init webpack test                 生成项目

如何在vue里引入Bootstrap

一.引入jquery 步骤: 1. 安装jquery $ npm install jquery --save-dev 2.在webpack.config.js 添加内容 + const webpack = require("webpack"); module.exports = { entry: './index.js', output: { path: path.join(__dirname, './dist'), publicPath: '/dist/', filename: 'i

Vue中引入bootstrap导致的CSS问题

最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.vue模块,其中的导航条使用的bootstrap的class和自己的class. <ul class="navbar-nav my-navBar" id="my-navBar"> 3. 在Header.vue中定义了一些ul li 和 a 标签的样式. ul.

如何在jsp中引入bootstrap

如何在jsp中引入bootstrap包: 1.首先在http://getbootstrap.com/上下载Bootstrap的最新版. 您会看到两个按钮: Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. Download Source:下载源代码.点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript

laravel 6.* 引入bootstrap报错问题解决方案

以下命令均在git管理员方式运行下执行 Laravel 项目中使用 Bootstrap 前端框架,需要先执行以下命令: $ composer require laravel/ui --dev 上面的命令安装完成后,使用以下命令来引入 Bootstrap : $ php artisan ui bootstrap 更改引导文件package.json 建议直接导入以下内容,防止后续报错: { "private": true, "scripts": { "dev

HTML引入bootstrap

Bootstrap的引用方法分为两种:1)将Bootstrap下载到本地引用  2)在线引用Bootstrap 引用方法 1) 将Bootstrap下载到桌面然后解压缩(当然你可以将解压缩的Bootstrap文件放到任意位置,但是解压缩的Bootstrap文件必须和HTML在同一目录下),我自己写的HTML文件也在桌面上,我下载的是bootstrap-3.3.7-dist. 解压缩后的bootstrap-3.3.7-dist <!DOCTYPE html><html lang="

angualr引入bootstrap部分效果失效。

周末没事儿做,闲着也是闲着,就看了一下angular的项目开发的视频,按照视频中的例子一步一步的做,发现一个问题,(视频中讲的跟自己实际中做的都不一样,视频中的东西一步就可以通过,自己做的话,步步报错,说笑的),还是发现了一些问题的. 比如说angular中引入jQuery和bootstrap,npm i jquery -- save 和npm i bootstrap --save 命令可以引入, 只引入了,不能使用,因为angular中使用的typescript语法, 所以还要用以下的命令加进