webpack技術解説及び入門

webpack技術入門
webpackは基本的に先端プロジェクトの標準装備構築ツールとなりました.しかし、フロントエンドのチームでは、構築者以外の開発者は仕事の中で完全な配置プロセスを実現する機会がありません.この文章は私が会社の中でwebpackとbabelの配置とプラグインの開発の1つの細いバージョンを分かち合うので、みんなに本文を読むことを通すことができることを望んで、比較的に良いのはwebpackツールを整理します.
webpackの出現はどんな問題を解決しましたか?
JavaScriptは世に出てから、ブラウザの標準スクリプト言語になります.しかし、JS自体は、pythonやjavaのパッケージ、サブモジュールのimportなどの構文を提供していません.また、フロントエンドコードは、CSS、png、webfontsなどのJS以外のファイルを処理する必要があります.先端工程化の大潮の下で、JSを処理することができますし、他の資源ファイルを処理することもできます.webpackはこのような解決策の優れた代表です.以下、下記のディレクトリ構造に従ってwebpackの使用について説明します.1、webpack概要2、簡単で通用するwebpackプロファイル3、webpackのプロファイル解読4、webpackでよく使われるplugins及びloader
1.webpackの概要
webpack=module building system.webpackから見ると、すべてのリソースファイルはモジュールであり、処理の仕方は違っています.上の二つの言葉はwebpackをtop-levelの角度からはっきり言いました.webpackの使用については、私たちが普段開発している業務製品と同じです.製品の需要=>コード設計==>APIを開発者に提供します.webpackで解決する必要なポイントは、先端モジュールをどうやってうまくロードするかです.ここでモジュールの二文字を使ったのは、webpackがJSから出発し、すべてのファイルを処理するモジュールと見なしたからです.webpack自体はこのモジュールに関心がありません.ファイルタイプにこだわる必要はなく、設定ファイルのモジュール処理をスケジュールするだけの方法でこのすべてを完成します.例えば、プロジェクトの中でES 6/7の文法を使ってJSコードを作成します.だから、私たちはバーベル?ファイルをロードしてhtml文字列を取得する必要がありますので、raw-loaderを設定するだけで対応ファイルの文字列を取得できます.たとえば、私たちはsass/lessファイルをcssにプリコンパイルしなければならないので、sass-loader/less-loaderを設定するだけで処理できます.webpackはAPIインターフェースのセットを提供しています.開発者はその提供された仕様に従って実行すればいいです.開発者にとっては、英語の文書を読む能力とnodeJS以外に、webpackの学習のハードルは本当に高くないです.
2.簡単で通用するwebpackプロファイル
私たちは下記のwebpack.co.nfigファイルで分析します.

var webpack = require("webpack");
var DefinePlugin = require('webpack/lib/DefinePlugin');
module.exports =  {       
    context:process.cwd(),       
    watch: true,        
    entry: './index.js',        
    devtool: 'source-map',        
    output: {           
        path: path.resolve(process.cwd(),'dist/'),           
        filename: '[name].js'       
    },        
    resolve: {            
        alias:{ jquery: process.cwd()+'/src/lib/jquery.js',}       
    },       
     plugins: [           
         new webpack.ProvidePlugin({                
             $: 'jquery', 
             _: 'underscore',               
             React: 'react'           
         }),           
         new DefinePlugin({             
             'process.env': {               
                 'NODE_ENV': JSON.stringify('development')             
             }           
         })       
     ],        
module: {           
     loaders: [{               
         test: /\.js[x]?$/,               
         exclude: /node_modules/,               
         loader: 'babel-loader'           
         },  {               
         test: /\.less$/,               
         loaders:['style-loader', 'css-loader','less-loader']           
         },  {               
         test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,               
         loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
         }, {               
         test: /\.html/,               
         loader: "html-loader?" + JSON.stringify({minimize: false })           
         } ]       
     }   
 };

この簡単なwebpackプロファイルは、ほとんどのフロントエンドのビジネスシーンを処理することができます.plugins、module.loaders、entry、outputを設定することにより、基本的にローカル開発と生産環境に対応したアプリケーションwebプロジェクトを構築することができます.以下、以上のプロファイルについて分析します.
3.webpackの配置ファイルの解読

module.loaders配列

[{ 
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
}]```
      require('index.jsx'), webpack          test            babel-loader     。 exclude    webpack    node_modules      

レシオオブジェクト

resolve:{
    alias:{ jquery:path.resolve(process.cwd(),'src/lib/jquery.js')},
    extensions:['.js','.json']
}
resolve    **webpack   *** *，      webpack       。
  alias           

require('jquery')==>require('/Users/**/src/lib/jquery.js')

plugins配列

/**               process.env  ， process.env         
{       
 'NODE_ENV': JSON.stringify('development')   
 }    console.log(process.env)==>console.log(({"NODE_ENV":'development'}))
    */    
plugins: [new DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('development')
            }
        })]

さらにwebpackの構成の意味は、私のgithubブログwebpackコンパイルの流れを参照してください.
4.webpackでよく使われるloadersとplugins
これについて、webpack公式は非常に詳細な解決策を提供しています.基本的に開発者を使わずにソースコミュニティを探しに行きます.フロントエンドのリソースloadersリスト*pluginsについては、webpackオフィシャルで推奨されているいくつかのpluginsの他に、コミュニティでも非常に多くの良いプラグインがあります.webpackに内蔵されているplugisリスト**は、複数の先端プロジェクトを通じて構築された実践の下で、以下のようないくつかのpluginsが非常に良いと思います.1、コードの最適化:

Commons ChunkPlugin-共通コードを抽出する

UglifyJs Plugin圧縮混淆コード2、依存注入の数:

DefinePlugin-自由変数注入

ProvidePlugin-モジュール変数ラベル注入3、ファイル抽出3:

file-loader-転送fontなどのファイル

Extract TextPlugin-cssファイルを抽出する4、開発体験の最適化:

WebpackNotifier Plugin-コンパイル完了動的通知

HtmlWebpackPlugin-テンプレートエンジン形式でhtmlファイルに注入し、よりeasury*5、ディレクトリ/ファイルコピーを開発させる:CopyWebpackPlugin-ディレクトリとファイルコピー

5.webpackまとめ
この文章のwebpackに対する解説は主にAPIに集中しています.