2

我刚刚升级 nywebpack.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/在构建生产版本时看到了字体，但是我使用webpack-dev-server的开发版本没有像以前那样在浏览器中提供字体我得到一个 404http://localhost:8080/css/fonts/glyphicons-halflings-regular.woff2

我已将所有依赖项更新为最新版本。

可能与 Webpack 2、Sass 加载器和 Webpack 开发服务器有些不兼容？

4

0 回答 0