webpack2引入bootstrap的坑

標籤：icons   entry   filename   file   12px   安裝   error   .config   test   

在webpack官網教程的代碼分離-css章節中，給出的例子是這樣的。

//安裝 ExtractTextWebpackPlugin 如下npm install --save-dev extract-text-webpack-plugin

//配置webpack.config.jsvar 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‘)    ]};

 

 

 

webpack2引入bootstrap的坑