好むと好まざるとにかかわらず、 webpack は最新のフロントエンドJavaScriptツールセットの定番であり、無数の小さなファイルを1つ(または複数)のまとまりのあるバンドルに変えます。 しかし、多くの人にとって、それは謎です。 複雑な既製の構成を生成するの上昇CLI ツールは、この問題を和らげ、悪化させるのに役立ちました。 しかし、すべてが語られて行われるとき、あなたはその無数の構成ファイルが何をしているのかさえ本当に理解していますか? 手作業で独自の構成を構築できますか? うまくいけば、この記事の後、あなたはそうなるでしょう。

発進

vue-cliのwebpack-simpletemplateを使用して簡単なプロジェクトを作成しましょう。

The webpack-simple テンプレートは、Vueでうまくいくのと同じくらい基本的なWebpackセットアップです。 名前が示すように、それは非常に単純ですが、それは仕事を非常にうまくやり遂げます。 あなたがそうするはずがないのに、私は一度それを本番環境で使用したことを認めなければなりません…

# Install vue-cli globally if you haven't already.
$ npm install -g vue-cli

# Create a new project called "demistify-project" with the "webpack-simple" template.
$ vue init webpack-simple demistify-project

# Install the dependencies for the project
$ cd demistify-project
$ npm install

さて、今、必要に応じて、開発ビルドを起動します npm run dev コードやホットリロードなどを試してみてください。 心配しないで、待ってます。

✨MysticalConfig✨

やった? さて、先に進んで、覗いてみましょう webpack.config.js、大部分の重労働を行うファイル。 ここにあるファイルを適切に貼り付けます。 (バージョンで生成 1.0.0webpack-simple テンプレート。)

webpack.config.js
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

さて、そこに取り入れるべきことがかなりあります。 そして正直なところ、あなたはそれのほとんどを放っておくのが良いでしょう。 私はそれを私の能力の限りを尽くして説明しようとします、それであなたが本当に何かをいじりたいと思うなら、あなたは少なくともあなたが何をいじっているのかについて漠然とした考えを持っているでしょう。

ともかく、 webpack.config.js プロジェクトをビルドするためにwebpackによって解釈されるオブジェクトをエクスポートする単なるファイルです。 つまり、その中の任意のノードモジュールを使用して、必要な数のファイルと場所から構成できます。 これにより、Webpackは非常に柔軟で強力になりますが、ビルド構成を作成するときにまったく同じ規則を使用する人はほとんどいないことも意味します。

エントリ

ドキュメンテーション

そのオブジェクトをステップスルーすると、最初にヒットするプロパティは entry. これは、バンドルプロセスを開始するファイルをWebpackに指示します。 文字列の配列を渡すことも、オブジェクトを使用してさまざまなチャンクを指定することもできます。

entry: './src/main.js',

// Different chunks:
entry: {
  main: './src/main.js',
  vendor: './vendor/index.js'
}

出力

ドキュメンテーション

次のセクションはもう少し複雑で紛らわしいです。 The output プロパティは、生成されたバンドルがどこで(どのように)終了するかを指定する場所です。 テンプレートで使用されているため、出力セクションは次のようになります。

output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'build.js'
},
  • path-生成されたすべてのアセットのルートディレクトリ。 を使用しております __dirnamepath ここでは、現在の作業ディレクトリに関係なく、すべてが正しい場所に配置されるようにします。
  • publicPath -これは、開発HTTPサーバーがコンテンツを提供するパスです。 output.path の上。 特定の設定では、これを少し変更する必要がある場合があります。 基本的: ./dist/build.js ファイルシステムで /dist/build.js.
  • filename-すべてをバンドルするファイルの名前。 これは、ハッシュを含めるようにカスタマイズできます(build-[hash].js)またはチャンク名を使用します(build-[name].js)およびその他

私の問題の大部分は、設定ミスが原因であることがわかりました entryoutput セクションがあるので、それらに実際に精通し、何か問題が発生した場合はまずそこを確認することをお勧めします。

モジュール、ルール、およびローダー。 ああ、私の!

ここでのこのビットは、本質的にWebpackビルドのコアです。 ファイルローダー。 ローダーは基本的に、ルーティングされるファイルを他の形式に変換するパッケージです。 これは、これらすべてのクールなプリプロセッサが好きな方法です babelvue-loader webpackで動作します。

このセクションは複雑に見えますが、正直なところ、それは本当に予測可能で理解しやすいものです。

先に進んで、各ルールをステップスルーしてみましょう。

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
    }
    // other vue-loader options go here
  }
},

ああ、そうだね。 vue-loader は、単一ファイルコンポーネントをJSに変換して関数をレンダリングするVue.jsの秘密のソースです。

各プロパティの機能は次のとおりです。

  • test-ファイル名がで終わるかどうかをチェックする正規表現 .vue 拡大。 それは確かに vue-loader に対してのみ実行されます .vue ファイル。
  • loader-使用するローダーの名前。 ここに驚きはありません。
  • options-ローダーに渡すことができるオプション。

以来 vue-loader テンプレートの一部のプリプロセッサとして他のローダーを追加できるため、options.loadersプロパティが追加されます。

のフォーマット options.loaders 以下のとおりであります:

loaders: {
  preprocessorName: Loader Definition | Array<Loader Definition>
}

たとえば、VueコンポーネントでSCSSを使用する場合は、次のように設定します。 options.loaders そのようです:

loaders: {
  sass: [
    {
      loader: 'css-loader'
    },
    {
      loader: 'sass-loader',
      options: {
        indentedSyntax: false // Set to true to use indented SASS syntax.
      }
    }
  ]
}

それは最初にスタイルを処理します sass-loader それらを有効なCSSに変換してから、webpackの css-loader 彼らと一緒に必要なことは何でもしなさい。

さて、次のルールに移ります。 のためのもの babel-loader.

によって指定されたように test、webpackはすべてを実行します .js を介してファイル babel-loader.

新しいプロパティexcludeも表示されます。 これは、無視するパターンをwebpackに指示する正規表現です。 この場合、それはすべてを除外します .js のファイル node_modules.

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/
},

最終的なローダーは file-loader インポートまたはリンクされたファイルを受け取り、それらを出力ディレクトリに出力します。

この構成では、4つの一般的な画像形式で実行され、ファイルの内容のハッシュが追加されたビルドディレクトリに出力されます。 (これにより、ファイルがいつ変更されたかを簡単に知ることができます。)また、これらのファイルへの参照を変更して、ハッシュが含まれるようにします。

例えば、 ./src/alligator.svg になるかもしれない ./dist/alligator.svg?uqTyWCLN8jVxGHFU4kiN1DXB0G6qzDae4Y4kFxZaP4g=

{
  test: /\.(png|jpg|gif|svg)$/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]?[hash]'
  }
}

その他のビットとボブ

構成オブジェクトの最後には、さらにいくつかのプロパティがあります。 これらはwebpackのオプション機能に関連していますが、とにかくそれらを見ていきましょう。

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
},
devServer: {
  historyApiFallback: true,
  noInfo: true
},
performance: {
  hints: false
},
devtool: '#eval-source-map'
  • 解決/エイリアスresolve オブジェクトを使用すると、webpackのモジュール解決がどのように機能するかを構成できます。 この場合、パッケージのエイリアスを作成しています vuevue/dist/vue.esm.js、ES2017モジュール形式でVueを提供します。
  • devServerdevServer webpackの開発サーバーを構成できます。 この場合、送信にフォールバックするように指示しているだけです index.html 為に 404 エラー(historyApiFallback). 全て noInfo ホットリロードが発生するたびに、ターミナルに必要のないものを大量に出力しないようにwebpackに指示しますか?
  • パフォーマンス-次のようなプロパティ performance 重要に見えますよね? がっかりさせて申し訳ありません。 実際に行うのは、webpackのパフォーマンスのヒントを構成することだけです。これは、ほとんどの場合、かなり大きなファイルをバンドルするときに通知します。 今のところ、ここでは無効にしています。
  • devtooldevtool プロパティを使用すると、使用するソースマッピングの方法を決定できます。 これには、速度、品質、および生産準備が異なる12の異なるオプションがあります。 使用しています eval-source-map ここでは正直言って素晴らしいことではありませんが、新しいファイルを作成したり、ソースを変更したりすることはありません。

生産構成

おめでとう! ほぼ完了です。 ファイルの最後のビットは、コードの製品版をビルドしている場合に行われる構成の変更です。 それはそれよりもずっと怖いように見えます。 実際、すべてを個別に書き留めるのではなく、コメントを入れるだけだと思います。

// Make sure to set the NODE_ENV environment variable to 'production'
// when building for production!
if (process.env.NODE_ENV === 'production') {
  // Use standard source mapping instead of eval-source-map.
  module.exports.devtool = '#source-map'

  // http://vue-loader.vuejs.org/en/workflow/production.html
  // Add these plugins:
  module.exports.plugins = (module.exports.plugins || []).concat([
    // Let's your app access the NODE_ENV variable via. window.process.env.
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),

    // Crumples your bundled source code into a tiny little ball.
    // (Minifies it.)
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),

    // This is just here for compatibility for legacy webpack plugins
    // with an options format that isn't compatible with Webpack 2.x
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

どうぞ! うまくいけば、あなたは今あなた自身を作成するのに十分知っています Webpack + Vue 設定。

疑わしい場合は、ドキュメントを読むことを躊躇しないでください。 彼らは最近かなり改善しました。