我用于我的项目自定义webpack,效果很好:
const path = require('path');
const Webpack = require('webpack');
module.exports = {
webpack: (config, { dev }) => {
config.plugins.push(
new Webpack.DefinePlugin([{
__BROWSER__: "typeof window !== 'undefined'",
__NETLIFY_BRANCH__: JSON.stringify(process.env.BRANCH),
__CONFIG__: JSON.stringify({
GRAPHQL_URL: process.env.GRAPHQL_URL,
SEGMENT_WRITEKEY: process.env.SEGMENT_WRITEKEY,
}),
}])
)
config.module.rules.push(
{
test: /\.png$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
name: 'graphics/[name].[ext]',
},
},
},
{
test: /\.svg$/,
use: [
{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},{
loader: 'string-replace-loader',
options: {
// this is a bugfix because react complains about the xmlns attribute. Its not
// a valid attribute according to react. React devs also say it's not needed
// for svg.
search: ' xmlns="http://www.w3.org/2000/svg"',
replace: '',
},
},
],
},
);
return config;
},
};
但我也尝试将图像导入项目,如:
export default class Layout extends React.Component {
render () {
return (
<img src={'../static/logo.svg'} alt="logo" />
)
}
}
不幸的是,我收到错误,但项目正在运行。
http://localhost:3000/static/logo.svg 404 (Not Found)
“components”目录中的布局和“static”目录中的图像。两者都在根。
此外,我添加了JSON,可能是依赖项中的错误:
{
"name": "",
"version": "1.0.0",
"main": "index.js",
"author": "",
"license": "MIT",
"dependencies": {
"babel-plugin-inline-react-svg": "^0.4.0",
"babel-preset-es2015": "^6.24.1",
"glamor": "^2.20.37",
"glamor-media-query-presets": "^1.0.0",
"js-cookie": "^2.1.4",
"localforage": "^1.5.0",
"next": "^2.4.8",
"react-apollo": "^1.4.8",
"react-burger-menu": "^2.1.4",
"react-helmet": "^5.1.3",
"typography": "^0.15.12",
"typography-breakpoint-constants": "^0.15.10"
},
"babel": {
"presets": [
"next/babel"
],
"plugins": [
[
"inline-react-svg",
"transform-define",
"./env-config.js"
]
]
},
"scripts": {
"dev": "next"
},
"devDependencies": {
"babel-plugin-inline-react-svg": "^0.4.0",
"file-loader": "^0.11.2",
"string-replace-loader": "^1.3.0",
"url-loader": "^0.5.9"
}
}
感谢。