使用 webpack 引用 js 文件

Question

我是 webpack 的新手，正在使用它来编译我的 Elm 项目。

我有以下配置文件

var path = require("path");

module.exports = {
  entry: {
    app: [
      './src/index.js'
    ]
  },

  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: '[name].js',
  },

  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          'css-loader',
        ]
      },
      {
        test:    /\.html$/,
        exclude: /node_modules/,
        loader:  'file-loader?name=[name].[ext]',
      },
      {
        test:    /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        loader:  'elm-webpack-loader?verbose=true&warn=true',
          options: {debug: true, warn: true},
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff',
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
      }
    ],

    noParse: /\.elm$/,
  },

  devServer: {
    inline: true,
    stats: { colors: true },
  },


};

我试图在我的索引文件中引用 dexie.js（在所有内容编译之前）。它位于 "node_modules\dexie\dist\dexie.js"

'use strict';

require('ace-css/css/ace.css');
require('font-awesome/css/font-awesome.css');
//
// Require index.html so it gets copied to dist
require('./index.html');
require('./dexie/dist/dexie.js');

...

9:54:44 PM client.1 | Started compiling Elm.. 9:54:45 PM client.1 | Hash: c738c54879238b5512ca 9:54:45 PM client.1 | Version: webpack 3.9.1 9:54:45 PM client.1 | Time: 1693ms 9:54:45 PM client.1 | Asset Size Chunks Chunk Names 9:54:45 PM client.1 | index.html 199 bytes 9:54:45 PM client.1 | app.js
1.19 MB 0 [emitted] [big] app 9:54:45 PM client.1 | [4] multi (webpack)-dev-server/client?http://localhost:3000 ./src/index.js 40 bytes {0} 9:54:45 PM client.1 | [5] (webpack)-dev-server/client?http://localhost:3000 7.95 kB {0} 9:54:45 PM client.1 | [6] ./node_modules/url/url.js 23.3 kB {0} 9:54:45 PM client.1 | [9] ./node_modules/url/util.js 314 bytes {0} 9:54:45 PM client.1 | [13] ./node_modules/strip-ansi/index.js 161 bytes {0} 9:54:45 PM client.1 | [14] ./node_modules/ansi-regex/index.js 135 bytes {0} 9:54:45 PM client.1 | [15] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} 9:54:45 PM client.1 | [16] (webpack)-dev-server/client/socket.js 1.05 kB {0} 9:54:45 PM client.1 | [18] (webpack)-dev-server/client/overlay.js 3.73 kB {0} 9:54:45 PM client.1 | [23] (webpack)/hot nonrecursive ^./log$ 170 bytes {0} [built] 9:54:45 PM client.1 | [25] (webpack)/hot/emitter.js 77 bytes {0} 9:54:45 PM client.1 | [27] ./src/index.js 1.32 kB {0} [built] 9:54:45 PM client.1 | [28] ./node_modules/ace-css/css/ace.css 964 bytes {0} 9:54:45 PM client.1 | [39] ./src/index.html 56 bytes {0} 9:54:45 PM client.1 | [40] ./src/Main.elm 814 kB {0} [built] 9:54:45 PM client.1 | + 18 hidden modules 9:54:45 PM client.1 | ERROR in ./src/index.js 9:54:45 PM client.1 | Module not found: Error: Can't resolve './dexie/dist/dixie.js' in 'C:\Pvt\positron\Elm.Mobile\src

我在黑暗中拍了一张并补充说：

{
        test:    /\.js$/,
        loader:  'file-loader',
},

但是也没用。

Answer 1

当我与我使用的相比时 - https://github.com/simonh1000/elm-webpack-starter/blob/master/webpack.config.js - 那么似乎缺少的是解析部分

resolve: {
        modules: [
            path.join(__dirname, "src"),
            "node_modules"
        ],
        extensions: ['.js', '.elm', '.scss', '.png']
    },

使用 webpack 引用 js 文件

Reference js file using webpack

javascript

elm

webpack

webpack-dev-server