Vue.js

VueCLI GuideのWorking with Webpackの日本語訳

  /

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 in vue.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 modifying output.path, you should use the outputDir option in vue.config.js; instead of modifying output.publicPath, you should use the publicPath option in vue.config.js. This is because the values in vue.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 in vue.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-plugin

you 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 the inspect command for inspecting the resolved webpack config. The global vue binary also provides the inspect command, and it simply proxies to vue-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構成を動的に解決してエクスポートします。これには、プラグインやカスタム構成からのものも含まれます。

 

 

RELATED POST