使用webpack引用js文件

时间:2017-12-03 20:01:06

标签: javascript webpack webpack-dev-server elm

我是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 |开始编译榆树.. 9:54:45 PM client.1 |   哈希:c738c54879238b5512ca 9:54:45 PM client.1 |版本:webpack   3.9.1 9:54:45 PM client.1 |时间:1693ms 9:54:45 PM client.1 |资产大小块大块名称9:54:45 PM   client.1 | index.html 199字节9:54:45 PM client.1 | app.js
  1.19 MB 0 [emit] [big] app 9:54:45 PM client.1 | [4] multi(webpack)-dev-server / client?http://localhost:3000 ./src/index.js   40字节{0} 9:54:45 PM client.1 | [5]   (webpack)-dev-server / client?http://localhost:3000 7.95 kB {0} 9:54:45   PM客户端1 | [6] ./node_modules/url/url.js 23.3 kB {0} 9:54:45 PM   client.1 | [9] ./node_modules/url/util.js 314字节{0} 9:54:45 PM   client.1 | [13] ./node_modules/strip-ansi/index.js 161字节{0}   客户端9:54:45 [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 [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字节{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字节{0} 9:54:45 PM client.1 |   [39] ./src/index.html 56字节{0} 9:54:45 PM client.1 | [40]   ./src/Main.elm 814 kB {0} [built] 9:54:45 PM client.1 | +18   隐藏模块9:54:45 PM client.1 |错误在./src/index.js 9:54:45   PM客户端1 |找不到模块:错误:无法解决   ' ./ dexie / DIST / dixie.js' in' C:\ Pvt \ positron \ Elm.Mobile \ src

我在黑暗中拍摄并添加:

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

但它也没有用。

1 个答案:

答案 0 :(得分:3)

当我与我使用的内容进行比较时 - 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']
    },