URL:https://cli.vuejs.org/guide/webpack.html#simple-configuration
背景
VueCLIでWebpackの設定をしたいのだが、やり方がよくわからない。
そもそもWebpackの知識も不足している状態。
とりあえず、VueCLIのマニュアルにあたってみる。
日本語訳
Working with Webpack
# Simple Configuration
The easiest way to tweak the webpack config is providing an object to the
configureWebpack
option invue.config.js
:webpack構成を微調整する最も簡単な方法は、vue.config.jsのconfigureWebpackオプションにオブジェクトを提供することです。
// vue.config.js module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] } }
The object will be merged into the final webpack config using webpack-merge
オブジェクトは、webpack-mergeを使用して最終的なwebpack構成にマージされます
.
WARNING
Some webpack options are set based on values in
vue.config.js
and should not be mutated directly. For example, instead of modifyingoutput.path
, you should use theoutputDir
option invue.config.js
; instead of modifyingoutput.publicPath
, you should use thepublicPath
option invue.config.js
. This is because the values invue.config.js
will be used in multiple places inside the config to ensure everything works properly together.一部のwebpackオプションは、vue.config.jsの値に基づいて設定されるため、直接変更しないでください。たとえば、output.pathを変更する代わりに、vue.config.jsのoutputDirオプションを使用する必要があります。 output.publicPathを変更する代わりに、vue.config.jsのpublicPathオプションを使用する必要があります。これは、vue.config.jsの値が構成内の複数の場所で使用され、すべてが正常に機能するようにするためです。
If you need conditional behavior based on the environment, or want to directly mutate the config, use a function (which will be lazy evaluated after the env variables are set). The function receives the resolved config as the argument. Inside the function, you can either mutate the config directly, OR return an object which will be merged:
環境に基づいた条件付き動作が必要な場合、または構成を直接変更したい場合は、関数を使用します(env変数の設定後に遅延評価されます)。関数は、解決された構成を引数として受け取ります。関数内で、設定を直接変更するか、マージされるオブジェクトを返すことができます。
// vue.config.js module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // mutate config for production... } else { // mutate for development... } } }
# Chaining (Advanced)
The internal webpack config is maintained using webpack-chain
内部webpack構成はwebpack-chainを使用して維持されます
. The library provides an abstraction over the raw webpack config, with the ability to define named loader rules and named plugins, and later “tap” into those rules and modify their options.
このライブラリは、名前付きローダールールと名前付きプラグインを定義し、後でそれらのルールを「タップ」してオプションを変更する機能を備えた、未加工のWebpack構成を抽象化します。
This allows us finer-grained control over the internal config. Below you will see some examples of common modifications done via the
chainWebpack
option invue.config.js
.これにより、内部構成をより細かく制御できます。以下に、vue.config.jsのchainWebpackオプションを使用して行われる一般的な変更の例を示します。
TIP
vue inspect will be extremely helpful when you are trying to access specific loaders via chaining.vue inspectは、チェーンを介して特定のローダーにアクセスしようとする場合に非常に役立ちます。
# Modifying Options of a Loader
// vue.config.js module.exports = { chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { // modify the options... return options }) } }
TIP
For CSS related loaders, it’s recommended to use css.loaderOptions instead of directly targeting loaders via chaining. This is because there are multiple rules for each CSS file type and
css.loaderOptions
ensures you can affect all rules in one single place.CSS関連のローダーの場合、チェーンを介してローダーを直接ターゲットにするのではなく、css.loaderOptionsを使用することをお勧めします。これは、CSSファイルタイプごとに複数のルールがあり、css.loaderOptionsによって、すべてのルールが1か所で影響を受けるようになるためです。
# Adding a New Loader
// vue.config.js module.exports = { chainWebpack: config => { // GraphQL Loader config.module .rule('graphql') .test(/\.graphql$/) .use('graphql-tag/loader') .loader('graphql-tag/loader') .end() } }
# Replacing Loaders of a Rule
If you want to replace an existing Base Loader
, for example using
vue-svg-loader
to inline SVG files instead of loading the file:既存のベースローダーを交換したい場合、たとえば、ファイルをロードする代わりにvue-svg-loaderを使用してSVGファイルをインライン化します。
// vue.config.js module.exports = { chainWebpack: config => { const svgRule = config.module.rule('svg') // clear all existing loaders. // if you don't do this, the loader below will be appended to // existing loaders of the rule. svgRule.uses.clear() // add replacement loader(s) svgRule .use('vue-svg-loader') .loader('vue-svg-loader') } }
# Modifying Options of a Plugin
// vue.config.js module.exports = { chainWebpack: config => { config .plugin('html') .tap(args => { return [/* new args to pass to html-webpack-plugin's constructor */] }) } }
You will need to familiarize yourself with webpack-chain’s APIand read some source codein order to understand how to leverage the full power of this option, but it gives you a more expressive and safer way to modify the webpack config than directly mutate values.
このオプションの全機能を活用する方法を理解するには、webpack-chainのAPIに精通し、いくつかのソースコードを読む必要がありますが、直接値を変更するよりも表現力豊かで安全なwebpack configの変更方法を提供します。
For example, say you want to change the default location of
index.html
from/Users/username/proj/public/index.html
to/Users/username/proj/app/templates/index.html
. By referencing html-webpack-pluginyou can see a list of options you can pass in. To change our template path we can pass in a new template path with the following config:
たとえば、index.htmlのデフォルトの場所を/Users/username/proj/public/index.htmlから/Users/username/proj/app/templates/index.htmlに変更するとします。 html-webpack-pluginを参照することにより 渡すことができるオプションのリストを見ることができます。 テンプレートパスを変更するには、次の構成で新しいテンプレートパスを渡します。
// vue.config.js module.exports = { chainWebpack: config => { config .plugin('html') .tap(args => { args[0].template = '/Users/username/proj/app/templates/index.html' return args }) } }
You can confirm that this change has taken place by examining the vue webpack config with the
vue inspect
utility, which we will discuss next.この変更が行われたことを確認するには、vue inspectユーティリティでvue webpack configを調べます。これについては次に説明します。
# Inspecting the Project’s Webpack Config
Since
@vue/cli-service
abstracts away the webpack config, it may be more difficult to understand what is included in the config, especially when you are trying to make tweaks yourself.@ vue / cli-serviceはwebpackの設定を抽象化するため、特に自分で調整しようとする場合は、設定に含まれる内容を理解するのが難しくなる場合があります。
vue-cli-service
exposes theinspect
command for inspecting the resolved webpack config. The globalvue
binary also provides theinspect
command, and it simply proxies tovue-cli-service inspect
in your project.vue-cli-serviceは、解決されたwebpack構成を検査するためのinspectコマンドを公開します。グローバルvueバイナリはinspectコマンドも提供し、プロジェクトのvue-cli-service検査に単純にプロキシします。
The command will print the resolved webpack config to stdout, which also contains hints on how to access rules and plugins via chaining.このコマンドは、解決されたwebpack構成をstdoutに出力します。これには、連鎖を介してルールとプラグインにアクセスする方法に関するヒントも含まれています。
You can redirect the output into a file for easier inspection:
vue inspect > output.js
Note the output is not a valid webpack config file, it’s a serialized format only meant for inspection.
You can also inspect a subset of the config by specifying a path:
# only inspect the first rule vue inspect module.rules.0
Or, target a named rule or plugin:
vue inspect --rule vue vue inspect --plugin html
Finally, you can list all named rules and plugins:
vue inspect --rules vue inspect --plugins
# Using Resolved Config as a File
Some external tools may need access to the resolved webpack config as a file, for example IDEs or command line tools that expect a webpack config path. In that case you can use the following path:
一部の外部ツールは、解決されたwebpack構成にファイルとしてアクセスする必要がある場合があります。たとえば、webpack構成パスが必要なIDEやコマンドラインツールなどです。その場合、次のパスを使用できます。
<projectRoot>/node_modules/@vue/cli-service/webpack.config.js
This file dynamically resolves and exports the exact same webpack config used in
vue-cli-service
commands, including those from plugins and even your custom configurations.このファイルは、vue-cli-serviceコマンドで使用されるものとまったく同じwebpack構成を動的に解決してエクスポートします。これには、プラグインやカスタム構成からのものも含まれます。