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