Webpackparsing扩展名“Module not found”
警告：我对webpack很新，请温和
好吧，我正在尝试设置webpack，并且我使用es2015正常工作，并使用webpack导入。 我遇到了一个问题，现在我试图添加扩展来resolve所以我不必声明文件扩展名，但它总是说，它无法find文件或模块。 任何想法，为什么这可能是？ 这是我的index.jsx和我的webpack.config.js
// index.jsx import * as React from 'react' import * as ReactDOM from 'react-dom' import { Provider } from 'react-redux' import App from './components/App' import configureStore from './store/configureStore.js' const store = configureStore() ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('app') )
这里是webpack.config ：
// webpack.config var path = require('path') var webpack = require('webpack') module.exports = { devtool: 'eval', entry: [ 'webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', './src/javascripts/index.jsx' ], output: { path: path.join(__dirname, '/dist'), filename: 'bundle.js', publicPath: '/public/' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.DefinePlugin({ __DEV__: process.env.NODE_ENV !== 'production' }) ], module: { loaders: [ { test: /\.jsx?$/, loaders: [ 'react-hot', 'babel-loader' ], include: path.join(__dirname, '/src') }, { test: /\.scss$/, loader: [ 'style', 'css', 'sass' ] }, { test: /\.json$/, loader: 'json' } ], preLoaders: [ { test: /\.js$/, loader: 'source-map-loader' } ], resolve: { root: [ path.resolve(path.join(__dirname, 'src', 'stylesheets')), path.resolve(path.join(__dirname, 'src', 'javascripts')) ], alias: { '@style': path.resolve(path.join(__dirname, 'src', 'stylesheets')), '@script': path.resolve(path.join(__dirname, 'src', 'javascripts')) }, extensions: [ '', '.webpack.js', '.web.js', '.jsx', '.js', '.scss' ] } } };
正如我所说，如果我改变从import App from './components/App'第5行import App from './components/App' import App from './components/App.jsx' ，它的工作原理，我不知道为什么。 有什么想法吗？
你的module正在解决你的resolve ，这是破坏configuration文件。 如果resolve不存在，那么Webpack将无法parsing您的扩展，强制您添加扩展。 你应该始终缩进，以跟踪和防止这些types的错误。
当你没有扩展名的时候，Webpack不知道如何解决这个扩展，所以它不能正确地加载它。 你必须指定.jsx ，然后Babel进来，并明确地将它作为.jsx 。