問題:
I've started using webpack2 (to be precise, v2.3.2
) and after re-creating my config I keep running into an issue I can't seem to solve I get (sorry in advance for ugly dump):我已經開始使用 webpack2 (準確地說是v2.3.2
),在重新創建我的配置後,我一直遇到一個我似乎無法解決的問題(提前爲醜陋的轉儲道歉):
ERROR in ./src/main.js
Module not found: Error: Can't resolve 'components/DoISuportIt' in '[absolute path to my repo]/src'
resolve 'components/DoISuportIt' in '[absolute path to my repo]/src'
Parsed request is a module
using description file: [absolute path to my repo]/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
aliased with mapping 'components': '[absolute path to my repo]/src/components' to '[absolute path to my repo]/src/components/DoISuportIt'
using description file: [absolute path to my repo]/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: [absolute path to my repo]/package.json (relative path: ./src)
using description file: [absolute path to my repo]/package.json (relative path: ./src/components/DoISuportIt)
as directory
[absolute path to my repo]/src/components/DoISuportIt doesn't exist
no extension
Field 'browser' doesn't contain a valid alias configuration
[absolute path to my repo]/src/components/DoISuportIt doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
[absolute path to my repo]/src/components/DoISuportIt.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
[absolute path to my repo]/src/components/DoISuportIt.jsx doesn't exist
[[absolute path to my repo]/src/components/DoISuportIt]
[[absolute path to my repo]/src/components/DoISuportIt]
[[absolute path to my repo]/src/components/DoISuportIt.js]
[[absolute path to my repo]/src/components/DoISuportIt.jsx]
package.json包.json
{
"version": "1.0.0",
"main": "./src/main.js",
"scripts": {
"build": "webpack --progress --display-error-details"
},
"devDependencies": {
...
},
"dependencies": {
...
}
}
In terms of the browser
field it's complaining about, the documentation I've been able to find on this is: package-browser-field-spec
.就它所抱怨的browser
領域而言,我能夠找到的文檔是: package-browser-field-spec
。 There is also webpack documentation for it, but it seems to have it turned on by default: aliasFields: ["browser"]
.還有它的 webpack 文檔,但它似乎默認打開: aliasFields: ["browser"]
。 I tried adding a browser
field to my package.json
but that didn't seem to do any good.我嘗試將browser
字段添加到我的package.json
但這似乎沒有任何好處。
webpack.config.js webpack.config.js
import path from 'path';
const source = path.resolve(__dirname, 'src');
export default {
context: __dirname,
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
resolve: {
alias: {
components: path.resolve(__dirname, 'src/components'),
},
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: source,
use: {
loader: 'babel-loader',
query: {
cacheDirectory: true,
},
},
},
{
test: /\.css$/,
include: source,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
query: {
importLoader: 1,
localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
modules: true,
},
},
],
},
],
},
};
src/main.js源代碼/main.js
import DoISuportIt from 'components/DoISuportIt';
src/components/DoISuportIt/index.jsx源代碼/組件/DoISuportIt/index.jsx
export default function() { ... }
For completeness, .babelrc
爲了完整性, .babelrc
{
"presets": [
"latest",
"react"
],
"plugins": [
"react-css-modules"
],
"env": {
"production": {
"compact": true,
"comments": false,
"minified": true
}
},
"sourceMaps": true
}
What am I doing wrong/missing?我做錯了什麼/錯過了什麼?
解決方案:
參考一: https://en.stackoom.com/question/2ua2g參考二: https://stackoom.com/question/2ua2g