根据以下内容:Webpack 2:cannot resolve module
我尝试使用modules
代替alias
来加载我的组件,如下所示:
resolve: {
modules: [__dirname, 'node_modules',path.resolve('./app/components')],
alias:{
applicationStyles:'app/styles/app.scss'
},
但是我收到以下webpack错误:
./app/app.jsx中的错误找不到模块:错误:无法解决 ' TodoApp' in' C:....' @ ./app/app.jsx 10:14-32 @ multi babel-polyfill script-loader!jquery / dist / jquery.min.js script-loader!foundation-sites / dist / js / foundation.min.js ./app/app.jsx
每件事情都没问题,如果我对每个组件使用alias
而不是这样:
resolve: {
modules: [__dirname, 'node_modules'],
alias:{
applicationStyles:'app/styles/app.scss',
TodoApp: 'app/components/TodoApp.jsx'
},
extensions: ['*','.js','.jsx;']
},
答案 0 :(得分:4)
semicolon
媒体资源中resolve.extensions
:'.jsx;'
。
这个分号是resolve.modules
无效的问题的根源。
当您删除此分号并将'app/components'
添加到resolve.modules
时,webpack捆绑包没有错误。
webpack.config.js (更改后)
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
'babel-polyfill',
'script-loader!jquery/dist/jquery.min.js',
'script-loader!foundation-sites/dist/js/foundation.min.js',
'./app/app.jsx',
],
output: {
path: __dirname,
filename: './public/bundle.js',
},
externals: {
jquery: 'jQuery',
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
],
resolve: {
modules: [__dirname, 'app/components', 'node_modules'],
alias: {
applicationStyles: 'app/styles/app.scss',
},
extensions: ['*', '.js', '.jsx'],
},
module: {
rules: [
{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'es2017', 'stage-0'],
plugins: ['transform-runtime'],
},
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
},
{
test: /\.scss$/,
use: [
{
loader: 'sass-loader',
options: {
includePaths: ['./node_modules/foundation-sites/scss'],
},
},
],
},
],
},
devtool: 'cheap-module-eval-source-map',
};