Question

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

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

访问该应用

http://localhost:8001/

最初使用的是硬编码的组织ID。在这个阶段，一切都工作得很花哨。

但是，我修改了应用，因此用户必须在网址中指定组织ID，如下所示：

http://localhost:8001/organization/100

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

function third (){
  var a = [];
  a.push(first())
  a.push(second())
  return a;
}

我的文件结构如下：

根
- 榆树的package.json
- 的package.json
- webpack.config.js
- 榆树东西
- 节点模块
- 的src
  - 榆树
    - Main.elm
    - Messages.elm
    - Helpers.elm
    ...
  - 静态
    - 样式
      - main.scss
    - 的index.html
    - index.js
    - IMG

正如你所看到的，没有＆＃34; main.js＆＃34;文件，也没有＆＃34;组织＆＃34;目录。

当我删除＆＃34; organization / 100＆＃34;从网址中，Elm代码完美编译并且代码可以工作（当然除了它没有找到一个组织）。

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

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

＆＃34; package.json＆＃34;

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
      })
    ]

  });
}

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}`,

或者放置＆＃39; /＆＃39;之前的某个地方：
＆＃39; styles.css的＆＃39; （即＆＃39; /styles.css'）和
＆＃39;静态/ JS / main.js＆＃39; （即＆＃39; /static/js/main.js'）

index.js没有加载

1 个答案: