VueのWebpack構成を解体する
好むと好まざるとにかかわらず、 webpack は最新のフロントエンドJavaScriptツールセットの定番であり、無数の小さなファイルを1つ(または複数)のまとまりのあるバンドルに変えます。 しかし、多くの人にとって、それは謎です。 複雑な既製の構成を生成するの上昇CLI ツールは、この問題を和らげ、悪化させるのに役立ちました。 しかし、すべてが語られて行われるとき、あなたはその無数の構成ファイルが何をしているのかさえ本当に理解していますか? 手作業で独自の構成を構築できますか? うまくいけば、この記事の後、あなたはそうなるでしょう。
発進
vue-cliのwebpack-simpletemplateを使用して簡単なプロジェクトを作成しましょう。
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
を覗いてみましょう。このファイルは大部分の手間のかかる作業を行います。 ここにあるファイルを適切に貼り付けます。 (webpack-simple
テンプレートのバージョン1.0.0
で生成されます。)
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' }
出力
次のセクションはもう少し複雑で紛らわしいです。 output
プロパティは、生成されたバンドルがどこで(どのように)終了するかを指定する場所です。 テンプレートで使用されているため、出力セクションは次のようになります。
output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' },
- path-生成されたすべてのアセットのルートディレクトリ。 ここでは
__dirname
とpath
を使用して、現在の作業ディレクトリに関係なく、すべてが正しい場所に配置されるようにします。 - publicPath -これは、開発HTTPサーバーが
output.path
のコンテンツを提供するパスです。 特定の設定では、これを少し変更する必要がある場合があります。 基本的に:ファイルシステムの./dist/build.js
は/dist/build.js
になります。 - filename-すべてをバンドルするファイルの名前。 これは、ハッシュ(
build-[hash].js
)を含めるか、チャンク名(build-[name].js
)およびその他を使用するようにカスタマイズできます。
私の問題の大部分は、entry
セクションとoutput
セクションの設定ミスが原因であることがわかったので、それらに精通し、問題が発生した場合はまずそこを確認することをお勧めします。 。
モジュール、ルール、およびローダー。 ああ、私の!
ここでのこのビットは、本質的にWebpackビルドのコアです。 ファイルローダー。 ローダーは基本的に、ルーティングされるファイルを他の形式に変換するパッケージです。 これは、babel
やvue-loader
のようなすべてのクールなプリプロセッサがwebpackで動作する方法です。
このセクションは複雑に見えますが、正直なところ、それは本当に予測可能で理解しやすいものです。
先に進んで、各ルールをステップスルーしてみましょう。
{ test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } },
そうそう、良い' ol 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はbabel-loader
を介してすべての.js
ファイルを実行します。
新しいプロパティexcludeも表示されます。 これは、無視するパターンをwebpackに指示する正規表現です。 この場合、node_modules
内の.js
ファイルはすべて除外されます。
{ 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 / alias -
resolve
オブジェクトを使用すると、webpackのモジュール解決がどのように機能するかを構成できます。 この場合、パッケージvue
をvue/dist/vue.esm.js
にエイリアスします。これは、ES2017モジュール形式でVueを提供します。 - devServer -
devServer
を使用すると、webpackの開発サーバーを構成できます。 この場合、404
エラー(historyApiFallback
)に対してindex.html
の送信にフォールバックするように指示しているだけです。 すべてのnoInfo
は、ホットリロードが発生するたびに、必要のないものをターミナルに出力しないようにwebpackに指示します。 - パフォーマンス-
performance
のようなプロパティは重要に見えますか? がっかりさせて申し訳ありません。 実際に行うのは、webpackのパフォーマンスのヒントを構成することだけです。これは、ほとんどの場合、かなり大きなファイルをバンドルするときに通知します。 今のところ、ここでは無効にしています。 - devtool -
devtool
プロパティを使用すると、使用するソースマッピングの方法を決定できます。 これには、速度、品質、および生産準備が異なる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
セットアップを作成するのに十分な知識を持っているでしょう。
疑わしい場合は、ドキュメントを読むことを躊躇しないでください。 彼らは最近かなり改善しました。