为什么我可以导入一个npm包而不是其他（Webpack设置）？

我导入两个库中完全相同的方式（lodash和aframe）：为什么我可以导入一个npm包而不是其他（Webpack设置）？

第一个成功出口：

error no-unused-vars "_" is defined but never used 
E:\alex\istaging-viewer\src\components\Pano\PanoList.vue:10:8 
import _ from 'lodash'

（Lodash定义）

F或第二个，Webpack（或npm？）告诉我没有该文件或目录名称：

ERROR in ./~/aframe/index.js 
Module not found: Error: Cannot resolve 'file' or 'directory' ./package in E:\alex\istaging-viewer\node_modules\aframe 
@ ./~/aframe/index.js 3:10-30 

ERROR in ./~/aframe/~/aframe-core/src/index.js 
Module not found: Error: Cannot resolve 'file' or 'directory' ../package in E:\alex\istaging-viewer\node_modules\aframe\node_modules\aframe-core\src 
@ ./~/aframe/~/aframe-core/src/index.js 16:10-31 

ERROR in ./~/aframe/elements/templates/index.html 
Module parse failed: E:\alex\istaging-viewer\node_modules\aframe\elements\templates\index.html Line 1: Unexpected token < 
You may need an appropriate loader to handle this file type. 
| <!doctype html> 
| <meta charset="utf-8"> 
| 
@ ./~/aframe/elements/index.js 7:0-33

这是为什么？

注：这是我的WebPack设置：

var path = require('path') 

module.exports = { 
    entry: { 
    app: './src/main.js' 
    }, 
    output: { 
    path: path.resolve(__dirname, '../dist/static'), 
    publicPath: '/static/', 
    filename: '[name].js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.vue', 'styl'], 
    alias: { 
     'src': path.resolve(__dirname, '../src') 
    } 
    }, 
    resolveLoader: { 
    root: path.join(__dirname, 'node_modules') 
    }, 
    module: { 
    preLoaders: [ 
     { 
     test: /\.vue$/, 
     loader: 'eslint', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.js$/, 
     loader: 'eslint', 
     exclude: /node_modules/ 
     } 
    ], 
    loaders: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue' 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json' 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'url', 
     query: { 
      limit: 10000, 
      name: '[name].[ext]?[hash:7]' 
     } 
     }, 

     { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }, 

     { test: /\.(woff|woff2)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
     { test: /\.ttf$/, loader: "file-loader" }, 
     { test: /\.eot$/, loader: "file-loader" }, 
     { test: /\.svg$/, loader: "file-loader" } 
    ] 
    }, 
    eslint: { 
    formatter: require('eslint-friendly-formatter') 
    } 
}

来源

2016-03-03 alex

根据错误信息和AFRAME source code你应该在你的WebPack配置指定的HTML文件适当装载机。不舒服，但这可以适合 - https://github.com/webpack/html-loader或者您可以尝试url-loader

loaders: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue' 
     }, 
     ... skipped ... 
     { 
     test: /\.html$/, 
     loader: 'html' 
     },

来源

2016-03-03 07:28:55

为什么我可以导入一个npm包而不是其他（Webpack设置）？

回答

相关问题