Webpack开发服务器无法提供输出文件

Question

Webpack开发服务器无法提供输出文件

3

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

- 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>

- Mike Perrenoud

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Morgan G · Answer 1

好的，有几件事情：

上下文是你告诉webpack在哪里查找你的入口文件的文件夹。目前你正在告诉webpack查找public文件夹，但是你所有的入口文件都在“/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/' 
       ]