我刚刚升级了ny webpack.config.js
以与Webpack 2兼容,现在我的Glyphicons已经找不到了。
这是从旧Webpack 1配置中提取的功能
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]"
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream&name=/css/fonts/[name].[ext]"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file?name=/css/fonts/[name].[ext]"
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml&name=/css/fonts/[name].[ext]
}
]
},
这是新的Webpack 2配置,但不起作用。
const webpack = require('webpack')
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.jsx'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.json', '.jsx'],
modules: [
path.join(__dirname, 'src'),
"node_modules"
]
},
devtool: '#source-map',
module: {
noParse: /node_modules\/localforage\/dist\/localforage.js/,
rules: [
{
test: /\.jsx?$/,
include: path.join(__dirname, 'src'),
use: 'babel-loader'
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader' ]})
},
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, use: "url-loader?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, use: "url-loader?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: "url-loader?limit=10000&mimetype=application/octet-stream&name=/css/fonts/[name].[ext]" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: "file-loader?name=/css/fonts/[name].[ext]" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: "url-loader?limit=10000&mimetype=image/svg+xml&name=/css/fonts/[name].[ext]" }
]
},
devServer: {
contentBase: './dist',
hot: true,
inline: true,
historyApiFallback: true
},
plugins: [
new CleanWebpackPlugin(['dist'], {
exclude: ['images', 'index.html', 'favicon.ico', '_redirects']
}),
new webpack.optimize.CommonsChunkPlugin({name: 'common', filename: 'common.js'}),
new ExtractTextPlugin({filename: 'css/styles.css', allChunks: true}),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development'),
'socketURI': JSON.stringify('http://localhost:3000/')
}
})
]
}
与以前相同,所以sass-loader
正在运行,我确实在构建生产版本时会将字体发送到/dist/css/fonts/
,但是我的开发版本使用{{ 1}}不像以前那样提供字体,在浏览器中我为webpack-dev-server
获得了404
我已将所有依赖项更新为最新版本。
Webpack 2,Sass加载器和Webpack Dev Server可能存在一些不兼容的问题吗?