Question

我的应用程序结构如下：

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

Answer 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服务器不提供输出

1 个答案: