webpack4構成（a）の学習

WebPACKのは、 近代的なJavaScriptアプリケーションで静的パッカーモジュール（モジュールバンドラー）。WebPACKのアプリケーションを処理するとき、それは再帰的に構築する依存グラフ（依存関係グラフ）各モジュールがアプリケーション所望のが、これらのモジュールの全てが、1つまたはそれ以上の中に包装されている含み、 バンドル。

1. WebPACKのインストール

　　1.1プロジェクトNPMにする必要がINIT package.jsonを生成するために、それを初期化

1.2 NPMがインストールWebPACKのWebPACKの-CLI -D

2.webpack設定

WebPACKの一部を構成するためのwebpack.config.jsファイルのルートディレクトリに作成され、すべての設定項目はWebPACKの中で設定されます。srcディレクトリとディレクトリを作成します。srcディレクトリと、その後index.jsファイルとhtmlファイルを作成します。

index.htmlファイルにdivタグを書きます

<！DOCTYPE HTML> 
<HTML LANG = " EN " > 

<HEAD> 
    <メタ文字コード= " UTF-8 " > 
    <META NAME = " ビューポート"コンテンツ= " 幅=装置幅、初期の規模= 1.0 " > 
    <メタHTTP-当量= " X-UA-互換性のある"コンテンツ= " IE =エッジ" > 
    <タイトル>のWebPACK配置学习</ TITLE> 
</ HEAD> 

<BODY> 
    の<divのid = " ルート" > </ div>
</ BODY> 

</ HTML>

WebPACKの設定ディレクトリ

constのパス=必要（' パス' ） 
module.exportsはは= { 
    MODE：' 開発' 、
    エントリー：' ./src/index.js '  // エントリファイル
    出力：{ 
        // 終了 
        パス：path.resolve（__ dirnameは、" DIST 「）、// パッケージディレクトリには、生成された
         ファイル名を」index.js' // ファイル名のディレクトリの生成を、ファイルを単一のjsを使用します     } }

マルチパックの設定ファイルは、2つのJSファイルであれば

エントリ：{ 
        メイン：' ./src/index.js '、// エントリ・ファイル・ 
        サブ：' ./src/index.js ' 
    }、

今度は、ファイル名で出力を設定する必要があります

ファイル名：「[名前]は.jsファイル」 // ディレクトリのファイルのJSを複数生成するときに、パッケージ

2.1webpack設定画

私のsrcディレクトリに画像を準備し、index.jsに書きます

輸入アバターから ' ./item.png ' 

のvar IMG = 新しい画像（）

img.src = アバター

のvarルート=のdocument.getElementById（' ルート' ）

root.append（IMG）

WebPACKのモジュール構成（Module1の）、最初にインストールされて、糸が取り付けられた選択

糸追加URL-ローダー--save-devの

モジュール1：{ 
        ルール：[ 
            { 
                テスト： /\.(png|jpg|gif)$/ 、
                使用：{ 
                    ローダー：' URLローダ' 、
                    オプション：{ 
                        名：' [名] _ [ハッシュ] [EXT]。「// 画像名とハッシュ値 
                        OutputPathを：」ロイヤリティーフリー/ "、// パック絵の後に内部に保存されたディレクトリ 
                        の制限：10240 
                            // 画像サイズは、パッケージがカタログや写真を生成します、以上の10,240バイトあれば、設定された制限、サイズが設定以上でない場合、デフォルトは、JSに圧縮BASE64に包装されます
                     }
                }
            } 
        ] 
    }、

package.jsonの設定ファイルでは、各実行NPMの実行devがパッケージ化されます、あなたのルートディレクトリにdistディレクトリが生成されます。

" スクリプト" ：{
         " DEV "：" のWebPACK " 
    }、

CSSの2.2webapck（ SCSS ）プリプロセッサ

以下のプラグインをインストールしておく必要があります

糸は、CSS-ローダー--save-追加のdevの
ノード追加糸を -sass --save- devの
糸追加SASS -loader --save- devの
糸追加SCSS -loader --save- DEV 
糸をスタイルを追加 --save-devの-loader

webapckで書かれました

モジュール1：{ 
        ルール：[ 
            { 
                テスト： /\.scss$/ 、
                 // CSS-ローダ処理文書スタイル・ローダのCSS CSS-ローダラベルにマウントされたファイルヘッダを処理し、SASS-ローダSCSSをプリプロセッサにコンフィギュレーション、postcss・ローダー処理CSSプレフィックス
                を使用：[
                     ' スタイルローダー' 、
                    { 
                        ローダー：' CSS-ローダー' 、
                        オプション：{

　　　　　　　　　　　　　　　　モジュール：trueに、// モジュラーパッケージ、
　　　　　　　　　　　　　　　 importLoaders：2  // 各負荷を行い、SASSローダローダpostcssする 　　　　　　　　　　　　　　} 　　　　　　　　　　　　}、　　　　　　　　　　　　' SASSローダ' 、' postcssローダ'   ブラウザプレフィックス　　　　　　　　　　] 　　　　　　　　} 　　　　　　] 　　　　}、

あなたはモジュラープロセスをCSSにしたい場合は、設定する必要があります

オプション：{ 
　モジュール：trueに、// モジュラーパッケージ、 
　importLoaders：2  // 各負荷が実行されるとSASSローダローダpostcss   
}

SCSS、ディレクトリ内のファイルを作成し、いくつかの単純なCSSファイルを書き込みます

本体{ 
    .avatar { 
        幅：50％。
        国境：1pxの固体赤。
        変換：（100pxに、100pxに）変換します。
    } 
}

　書かれindex.jsファイル

輸入アバターから 「./item.png 」

「./createdAvatar.js' JSファイルからインポートcreatedAvatarが組み込ま



インポートスタイルから ' ./index.scss ' 
のvar IMG = 新しい画像（）

img.src = アバター

img.classList.add（style.avatar）

するvarルート=のdocument.getElementById（' ルート' ）

root.append（IMG）

createdAvatar（）//使用

、JSファイルを作成し、index.jsファイルを導入

'./item.png'からインポートアバター

機能createdAvatar（）{ 
    VARのIMG =新しいイメージ（）
    img.src =アバター。
    img.classList.add（ 'アバター'）
    VARルート=のdocument.getElementById（ 'ルート'）; 
    root.append（IMG）
} 

輸出デフォルトcreatedAvatar。

　　パッケージは、ブラウザで見ることができた後、スタイルがありません

上記のCSSで、私たちはCSS3を使用しますが、ブラウザが自動的に私にプレフィックスを追加しません、この時間は、我々は手動でいくつかを設定する必要があります。

安装
糸が追加postcss -loader --save-devの

Postcss.config.jsは、あなたのルートディレクトリにファイルを作成する必要があります

安装
糸追加autoprefixerの --save-devの

使用し、

= {module.exportsはの
    プラグイン：[ 
        （「autoprefixer」）を必要とする
    ] 
} 

//接頭辞で処理し、自動的に別のブラウザに問題がCSS

　　その後postcss-ローダーを使用して、あなたのCSSの設定は、パッケージを実行し、それが自動的に接頭辞一部のCSS3のブラウザのために、ブラウザで再び見ることができます

2.3webpack对字体进行处理

先行iconfont下载一些字体，放入自己的src目录里面，需要在index.js文件引入并使用

import './iconfont.scss'

var root = document.getElementById('root')
root.innerHTML = "<div class='iconfont iconchangjingguanli'></div>"

然后需要在webpack进行一些配置，首先安装一个插件

yarn add file-loader --save-dev

使用

module: {
        rules: [{
                test: /\.(eot|ttf|svg)$/,
                use: {
                    loader: 'file-loader'
                }
            }
        ]
    },

再次运行npm run dev打包之后，可以在浏览器看到我们的字体图标了

2.4webpack配置html打包文件处理

如果想每次打包之后，dist目录都会给我们生成一个html文件，这时候需要安装一个插件

yarn  add html-webpack-plugin --save-dev

然后在webapck.config.js文件中引入

const HtmlWebpackPlugin = require('html-webpack-plugin')

　使用 HtmlWebpackPlugin打包之后自动生成html文件，

plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ],

每次打包需要重新更新一下dist目录，删除里面的文件，重新生成一个新的，这时候需要安装另一个插件

yarn  add  clean-webpack-plugin --save-dev

　也是需要在webpack.config.js引入

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

　　使用和HtmlWebpackPlugin一样

plugins: [
        // HtmlWebpackPlugin打包之后自动生成html文件，
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        // CleanWebpackPlugin打包之前先自动清除dist目录里面所有的文件，
        new CleanWebpackPlugin()
    ],

2.5SourceMap配置，用于检测在代码打包之后，检测问题，定位到那个行

module.exports = {
    devtool: 'cheap-inline-source-map',
}

　　配置选项如下

　　//source-map 打包之后会生成map文件，性能比较慢，用于检测代码打包之后错误信息提示

    //eval 打包最快，不会生成.map文件，

    //inline-source-map 打包不会生成.map文件，在打包的js文件生成base64

    //如果是在development 开发环境  使用cheak-module-eval-source-map,不会生成.map文件，但是集成在打包之后main.js中eval中

    //cheap-inline-source-map 打包不会生成.map文件，在打包的js文件生成base64

    //如果是在production 线上环境 使用cheak-module-source-map,会打包生成.map文件

webpack配置插件特别多，需要慢慢的来，理解常用的场景配置就可以了。剩下的需要单独查阅资料就可以了解其中配置以及原理

おすすめ