次のフォルダー構造を持つレガシー プロジェクトに webpack を導入しようとしています。
-web
-project
- webpack.config.js
- package.json
-src
- client.js
プロジェクト フォルダーで webpack --config webpack.config.js を実行するたびに、次のエラーが表示されます。
config と src の親であるため、コンテキストを web フォルダーに設定します。また、src モジュールと node モジュールの両方を resolve.modules プロパティに追加しました。不足している構成はありますか?
私のwebpack構成:
const path = require('path');
const isProduction = process.env.NODE_ENV === 'production';
const webpack = require('webpack');
const babelConfig = {
"presets": [
"@babel/preset-env",
"react"
],
"plugins": [
"transform-runtime",
"add-module-exports",
"transform-export-extensions"
],
"env": {
"development": {
"plugins": []
}
}
};
const base = path.resolve(__dirname, '..');
const project = path.resolve(base, 'project');
const src = path.resolve(base, 'src');
module.exports = {
context: base,
resolve: {
modules: [path.resolve(project, 'node_modules'), src],
extensions: ['.js', '.jsx']
},
entry: {
plp: path.resolve(src, 'client.js')
},
devtool: '#inline-source-map',
output: {
filename : '[name].js',
chunkFilename: '[name].js',
path: __dirname + "/../dist"
},
stats: {
colors: true,
modules: true,
reasons: true,
errorDetails: true
},
module: {
rules: [{
test: /\.jsx?$/,
include: [src],
use: [{
loader: 'babel-loader',
query: babelConfig
}]
}]
},
plugins: [
new webpack.DefinePlugin({
__DEVELOPMENT__: !isProduction,
__DEVTOOLS__: !isProduction
}),
new webpack.IgnorePlugin(/webpack-stats\.json$/)
]
};
package.json:
{
"dependencies": {
"babel-cli": "^6.22.2",
"babel-plugin-transform-es2015-modules-commonjs": "^6.22.0",
"babel-preset-es2016": "https://registry.npmjs.org/babel-preset-es2016/-/babel-preset-es2016-6.22.0.tgz",
"babel-preset-react": "^6.24.1",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"webpack": "^3.8.1"
}
}
前もって感謝します!