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