标签：icons entry filename file 12px 安装 error .config test
在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等等什么鬼的东西。
这个链接才是良心链接好吗？
本人亲测的两种方法。
第一种利用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‘) ] };
标签：icons entry filename file 12px 安装 error .config test
原文地址：http://www.cnblogs.com/oufeng/p/6819161.html
