Webpack 无法从node_modules加载包
Webpack can't load packages from node_modules
>我正在使用反应弹弓启动套件启动应用程序。我想从node_modules规范化.css和反应工具箱加载,但在构建过程中出现以下错误:
ERROR in ./~/normalize.css/normalize.css
Module parse failed: /home/jules/projects/tourbnb-frontend/node_modules/normalize.css/normalize.css Line 9: Unexpected token {
You may need an appropriate loader to handle this file type.
| */
|
| html {
| font-family: sans-serif; /* 1 */
| -ms-text-size-adjust: 100%; /* 2 */
@ ./src/index.js 29:0-24
ERROR in ./~/react-toolbox/lib/app/App.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./style in /home/jules/projects/tourbnb-frontend/node_modules/react-toolbox/lib/app
@ ./~/react-toolbox/lib/app/App.js 11:13-31
这是我的索引.js:
import React from 'react';
import {render} from 'react-dom';
import { Provider } from 'react-redux';
import ToolboxApp from 'react-toolbox/lib/app';
import App from './containers/App';
import configureStore from './store/configureStore';
import './styles/styles.scss'; //Yep, that's right. You can import SASS/CSS files too! Webpack will run the associated loader and plug this into the page.
import 'normalize.css';
const store = configureStore();
render(
<Provider store={store}>
<ToolboxApp>
<App />
</ToolboxApp>
</Provider>, document.getElementById('app')
);
这是我的webpack.config.js 有关此文件的信息,请参阅 webpack 和 webpack-hot-middleware 文档 而不是为每个环境硬编码 webpack.config.js,这 文件为传递给 getConfig 方法的环境生成一个 webpack 配置。 从"网络包"导入网络包; 从"路径"导入路径; 从"提取文本-webpack-plugin"导入提取文本插件;
const developmentEnvironment = 'development' ;
const productionEnvironment = 'production';
const testEnvironment = 'test';
const getPlugins = function (env) {
const GLOBALS = {
'process.env.NODE_ENV': JSON.stringify(env),
__DEV__: env === developmentEnvironment
};
const plugins = [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin(GLOBALS) //Tells React to build in prod mode. https://facebook.github.io/react/downloads.html
];
switch (env) {
case productionEnvironment:
plugins.push(new ExtractTextPlugin('styles.css'));
plugins.push(new webpack.optimize.DedupePlugin());
plugins.push(new webpack.optimize.UglifyJsPlugin());
break;
case developmentEnvironment:
plugins.push(new webpack.HotModuleReplacementPlugin());
plugins.push(new webpack.NoErrorsPlugin());
break;
}
return plugins;
};
const getEntry = function (env) {
const entry = [];
if (env === developmentEnvironment ) { // only want hot reloading when in dev.
entry.push('webpack-hot-middleware/client');
}
entry.push('./src/index');
return entry;
};
const getLoaders = function (env) {
const loaders = [{ test: /'.js$/, include: path.join(__dirname, 'src'), loaders: ['babel', 'eslint'] }];
if (env === productionEnvironment ) {
// generate separate physical stylesheet for production build using ExtractTextPlugin. This provides separate caching and avoids a flash of unstyled content on load.
loaders.push({
test: /('.css|'.scss)$/,
include: path.join(__dirname, 'src'),
loader: ExtractTextPlugin.extract("css?sourceMap!sass?sourceMap")
});
} else {
loaders.push({
test: /('.css|'.scss)$/,
include: path.join(__dirname, 'src'),
loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
});
}
return loaders;
};
function getConfig(env) {
return {
debug: true,
devtool: env === productionEnvironment ? 'source-map' : 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
noInfo: true, // set to false to see a list of every file being bundled.
entry: getEntry(env),
target: env === testEnvironment ? 'node' : 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '',
filename: 'bundle.js'
},
plugins: getPlugins(env),
module: {
loaders: getLoaders(env)
}
};
}
export default getConfig;
可能有什么问题?谢谢。
问题是包含在加载器中排除node_modules。我只是省略了包含,这很好:
loaders.push({
test: /('.css|'.scss)$/,
loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
});
嗯,也许你必须在 webpack 配置中将.css
添加到已解决的扩展中。像这样的东西可能是:
resolve: {
extensions: ['', '.js', '.css']
}
有关更多信息,请参阅 webpack 文档中的此页面。
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- 如何在生成下载文件时显示加载动画
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 无法在通过jQuery的ajax加载的页面中执行javascript
- Emberjs应用程序加载在除Index之外的所有路由上
- 在chrome.tabs.onCreated之后加载HTML页面
- 单击F5时如何停止页面加载
- HTML5音频加载和播放获胜'我不能在iPad上工作
- 跟踪在页面加载时应用内联样式的JavaScript
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- jQuery Lazy加载动画滚动
- Html页面上的多个Base64图像和平滑加载
- 如何创建带有插槽的vue js组件预加载程序
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- 如何使该数据在所有元素中加载
- Chrome扩展没有't在重新加载之前考虑期权价值
- 使用javascript在Flash中加载外部图像
- Ajax文件加载和<输入>文件加载
- 使用javascript函数在页面初始化后加载jquery
- 如何防止网页加载后自动启动功能