タグ付けされた質問 「webpack」

Backbone.jsでWebpackを使用するというアイデアを模索しています。 クイックスタートガイドに従い、Webpackがどのように機能するかについての一般的な考え方はありますが、jquery /バックボーン/アンダースコアなどの依存関係ライブラリをロードする方法がわかりません。 それらを外部にロードする<script>必要がありますか、それともWebpackがRequireJSのシムのように処理できるものですか？ よるとWebPACKのドキュメント：モジュールをシミング、ProvidePluginおよびexternalsこれに関連すると思われる（そうであるbundle!ローダどこか）が、私は使用する際に把握することはできません。 ありがとう

84 backbone.js  requirejs  amd  webpack 

node_modulesフォルダーにfont-awesomeがあるので、次のようにメインの.scssファイルにインポートしようとします。 @import "../../node_modules/font-awesome/scss/font-awesome.scss"; しかし、Webpackバンドルのコンパイルが失敗し、教えてくれました Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot font-awesome.scssファイルが相対パス '../fonts/'を参照しているためです。 scss \ webpackに別のファイルを@importし、そのファイルのフォルダーをホームフォルダーとして使用して、相対パスが期待どおりに機能するようにするにはどうすればよいですか？

84 node.js  sass  npm  font-awesome  webpack 

私はwebpackで遊んでいますが、ビルド中に次のように出力されます + 27 hidden modules。これはどういう意味ですか？使用しているグローバル定数を必要とせずに検出していますか？

83 javascript  build  webpack 

構築しているノードフレームワークにwebpackを使用しています（確かに、おそらくgulpを使用する必要があります）。EJSモジュールを含めると、node_modulesディレクトリを除外するように明示的に指示した場合でも、webpackはコンパイルされたソースにそれを含めます。 module.exports = { context: __dirname, target: 'node', // ... output: { libraryTarget: 'commonjs' // ... }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?{ "stage": 0, "optional": ["runtime"] }' } ] } }; ご覧のとおり、JSファイルのテストがあり、node_modulesを除外するように指示しています。なぜ私の除外を無視するのですか？

83 javascript  webpack 

私はwebpackを使用してreactコンポーネントを構築しており、を使用しextract-text-webpack-pluginてcssを生成されたjsファイルから分離しようとしています。ただし、コンポーネントをビルドしようとすると、次のエラーが発生します Module build failed: ReferenceError: window is not defined。 私のwebpack.config.jsファイルは次のようになります。 var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: { MainComponent: './src/main.js' }, output: { libraryTarget: 'var', library: 'MainComponent', path: './build', filename: '[name].js' }, module: { loaders: [{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader!css-loader') }] }, plugins: [ new …

82 reactjs  webpack 

私CommonsChunkPluginは、すべてのエントリポイントを調べ、それらの間に共通のパッケージ/依存関係があるかどうかを確認し、それらを独自のバンドルに分離するという一般的な要点を理解しています。 したがって、次の構成があると仮定します。 ... enrty : { entry1 : 'entry1.js', //which has 'jquery' as a dependency entry2 : 'entry2.js', //which has 'jquery as a dependency vendors : [ 'jquery', 'some_jquery_plugin' //which has 'jquery' as a dependency ] }, output: { path: PATHS.build, filename: '[name].bundle.js' } ... 使用せずにバンドルした場合 CommonsChunkPlugin 最終的に3つの新しいバンドルファイルが作成されます。 entry1.bundle.jsそこから完全なコードが含まれているentry1.jsとjqueryし、独自のランタイムが含まれています entry2.bundle.jsそこから完全なコードが含まれているentry2.jsとjqueryし、独自のランタイムが含まれています …

82 javascript  webpack  bundle  webpack-plugin  commonschunkplugin 

webpackを使用してプロジェクトをビルドし、次のwebpack構成に反応しようとしています。 var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'babel-polyfill', './app/less/main.less', './app/main.js', 'webpack-dev-server/client?http://localhost:8080' ], output: { publicPath: '/', filename: 'dist/main.js' }, debug: true, devtool: 'source-map', module: { loaders: [ { test: /\.js$/, include: path.join(__dirname, 'app'), loader: 'babel-loader', query: { presets: ['react', 'es2015'] } }, { …

80 reactjs  webpack  babeljs 

でwebpackを使用しています HtmlWebpackPlugin、html-loaderとfile-loader。フレームワークを使用せず、typescriptのみを使用する単純なプロジェクト構造があります。したがって、HTMLコードを直接に記述しindex.htmlます。また、このHTMLファイルをのテンプレートとして使用していますHtmlWebpackPlugin。 すべてのWebサイトと同じように、PNGを参照する画像をアセットフォルダーに配置する必要があります。file-loader新しいファイル名をsrcタグ内に正しく配置してファイルをロードする必要がありますが、それは何が起こっているのかではありません。代わりに、srcタグの値として、があります[object Module]。私は、file-loaderいくつかのオブジェクトを放出し、その.toString()メソッドが実行されると、このように表されると想定しています。ただし、file-loaderファイルが正常に処理され、新しい名前で出力パスに出力されたことがわかります。エラーは発生しません。これが私のwebpack設定とindex.htmlです。 const projectRoot = path.resolve(__dirname, '..'); { entry: path.resolve(projectRoot, 'src', 'app.ts'), mode: 'production', output: { path: path.resolve(projectRoot, 'dist'), filename: 'app.bundle.js' }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /\.html$/i, use: 'html-loader' }, { test: /\.(eot|ttf|woff|woff2|svg|png)$/i, use: 'file-loader' }, { test: /\.scss$/i, use: …

40 javascript  html  webpack 

私はtypescript 3.7オプションの連鎖、無効な結合のような機能を使用しようとします。しかしwebpack、transpaling中にエラーが発生します。 app: Module parse failed: Unexpected token (50:40) app: File was processed with these loaders: app: * ../../../node_modules/ts-loader/index.js app: You may need an additional loader to handle the result of these loaders. app: | export const Layout = (props) => { app: | const regionsResults = useQuery(regionsQuery, { fetchPolicy: …

21 typescript  webpack  ts-loader 

私は、1つのファイルに含まれる約5つの異なるES6クラスで構成される比較的小さなNPMパッケージを作成しました。それらはすべて次のように見えます。 export default class MyClass { // ... } 次に、パッケージのエントリポイントを次のように設定しました。 export { default as MyClass } from './my-class.js'; export { default as MyOtherClass } from './my-other-class.js'; 次に、エントリポイントをwebpackとbabelを介して実行し、最終的には変換されて縮小されたindex.jsを生成します。 パッケージのインストールとインポートは正常に機能しますが、クライアントコードから以下を実行すると、 import { MyClass } from 'my-package'; "MyClass"をインポートするだけでなく、すべてのクラスのすべての依存関係を含むファイル全体をインポートします（私のクラスの一部には大きな依存関係があります）。 すでにバンドルされているパッケージの一部をインポートしようとすると、webpackがどのように機能するかわかりましたか？したがって、私はnode_modules/my-packagebabelも実行するようにローカルのWebpack構成をセットアップしてから、次のことを試しました。 import { MyClass } from 'my-package/src/index.js'; ただし、これでもindex.jsによってエクスポートされたすべてのクラスがインポートされます。私が望むように機能しているように見える唯一のことは、私がそうするならば： import MyClass from 'my-package/src/my-class.js'; しかし、私はむしろむしろ： 変換され縮小されたファイルをインポートできるため、node_modules内でbabelを実行するようにwebpackに指示する必要がありません。 各ファイルへのパスを入力する代わりに、エントリポイントから個々のクラスを直接インポートできる …

16 javascript  webpack  babeljs  es6-modules 

約2年前にcreate-react-appを使用して作成したリアクションアプリ（アプリA）を使用していますが、削除されました。アプリはcommonjs2モジュールとしてエクスポートされ、NPMパッケージで出荷され、next.jsプロジェクト（アプリB）で使用されます。 アプリAのいくつかのパッケージを更新するまで、すべてが順調に進んでおり、使用するいくつかの汎用コンポーネントがあります。アプリBにインポートするときのエラーは、おそらくSSRが原因でウィンドウが定義されていなかったことです。 これを使用して、アプリAのwebpack構成でこれを解決しましたglobalObject: 'this'。 アプリBにアプリAをインポートしようとすると、エラーメッセージは次のようになります。 TypeError: Cannot read property 'webpackJsonp' of undefined どこかに電話しようとしているとwindow['webpackJsonp']思いますか？ 私はすでにwebpackJsonpFunctionを変更しようとしましたが、予想通り、undefinedの別のプロパティを取得しようとします。 どんな助けでも大歓迎です！ 完全なスタックトレース： [ error ] TypeError: Cannot read property 'webpackJsonp' of undefined at /Users/syberen/projects/parentcompany/pblx-store-detail/build/static/js/main.js:1:2087 at Object.<anonymous> (/Users/syberen/projects/parentcompany/pblx-store-detail/build/static/js/main.js:1:2203) at Module._compile (internal/modules/cjs/loader.js:776:30) at Module.m._compile (/Users/syberen/projects/parentcompany/companyname/node_modules/ts-node/src/index.ts:473:23) at Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Object.require.extensions.<computed> [as .js] (/Users/syberen/projects/parentcompany/companyname/node_modules/ts-node/src/index.ts:476:12) at Module.load (internal/modules/cjs/loader.js:643:32) at Function.Module._load …

16 reactjs  npm  webpack  next.js 

共有可能なReactコンポーネントライブラリを作成しています。 ライブラリには多くのコンポーネントが含まれていますが、エンドユーザーはそれらのいくつかを使用するだけで済みます。 コードをWebpack（またはParcelまたはRollup）にバンドルすると、すべてのコードを含む1つのファイルが作成されます。 パフォーマンス上の理由から、実際に使用されない限り、すべてのコードをブラウザでダウンロードしたくありません。コンポーネントをバンドルするべきではないと私は思いますか？バンドルはコンポーネントの消費者に任せるべきですか？コンポーネントの消費者に他に何かを残しますか？JSXをトランスパイルするだけですか？ 同じリポジトリに多数の異なるコンポーネントが含まれている場合、main.jsには何を含める必要がありますか？

12 reactjs  npm  webpack  es6-modules  rollup 

ERROR in C:/phpStudy2018/PHPTutorial/WWW/Tms.Web/node_modules/@types/node/globals.d.ts(139,11): 139:11 Interface 'NodeRequire' cannot simultaneously extend types 'Require' and 'RequireFunction'. Named property 'cache' of types 'Require' and 'RequireFunction' are not identical. 137 | 138 | // For backwards compability > 139 | interface NodeRequire extends NodeJS.Require {} | ^ 140 | interface RequireResolve extends NodeJS.RequireResolve {} 141 …

12 typescript  vue.js  webpack 

問題の背景：ページに数学を表示するためにkatexを使用しています。次に、そのページの一部のPDFバージョンを作成したいので、すべてのCSSをインライン化してレンダラーに渡す、エクスポートするパーツを含むHTMLドキュメントを作成します。レンダラーはノードのリソースにアクセスできないため、すべてがインライン化されます。フォント以外は完全に動作します。 url-loaderとbas64-inline-loaderの両方を試しましたが、生成されたフォントはインライン化されていません。生成されたCSSをデバッガーで検査しましたが、古いURLはまだ残っており、フォントのデータURLはありません。 これは私の現在のwebpack.config.jsです： const path = require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { "editor": './src/editor.js', "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js', "json.worker": 'monaco-editor/esm/vs/language/json/json.worker', "css.worker": 'monaco-editor/esm/vs/language/css/css.worker', "html.worker": 'monaco-editor/esm/vs/language/html/html.worker', "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker', }, output: { globalObject: 'self', filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { …

10 javascript  css  webpack  data-uri 

私のnextjsプロジェクトでは、jsconfig.json絶対インポートを簡単にするためにパスをマッピングしました { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["./*"] }, "target": "es6", "module": "commonjs", "experimentalDecorators": true } } インポートパスは次のようになります import { VIEW } from '@/src/shared/constants'; 私のeslintrc.js設定は module.exports = { ... , settings: { "import/resolver": { alias: { extensions: [".js"], map: ["@", "."] } } } } 「@ / what …

9 javascript  webpack  babel  eslint