index.js 未加载

Question

我在 Elm 应用程序中加载 index.js 时遇到问题。我不确定这个问题的根源在哪里，所以任何帮助都会很可爱。

我正在构建一个 elm 应用程序，并且最近在应用程序中引入了路由，这就是问题开始的时候。 我从

访问该应用程序

http://localhost:8001/

最初使用的是硬编码的组织 ID。在这个阶段，一切都很顺利。

但是，我调整了应用程序，因此用户必须在 url 中指定组织 ID，如下所示：

http://localhost:8001/organization/100

现在我在 chrome 控制台中收到此错误消息：

x GET http://localhost:8001/elm.js 

我的文件结构如下：

• 根

  • elm-package.json
  • package.json
  • webpack.config.js
  • 榆树的东西
  • 节点模块

  • src

    • 榆树

      • Main.elm
      • Messages.elm
      • Helpers.elm

      ...

    • 静态
      • 款式
        • main.scss
      • index.html
      • index.js
      • img

如您所见，没有“main.js”文件，也没有“组织”目录。

当我从 url 中删除“organization/100”时，Elm 代码可以完美编译并且代码可以正常工作（当然除了它没有找到组织的事实）。

我不确定要显示哪些代码示例，因为我真的不确定问题的根源在哪里，但我会向您展示我的 webpack.config.js 文件，因为它通常负责加载文件。 基本上是直接取自 moarwick/elm-webpack-starter

var path              = require( 'path' );
var webpack           = require( 'webpack' );
var merge             = require( 'webpack-merge' );
var HtmlWebpackPlugin = require( 'html-webpack-plugin' );
var autoprefixer      = require( 'autoprefixer' );
var ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
var CopyWebpackPlugin = require( 'copy-webpack-plugin' );
var entryPath         = path.join( __dirname, 'src/static/index.js' );
var outputPath        = path.join( __dirname, 'dist' );

console.log( 'WEBPACK GO!');

// determine build env
var TARGET_ENV = process.env.npm_lifecycle_event === 'build' ? 'production' : 'development';
var outputFilename = TARGET_ENV === 'production' ? '[name]-[hash].js' : '[name].js'

// common webpack config
var commonConfig = {

  output: {
    path:       outputPath,
    filename: `static/js/${outputFilename}`,
    // publicPath: '/'
  },

  resolve: {
    extensions: ['', '.js', '.elm']
  },

  module: {
    noParse: /\.elm$/,
    loaders: [
      {
        test: /\.(eot|ttf|woff|woff2|svg)$/,
        loader: 'file-loader'
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/static/index.html',
      inject:   'body',
      filename: 'index.html'
    })
  ],

  postcss: [ autoprefixer( { browsers: ['last 2 versions'] } ) ],

}

// additional webpack settings for local env (when invoked by 'npm start')
if ( TARGET_ENV === 'development' ) {
  console.log( 'Serving locally...');

  module.exports = merge( commonConfig, {

    entry: [
      'webpack-dev-server/client?http://localhost:8001',
      entryPath
    ],

    devServer: {
      // serve index.html in place of 404 responses
      historyApiFallback: true,
      contentBase: './src',
    },

    module: {
      loaders: [
        {
          test:    /\.elm$/,
          exclude: [/elm-stuff/, /node_modules/],
          loader:  'elm-hot!elm-webpack?verbose=true&warn=true&debug=true'
        },
        {
          test: /\.(css|scss)$/,
          loaders: [
            'style-loader',
            'css-loader',
            'postcss-loader',
            'sass-loader'
          ]
        }
      ]
    }

  });
}

// additional webpack settings for prod env (when invoked via 'npm run build')
if ( TARGET_ENV === 'production' ) {
  console.log( 'Building for prod...');

  module.exports = merge( commonConfig, {

    entry: entryPath,

    module: {
      loaders: [
        {
          test:    /\.elm$/,
          exclude: [/elm-stuff/, /node_modules/],
          loader:  'elm-webpack'
        },
        {
          test: /\.(css|scss)$/,
          loader: ExtractTextPlugin.extract( 'style-loader', [
            'css-loader',
            'postcss-loader',
            'sass-loader'
          ])
        }
      ]
    },

    plugins: [
      new CopyWebpackPlugin([
        {
          from: 'src/static/img/',
          to:   'static/img/'
        },
        {
          from: 'src/favicon.ico'
        },
      ]),

      new webpack.optimize.OccurenceOrderPlugin(),

      // extract CSS into a separate file
      new ExtractTextPlugin( 'static/css/[name]-[hash].css', { allChunks: true } ),

      // minify & mangle JS/CSS
      new webpack.optimize.UglifyJsPlugin({
          minimize:   true,
          compressor: { warnings: false }
          // mangle:  true
      })
    ]

  });
}

还有“package.json”

{
  "name": "elm-webpack-starter",
  "description": "Webpack setup for writing Elm apps",
  "version": "0.8.4",
  "license": "MIT",
  "author": "Peter Morawiec",
  "repository": {
    "type": "git",
    "url": "https://github.com/moarwick/elm-webpack-starter"
  },
  "scripts": {
    "start": "webpack-dev-server --hot --inline --port 8001",
    "build": "rimraf dist && webpack && mv dist/*.eot dist/static/css/ && mv dist/*.woff* dist/static/css/ && mv dist/*.svg dist/static/css/ && mv dist/*.ttf dist/static/css/",
    "reinstall": "npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "bootstrap-sass": "^3.3.6",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "elm": "^0.18.0",
    "elm-hot-loader": "^0.5.4",
    "elm-webpack-loader": "^4.1.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.17.0",
    "jquery": "^3.1.0",
    "node-sass": "^4.2.0",
    "postcss-loader": "^1.1.1",
    "rimraf": "^2.5.2",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^2.4.0"
  }
}

Answer 1

<script src="static/js/main.js">

相对于您当前的路径 所以如果从以下位置调用：

http://localhost:8001/organization/  

路径默认为：

http://localhost:8001/organization/static/js/main.js

但是

<script src="/static/js/main.js">

将永远在：

http://localhost:8001/static/js/main.js

无论从哪里调用代码...

考虑到上述情况并查看您提供的代码：
我认为你需要做一些改变：

filename: `static/js/${outputFilename}`,

到：

filename: `/static/js/${outputFilename}`,

或在前面的某处放一个“/”：
'styles.css'（即'/styles.css'）和
'static/js/main.js'（即'/static/js/main.js'）