web-dev-qa-db-ja.com

jsファイルを縮小およびパックしないwebpackに指示する方法

私はこのアドレスでvue-cliwebpackボイラープレートを使用しています：

vuejs-templates/webpack

Webpackがjsファイルを縮小して開発モードでパックしないようにしたい。どのようにそれを達成することができますか？問題は、テスト済みの巨大なasp.net Webフォームアプリがあり、バイパスできない方法でjqueryとブートストラップがすでに含まれていることです。そして私はvueと競合するjqueryとbootstrap.jsを持っています。開発モードではデバッグできません。

webpackvue.jswebpack-dev-server
6
ahmad molaie

vue-cli webpack boilerplateを参照していますか： https://github.com/vuejs-templates/webpack

その場合、本番ビルド（npm runビルド）は縮小され、uglifyによってマングルされます。その動作を変更するには、build/webpack.prod.conf.jsに移動し、uglifyプロダクションオプションを編集します。必要なもの、つまり圧縮なし、マングルなしに基づいて、おそらくすべて一緒に削除するか、次のようにこれらのオプションを設定できます。

new webpack.optimize.UglifyJsPlugin({
  compress: false,
  mangle: false,
})

詳細については、webpackのドキュメントを確認してください： https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin

ベンダーファイルのパッキングにも問題がある場合、この構成は同じファイルにあります。探す：

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  ...
})

ただし、アプリにJQueryまたはBootstrap.jsを含める必要がない場合は、それらをアプリにインポートすることを避けられませんか？次に、HTML内でこれら2つのライブラリに個別にリンクします。

[〜＃〜]編集[〜＃〜]

$値が必要なESLint、またはアプリの外部に含めるその他のグローバルに関する問題に対処するには、.eslint.js構成ファイルを編集して、グローバルパラメーターを追加するか、JQueryの場合JQueryの環境変数を追加できます。

env: {
    'jquery': true
}

# or to set global vars that would be available on your apps window, i.e. window.foo
globals: {
  'foo': true
},

詳細については、eslintを確認してください： http://eslint.org/docs/user-guide/configuring

9
GuyC