Question

我倾向于webpack。但是，这里出现了一个错误“你可能需要一个合适的加载器来处理这个文件类型。”，我检查了webpack.config.js，这是正确的。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require("webpack");

module.exports = {
	entry: {
		app: './src/main.js',
		print: './src/print.js'
	},
	devtool: 'inline-source-map',
	devServer: {
		contentBase: 'dist',
		hot: true,
	},
	output: {
		filename: '[name].bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [{
			test: /\.css$/,
			use: [
				'style-loader',
				'css-loader'
			]
		}]
	},
	plugins: [
		new CleanWebpackPlugin(['dist']),
		new HtmlWebpackPlugin({
			title: 'Output Management'
		}),
		new webpack.HotModuleReplacementPlugin()
	]
};

此外，这是我的js文件和css文件：

import './style.css';

body {
	background-color: blue;
}

控制台记录下来：

./src/style.css
Module parse failed: D:\FrontEndWorkSpace\webpack-demo\src\style.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {

| 	background-color: blue;

| }

另外，我已经安装了style-loader和css-loader，这里是我对package.json的依赖：

  "devDependencies": {
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "csv-loader": "^2.1.1",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.29.0",
    "style-loader": "^0.18.2",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1",
    "xml-loader": "^1.2.1"
  }

编辑：由于某些未知原因，它有效。

Answer 1

确保您已安装了您尝试在NPM中使用的装载机。您应该在package.json文件和项目的node_modules文件夹中看到它们。如果您没有看到它们，可以安装它们并将它们保存到终端中的dev依赖项中：

$ npm install style-loader css-loader --save-dev

最后一点，我发现这个YouTube video series对于开始使用Webpack 2非常有帮助。它在最初的几年里发生了很大的变化，所以相关参考文献很难分开过时的。

祝好驯服webpack野兽好运！

编辑：删除了额外的东西。

如何解决webpack错误：“你可能需要一个合适的加载器来处理这个文件类型。”当我使用webpack加载css文件

1 个答案: