VueのWebpack構成を解体する
好むと好まざるとにかかわらず、 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.0
の webpack-simple
テンプレート。)
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-生成されたすべてのアセットのルートディレクトリ。 を使用しております
__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
}
},
ああ、そうだね。 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のモジュール解決がどのように機能するかを構成できます。 この場合、パッケージのエイリアスを作成していますvue
にvue/dist/vue.esm.js
、ES2017モジュール形式でVueを提供します。 - devServer–
devServer
webpackの開発サーバーを構成できます。 この場合、送信にフォールバックするように指示しているだけですindex.html
為に404
エラー(historyApiFallback
). 全て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
設定。
疑わしい場合は、ドキュメントを読むことを躊躇しないでください。 彼らは最近かなり改善しました。