こんにちは私は私のアプリケーションでソケットioを使用しています。これはfsを必要とします。以下のwebpack構成を使用してjavascriptをバンドルしようとすると、エラーが発生したimは 'fs'を解決できません。
Module not found: Error: Can't resolve 'fs' in 'my application path/node_modules/socket.io/lib'
target:'node'
とnode:{fs:'empty'}
を追加して見つけました。この問題は解決されました。
しかし、sass-loaderに問題があります。エラーを下回っています。
ERROR in javascript/bundle.js from UglifyJs
Unexpected token: name (zlibLimiter) [javascript/bundle.js:60019,4]
Child extract-text-webpack-plugin ../../../node_modules/extract-text-webpack-plugin/dist ../../../node_modules/css-loader/index.js??ref--2-2!../../../node_modules/sass-loader/lib/loader.js!s
上記のエラーを無視してアプリケーションを実行します。エラーを下回っています。
external "crypto":1 Uncaught ReferenceError: require is not defined
at Object.__decorate (external "crypto":1)
at __webpack_require__ (bootstrap 93620a17882f7a2aa1d3:19)
at Object.byteToHex (rng.js:4)
at __webpack_require__ (bootstrap 93620a17882f7a2aa1d3:19)
以下は私のwebpack設定とバージョンです。誰かがこの問題を解決するのを助けてくれますか?.
"webpack": "〜3.6.0"、npm -v 5.8.0 node -v v8.4.0
const webpack = require('webpack');
const env = process.env.NODE_ENV;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const extractSass = new ExtractTextPlugin({
filename: 'css/[name].css',
allChunks: false
});
let output = {
path: __dirname + '/src/main/resources/static/',
filename: 'javascript/[name].js'
};
if (env === 'debug' || env === 'nondev') {
output = {
path: __dirname + '/target/classes/static/',
filename: 'javascript/[name].js'
};
}
let config = {
context: __dirname + '/app/js/src',
entry: {
bundle: './index.jsx',
application: './static/scss/application.scss',
'application-pdap': './static/scss/application-pdap.scss'
},
output: output,
devtool: 'cheap-module-source-map',
module: {
rules: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {presets: ['es2015', 'react']}
},
{
test: /\.(woff|woff2|eot|ttf|svg|png|jpg|gif)$/,
loader: 'file-loader?limit=1024&name=images/[name].[ext]'
},
{
test: /\.(scss|css)$/,
include: [path.resolve(__dirname, 'app/js/src/static/scss')],
use: ExtractTextPlugin.extract({
publicPath: '../',
use: [
{
loader: 'css-loader',
options: {
minimize: true,
sourceMap: false
}
},
{loader: 'sass-loader'}
],
fallback: 'style-loader'
})
}
]
},
plugins: [extractSass],
};
if (env === 'production' || env === 'nondev') {
config.devtool = 'nosources-source-map';
config.plugins.Push(
new webpack.DefinePlugin({
'process.env': {NODE_ENV: '"production"'}
})
);
config.plugins.Push(new webpack.optimize.UglifyJsPlugin({
compress: {warnings: false},
comments: false,
sourceMap: false,
minimize: false
}));
}
module.exports = config;
Fs(npm i fs)をインストールし、webpack設定に追加するだけです
externals: ["fs"],
ソリューションは、構築するアプリケーションのタイプによって異なります。通常、フロントエンドとバックエンドのJavaScriptコードを別々にバンドルして、2つの出力バンドルを効率的に作成します。
フロントエンドプロジェクト/ウェブアプリの場合、 socket.io client ライブラリをアプリバンドルに追加します(fs
などのノードの依存関係はありません)。 target:'web
'を選択するか、デフォルトなのでそのままにします。また、node:{fs:'empty'}
でモックする必要もありません。
アプリケーションのバックエンド部分を作成する場合は、 target:'node'
を選択して socket.io server ライブラリをインストールします。他の回答に示すようにexternals: ["fs"]
を指定する必要はありません。target: 'node'
がそれを処理し、パスやfsなどの組み込みモジュールをバンドルしないためです。実際にnpm i fs
を実行する必要はありません。これは非常に見苦しいパターンであり、一般的なパッケージ名を持つ悪意のあるパッケージの場合もあります。
ノードバックエンドをバンドルする必要がある場合は、自分で質問することもできます。これを行う場合は、たとえば webpack-node-externals
のようなパッケージをインストールできます。これにより、すべて(デフォルト)または特定のnpmパッケージが "externals" として扱われます。 =およびそれらをバンドルから除外します。バックエンドに関しては、サーバーを起動するとすべての依存関係が./node_modules
フォルダーにインストールされるので、バンドルに含める必要はありません。
変換する特定のローダーから一部のファイルを除外する必要がある場合は、意図した モジュール除外ルール を使用できます。たとえば、node_modules
フォルダをbabel-loader
変換から除外します。
{ test: /\.(jsx|js)$/, exclude: /node_modules/, loader: "babel-loader" }
私があなたにお勧めできる良い関連記事は フロントエンドとバックエンドの両方のためのWebpack Javascriptバンドル(nodejs) です。
ここに遅れているので、それでも少し明確になることを願っています。