在我的Webpack构建中遇到以下错误: ./node_modules/bindings/bindings.js中的错误 找不到模块:错误:无法解析'E:\ repo \ testrepo \ node_modules \ bindings'中的'fs'
我尝试从preset-env网站进行一些配置,例如指定带有节点的目标字段:“当前”值。但这没有帮助。
也许有人知道如何解决这个问题?
感谢大家的帮助!
import path from 'path';
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import TerserWebpackPlugin from 'terser-webpack-plugin';
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
import PostCssSaveParser from 'postcss-safe-parser';
module.exports = (env, options) => {
const development = !process.argv.includes('--prod');
const config = {
mode: development ? 'development' : 'production',
entry: {
index: ['@babel/polyfill', './src/js/init/init.js'],
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].[hash:8].js',
},
devServer: {
overlay: true,
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'assets': path.resolve(__dirname, 'assets'),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: '/node_modules/',
use: [
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
forceAllTransforms: !development,
modules: false,
useBuiltIns: false,
debug: false,
},
],
[
'@babel/preset-react',
{
development: development,
},
],
],
plugins: [
['@babel/plugin-proposal-class-properties', { 'loose': false }],
'@babel/plugin-transform-spread',
'@babel/plugin-proposal-export-default-from',
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-syntax-dynamic-import'],
['@babel/plugin-transform-async-to-generator', {
module: 'bluebird',
method: 'coroutine',
}],
...(development ? ["babel-plugin-styled-components"] :
["@babel/transform-react-constant-elements",
"transform-react-remove-prop-types"])],
babelrc: false,
},
},
],
},
{
test: /\.(less|css)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
},
{
test: /\.(svg|png)$/,
oneOf: [
{
test: /\.(svg)$/,
use: [
{
loader: 'url-loader',
},
],
},
{
test: /\.(png)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
],
},
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new MiniCssExtractPlugin({
filename: '[name].[hash:8].css',
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'public/index.html',
}),
...development ? [
new webpack.HotModuleReplacementPlugin(),
] : [
],
],
devtool: development ? 'source-map' : false,
optimization: {
minimize: !development,
noEmitOnErrors: !development,
minimizer: [
new TerserWebpackPlugin({
parallel: true,
cache: true,
sourceMap: false,
terserOptions: {
parse: {
ecma: 8,
},
compress: {
ecma: 5,
passes: 2,
inline: 2,
},
output: {
ecma: 5,
comments: false,
},
},
}),
new OptimizeCssAssetsPlugin({
cssProcessorOptions: {
parser: PostCssSaveParser,
map: false,
discardComments: { removeAll: true },
},
}),
],
},
};
return config;
};