Webpack 开发服务器不提供输出答案

【问题标题】：Webpack dev server not serving outputWebpack 开发服务器不提供输出
【发布时间】：2016-12-16 19:33:22
【问题描述】：

我有一个结构如下的应用程序：

- root
  - app/
  - config/
  - css/
  - js/
  - public/
  - package.json
  - webpack.config.js

React 应用程序位于 app 文件夹中，我将发布到 public 文件夹中。这是我的webpack 配置：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

var ExtractTextPlugin = require("extract-text-webpack-plugin");

var extractSass = new ExtractTextPlugin(
    "../css/style.css", {
        allChunks: true
    });

module.exports = {
    context: path.join(__dirname, "public"),
    devtool: debug ? "inline-sourcemap" : null,
    entry: {
        withify: '../app/main.jsx',
        fbauth: '../app/fbauth.jsx',
        fbuser: '../app/fbuser.jsx',
        fontawesome: 'font-awesome-webpack!../node_modules/font-awesome-webpack/font-awesome.config.js',
        styles: './css/style.scss'
    },
    output: {
        path: './js',
        filename: '[name].js'
    },
    resolve: {
        alias: {
            config: path.join(__dirname, 'config', process.env.NODE_ENV || 'development')
        }
    },
    module: {
        loaders: [
            {
                test: /\.json$/,
                loader: 'json'
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-0'],
                    plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
                }
            },
            {
                test: /\.scss$/,
                loader: extractSass.extract(["css", "sass"])
            },
            {
                test: /\.(eot|woff|woff2|ttf|svg|png|jpg)?(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
                loader: 'url'
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader"
            }]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        extractSass
    ],
    externals: {
        fs: '{}',
        tls: '{}',
        net: '{}',
        console: '{}'
    }
};

这是我尝试使用npm run dev 启动应用程序的方式：

"scripts": {
  "dev": "./node_modules/.bin/webpack-dev-server --content-base public --inline --hot"
},

但是，当我的 index.html 尝试访问应该在开发服务器内存中可用的 withify.js 文件时，我得到了 404；我在这里做错了什么？

<html>

<head>
  <title>Withify Application</title>
  <!-- Mobile Specific Metas ================================================== -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAlPNWOZmv60OUaD3_idHMP15-Ghwm7RDE&libraries=places"></script>
  <link type="text/css" rel="stylesheet" href="/css/style.css">
</head>

<body>
  <div id="app"></div>
  <script src="/js/jquery.min.js"></script>
  <script src="/js/withify.js"></script>
  <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

</body>

</html>

【问题讨论】：

标签： javascript webpack webpack-dev-server

【解决方案1】：

好吧，有几件事：

Context 是你告诉 webpack 在哪里寻找你的条目的文件夹。所以目前你告诉 webpack 查看公共文件夹，但你所有的条目都存在于“/app”中

所以你的上下文会是这样的：

context: path.join(_dirname, 'app')

这告诉 webpack 查看 root/app 并找到现在应该如下所示的条目：

entry: [
        withify: 'main.jsx',
        fbauth:  'fbauth.jsx',
        fbuser:  'fbuser.jsx',
       ]

你的输出会是这样的：

output:[
        path: path.join(__dirname, 'public', 'js')
        filename: '[name].js' 
       ]

我认为只要您从公用文件夹中提取所有内容，这应该可以解决您的问题！

编辑：

尝试在你的输出中也设置这个：

output:[
        path: path.join(__dirname, 'public', 'js'),
        filename: '[name].js',
        publicPath: '/js/' 
       ]

【讨论】：

不幸的是，这会导致同样的错误。我想知道为什么它不会通过webpack-dev-server 提供文件？
你能在 /public/js 文件夹中看到 withify.js 吗？
不，它不会产生任何输出，但这并不奇怪，因为这是它应该做的；它应该从内存中提供文件。
呃，你是对的。我忘了我有我的设置来实际将我的文件写入公共文件夹以在服务器端呈现路由。我唯一能想到的是你的公用文件夹中有一个“/js”目录吗？
设置publicPath和全局路径后是不是不行？我认为输出文件应该与此一起使用。但是，我不确定您的 WebpackDevServer 是否为您的 CSS 提供服务。你收到了吗？