webpack2引入bootstrap的坑

时间 2019-12-01

标签 webpack2 webpack 引入 bootstrap 栏目 Bootstarp 繁體版

原文原文链接

在webpack官网教程的代码分离-css章节中，给出的例子是这样的。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、woff二、ttf等等什么鬼的东西。webpack

这个连接才是良心连接好吗？git

Errors loading ionicons.css #18

本人亲测的两种方法。github

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

npm install --save-dev css-loadernpm

npm install --save-dev file-loaderbootstrap

/**
 * 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-loaderapp

npm install --save-dev css-loaderionic

npm install --save-dev url-loadersvg

/**
 * 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')
    ]
};