1. 最初にノードをインストールします。cmd:node -v でノードがインストールされているかどうかを確認します。
node -v
2. インストールの回数を減らします: cnpm install -gless
cnpm install -g less
3.less が正常にインストールされているかどうかを確認します:lessc -v
lessc -v
4. インストールが成功したら、ワークスペースに xx.less ファイルを作成します。

5. コンソールでlessをコンパイルします。コマンド:lessc style.less style.css

lessc + コンパイルするファイル名 + CSSにコンパイルされるファイル名
lessc style.less style.css

2. ブラウザで直接使用することを減らす

親切なヒント

このメソッドはプロジェクトを実行するためにサーバーモードを使用する必要があります

フロントエンドで直接使用することは推奨されませんが、サーバー側では使用できます。

// 1.先安装一个服务器
cnpm install -g http-server
// 2.运行方式：在当前目录终端下执行
http-server
// Available on:
//  http://192.168.110.154:8080   
//  http://127.0.0.1:8080
// Hit CTRL-C to stop the server

プロジェクトに Less ファイルを導入し、Less js ファイルを解析します
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="./less.min.js" ></script>

3.less_variable

LESS では、 @記号を使用して変数を定義できます。変数の割り当てはコロン (:)を使用して行われます。

LESSでの変数宣言の形式は「@変数名:変数値」です。
@width: 1200px;
@height: 300px;


.container {
  width: @width;
  height: @height;
  background-color: #f1f1f1;
}
セレクターは変数を使用します

セレクター名は変数を使用して宣言することもできます
@my-selector: banner;


.@{my-selector} {
 font-weight: bold;
 line-height: 40px;
 margin: 0 auto;
}
URL アドレスは変数を使用します
@images: "../img";


body {
 color: #444;
 background: url("@{images}/hello.png");
}
変数は宣言の最初に使用できます
.container {
  width: @width;
  height: @height;
  background-color: #f1f1f1;
}


@width: 1200px;
@height: 300px;
変数としてのプロパティ

プロパティは、$prop 構文を使用して簡単に変数として扱うことができます。これによりコードが簡単になる場合があります
.widget {
  color: #efefef;
  background-color: $color;
  margin: 15px;
  padding: $margin;
  font-size: 30px;
  left:$font-size;
}

4.レスミックス

ミックスインを使用すると、あるクラスの属性を別のクラスで使用し、その属性としてクラス名を含めることができます。
.p1 {
  color: red;
}


.p2 {
  background: #64d9c0;
  .p1();
}


.p3 {
  background: #DAA520;
  .p1;
}
// p1后面的括号可以省略不写
混合括弧

ミックスインを作成したいが、そのミックスインを CSS に表示したくない場合は、ミックスイン定義の後にかっこを入れます。
.my-mixin {
  color: black;
}


.my-other-mixin() {
  background: white;
}


.class {
  .my-mixin();
  .my-other-mixin();
}
ミキシングに使用される!important

mixin 呼び出しの後に ! important キーワードを使用して、継承するすべてのプロパティを ! important としてマークします。
.foo (@bg: #f5f5f5; @color: #900) {
  background: @bg;
  color: @color;
}


.unimportant {
  .foo();
}


.important {
  .foo() !important;
}
パラメーターを使用したミキシング

ブレンドは、ブレンド時にセレクターブロックに渡される変数であるパラメーターも受け入れることができます。
.border-radius(@radius,@color:red) {
// 声明变量的后面加：属性值  ,代表默认的属性
  border-radius: @radius;
  color: @color
}
#header {
  .border-radius(4px,blue);
// 返回值就是4px blue
}
.button {
  .border-radius(6px);
// 返回值:6px red
}

5.less_nested

Less は、カスケードの代わりに、またはカスケードと組み合わせてネストを使用する機能を提供します。

<div class="header">
        <div class="nav">
            <ul>
                <li>
                    <a href="#">首页</a>
                </li>
            </ul>
        </div>
</div>



// 使用less嵌套
.header{
    width: 100%;
    height: 70px;
    background-color: #f1f1f1;
    .nav{
        width: 1200px;
        margin: 20px auto;
        ul{
            overflow: hidden;
            clear: both;
            li{
                float: left;
                a{
                    font-size: 16px;
                    color: #999;
                    letter-spacing: 2px;
                }
            }
        }
    }
}


// 编码后等同于css中的：如下
.header {
  width: 100%;
  height: 70px;
  background-color: #f1f1f1;
}
.header .nav {
  width: 1200px;
  margin: 20px auto;
}
.header .nav ul {
  overflow: hidden;
  clear: both;
}
.header .nav ul li {
  float: left;
}
.header .nav ul li a {
  font-size: 16px;
  color: #999;
  letter-spacing: 2px;
}

ミックスインで使用される疑似セレクター

この方法を使用して、ミックスインで疑似セレクターを使用することもできます。ミックスインとしてオーバーライドされます (& 現在のセレクターの親を表します)

<div class="header">
        <div class="nav">
            <ul>
                <li>
                    <a href="#">首页</a>
                </li>
            </ul>
        </div>
</div>



// 使用less嵌套

@width:1200px;

.header{
    width: 100%;
    height: 70px;
    background-color: #f1f1f1;
    .nav{
        width: @width;
        margin: 20px auto;
        ul{
            overflow: hidden;
            clear: both;
            li{
                float: left;
                &:hover{
                    background-color:green;
                 }
                a{
                    font-size: 16px;
                    color: #999;
                    letter-spacing: 2px;
                }
            }
        }
    }
}


// 编码后等同于css中的：如下
.header {
  width: 100%;
  height: 70px;
  background-color: #f1f1f1;
}
.header .nav {
  width: 1200px;
  margin: 20px auto;
}
.header .nav ul {
  overflow: hidden;
  clear: both;
}
.header .nav ul li {
  float: left;
}
.header .nav ul li:hover {
  background-color: aquamarine;
}
.header .nav ul li a {
  font-size: 16px;
  color: #999;
  letter-spacing: 2px;
}

6.Less_Operation

算術演算子 +、-、、*は、/ 任意の数値、色、変数を操作できます。可能であれば、算術演算子は加算、減算、比較する前に単位変換を実行します。計算結果は、左端のオペランドのユニットタイプに基づきます。単位変換が無効または無意味な場合、単位は無視されます。

注: 除算演算では、演算の内容を括弧内に入れる必要があります。
@size: 14px;
@widht:1000px;
@color:#333333;
@height:600px;

a{
    font-size: @size + 4;
    // 字体就成了18px
}

.nav{
    width: @widht - 200;
}

p{
    color: @color * 3;
}

.box{
    height: (@height / 2);
// 注意：除法的需要将运算的内容放到一个括号里
}
は次と同等です。
a {
  font-size: 18px;
}
.nav {
  width: 800px;
}
p {
  color: #999999;
}
.box {
  height: 300px;
}

7. レスエスケープ

エスケープを使用すると、任意の文字列をプロパティまたは変数値として使用できます。フォームの内容はすべて ~"anything" そのまま出力されます。~'anything'

メディアクエリをエスケープする練習をする
.box{
    background-color: #af3131;
}

@max768:~"screen and (max-width:768px)";
@min768:~"screen and (min-width:768px) and (max-width:992px)";
@min992:~"screen and (min-width:992px) ";

@media @max768 {
    .box1{
        .box;
    }
}
@media @min768 {
    .box2{
        background-color: blueviolet;
    }
}
@media @min992 {
    .box3{
        background-color: greenyellow;
    }
}
エスケープ後の効果は次のとおりです。
.box {
  background-color: #af3131;
}
@media screen and (max-width:768px) {
  .box1 {
    background-color: #af3131;
  }
}
@media screen and (min-width:768px) and (max-width:992px) {
  .box2 {
    background-color: blueviolet;
  }
}
@media screen and (min-width:992px)  {
  .box3 {
    background-color: greenyellow;
  }
}

8.less_function

Less には、色の変換、文字列の処理、算術演算などのためのさまざまな関数が組み込まれています。これらの関数については、Less 関数マニュアルで詳しく説明されています。

関数マニュアルアドレス： https: //lesscss.org/functions/
@width:0.6;



.box1{
    width: percentage(@width);// 转化成百分比：60%;
}

.box2{
    height: ceil(96.8px);//向上取整：97px;
}

.box3{
    width: floor(96.8px);// 向下取整：96px;
}

9.less_scope

Less のスコープは CSS のスコープと非常に似ています。まずローカルで変数とミックスインを探します。見つからない場合は、「親」レベルのスコープから継承します。

@width:200px;


.box{
    .nav{
        @width: 100px;
        ul{
            li{
                a{
                    width: @width;  // retutn 100px,
                }
            }
        }

    }
}



.box1{
    .nav{
        ul{
            li{
                width: @width;  // return 200px;只能往父级寻找，不能往子级寻找
                a{
                    @widht:100px;
                }
            }
        }
    }
}




.box2{
    .nav{
        ul{
            li{
                a{
                    width: @width;  // retutn 300px,懒加载，也可以解释成先引用后声明;
                }
                @width:300px;
            }
        }
    }
}

10.less_annotations とインポート

注記

ブロックコメントと行コメントの両方が使用可能
/* 一个块注释
 * style comment! 
*/
@var: red;


// 这一行被注释掉了！
@var: white;




/* 
注释块内容
*/
@col :red;


// 注释行内容
@wid:100px;
輸入

ファイルをインポートする .less と、このファイル内のすべての変数が使用可能になります。インポートしたファイルに .less 拡張子がある場合は、拡張子を省略できます
// style.less文件
@width:200px;
@height:50px;
@cor:green;


.box{
    width:@height;
    color: @cor;
}

// index.less文件
@import url("./style.less");// 引入的文件后缀名.less,后缀名可以省略


.box2{
    width: @width;
    height: 500px;
    color: @cor;
}

// index.less文件中引入 style.less文件 : @import url()
// 编译index.less文件后
.box {
  width: 50px;
  color: green;
}
.box2 {
  width: 200px;
  height: 500px;
  color: green;
}

2.サス

1.Sass環境のセットアップ

sass言語に基づいてRuby開発されているため、sassインストール前にRubyをインストールする必要があります。(注: Mac に Ruby が付属している場合は、Ruby をインストールする必要はありません。)

Rubyをインストールする

Ruby下ダウンロード地址：ダウンロードWindows に Ruby をインストールする簡単な方法これは、Ruby 言語、実行環境、重要な機能が含まれる自己完結型の Windows ベースのインストーラーです。https://rubyinstaller.org/downloads/

インストールが完了したら、CMD次のコマンドを実行して、インストールが成功したかどうかをテストする必要があります。

ruby -v
// ruby 3.1.2p20

ルビージェムズ

RubyGems は Nodejs の npm に似ています

RubyGems は中国では常にアクセスが非常に困難でしたので、そのソースを国内のものに置き換える必要があります。

// 删除替换原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/


// 打印是否替换成功
gem sources -l
// https://gems.ruby-china.com/

サスのインストール

Rubyと呼ばれるシステムが付属しておりRubyGems、Rubyそれをベースにしたソフトウェアをインストールするために使用されます。このシステムを使用すると、簡単にインストールできSass、Compass

// 安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass
// 检测是否安装成功
sass -v     // Ruby Sass 3.7.4
compass -v // Compass 1.0.3

2.コンパイル_sass

sasskoala コンパイルには、コマンドラインコンパイルモード、コンパイルソフトウェア、エンジニアリングツールwebpackなど、さまざまな方法があります。

Sassコードの作成

Sass ファイルのサフィックスは次のとおりです。.scss
.box {
  width: 300px;
  height: 400px;


   &-title {
    height: 30px;
    line-height: 30px;
   }
}
コマンドラインのコンパイル
sass style.scss style.css

3.sass_変数

変数を使用する

sass人々に利益をもたらす重要な機能は、css変数の導入です。繰り返し使用するcss属性値を変数として定義し、属性値を繰り返し記述することなく変数名で参照できます。また、一度しか使用しない属性値には、その属性値の用途が一目でわかるように、わかりやすい変数名を付けることができます。

sassシンボルを使用して変数を識別する $

$highlight-colorやなど$sidebar-width。なぜ$ シンボルを選ぶのでしょうか? cssこれは認識しやすく、より美しく、CSS では他の用途がないため、既存または将来の構文との競合を引き起こすことはありません。
$public-width:1226px;

.container{
    width: 100%;
}
.container .nav{
    width: $public-width;
    height: 50px;
    margin: 9px auto;
}

.computer{
    width: $public-width;
    height: 390px;
    background-color: #e9e966;
}
.phone{
    width: $public-width;
    height: 288px;
    background-color: #d6d;
}


// 编译后
.container {
  width: 100%; }

.container .nav {
  width: 1226px;
  height: 50px;
  margin: 9px auto; }

.computer {
  width: 1226px;
  height: 390px;
  background-color: #e9e966; }

.phone {
  width: 1226px;
  height: 288px;
  background-color: #d6d; }

/*# sourceMappingURL=style.css.map */
変数名はダッシュまたはアンダースコアで区切るべきですか?

sassの変数名は、cssアンダースコアやアンダースコアを含めて、のプロパティ名およびセレクター名と同じにすることができます。それはすべて個人の好みに依存します
$link-color: blue;


a {
 color: $link_color;
}

4.sass_nesting

cssセレクターを繰り返し書くのは非常に面倒です。ページの同じ部分を指すスタイルの長いリストを作成したい場合、多くの場合、同じスタイルを何度も記述する必要があります。ID
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
このような状況では、sass一度だけ書くことができ、スタイルを読みやすくすることができます。Sass では、ロシア人形のようにルールブロック内にルールブロックをネストできます。sassこれは、出力css中にこれらのネストされたルールを処理して、繰り返しの書き込みを避けるのに役立ちます。
#content {
 article {
  h1 { color: #333 }
  p { margin-bottom: 1.4em }
  }
 aside { background-color: #EEE }
}
ほとんどの場合、この単純なネストは問題ありませんが、ネストされたセレクター内で同様の：hover疑似クラスをすぐに適用したい場合など、場合によってはそうでない場合もあります。このような状況やその他の状況に対処するために、sass特別な構造が提供されています。 &
article a {
 color: blue;
  &:hover { color: red }
}
実際の戦闘は以下の通り。
$public_width:1200px;
$public_color:#666;
$public_background:greenyellow;


// 嵌套
.header{
    width: 100%;
    .nav{
        width: $public_width;
        height: 50px;
        background-color: $public_background;
        ul{
            overflow: hidden;
            clear: both;
            li{
                float: left;
                &:hover{
                    background-color: $public_background;
                }
                a{
                    color: $public_color;
                }
            }
        }
    }
}

// 编译后

.header {
  width: 100%;
}

.header .nav {
  width: 1200px;
  height: 50px;
  background-color: greenyellow;
}

.header .nav ul {
  overflow: hidden;
  clear: both;
}

.header .nav ul li {
  float: left;
}

.header .nav ul li:hover {
  background-color: greenyellow;
}

.header .nav ul li a {
  color: #666;
}

/*# sourceMappingURL=style.css.map */

5. Sassファイルをインポートする

css特に珍しい機能の 1 つは@import、あるcssファイルが他のファイルをインポートできるようにするルールですcss。ただし、その結果、@importブラウザはcss実行時にのみ他のファイルをダウンロードすることになり、ページの読み込みが非常に遅くなります。

sass@importルールもありますsassが、ルール@importがcssファイルの生成時に関連ファイルをインポートする点が異なります。これは、css追加のダウンロード要求を開始する必要がなく、関連するすべてのスタイルが同じファイルにグループ化されることを意味します。

使用するルールでは、インポートされたファイルの完全な名前を指定する必要はありませんsass。@import省略またはファイル接尾辞を指定できます.sass.scss

デフォルトの変数値

通常、変数を繰り返し宣言すると、最後の宣言のみが有効となり、前の値は上書きされます。
$link-color: blue;
$link-color: red;


a {
    color: $link-color; // red
}
!default 今回は変数値の優先度を最小にする機能です
$link-color: blue;
$link-color: red !default;


a {
    color: $link-color; // blue
}
ネストされたインポート

ネイティブとは異なりcss、コマンドはルール内で記述sassできます。@importcss
// aside.scss
aside {
 background: blue;
 color: white;
}

// style.scss
.blue-theme {
    width:300px;
    @import "aside.scss"
}


// 编译后

.blue-thems{
    width:300px;
    .aside {
         background: blue;
         color: white;
    }
}

6. サイレント注釈

cssコメントの機能には、スタイルを整理するのに役立つこと、将来コードを見たときになぜこのように記述するのかを理解できるようにすること、簡単なスタイルの指示を提供することが含まれます。ただし、サイトのソースコードを閲覧する人全員にすべてのコメントが表示されるようにする必要はありません。

sasscssさらに、標準のコメント形式とは異なるコメント構文/* ... */、つまり、生成されるファイルには内容が表示されないサイレントコメントが提供されますcss。サイレントコメントの構文は、JavaScript``Java同様の言語Cの単一行コメントの構文と同じで、行の終わりまでコメントの内容が続きます。 //
// style.sass
/*  会出现在css样式文件中  */

// 静默注释：不会出现在css样式中


// style.css
// 编译后
@charset "UTF-8";
/*  会出现在css样式文件中  */

/*# sourceMappingURL=style.css.map */
実際、css標準のコメント形式内のコメントの内容は/* ... */、生成されたファイルから消去することもできますcss。属性やセレクターなど、ネイティブにcss許可されていない場所にコメントが表示される場合、対応するファイル内の対応する場所にコメントを生成する方法がわからないため、これらのコメントは消去されます。csssasscss
// 这样写就不会出现在css样式中

body {
  color /* 这块注释内容不会出现在生成的css中 */: #333;
}
実際の戦闘は以下の通り。
/*  会出现在css样式文件中  */

// 静默注释：不会出现在css样式中

.header{
    background-color: greenyellow; /* 背景颜色*/
    color/* 字体颜色*/: #666;// 这样就不会出现在css样式中
    letter-spacing: 2px;// 字符间距
}
コンパイル後 --->
@charset "UTF-8";

/*  会出现在css样式文件中  */


.header {
    background-color: greenyellow;
    /* 背景颜色*/
    color: #666;
    letter-spacing: 2px;
}

/*# sourceMappingURL=style.css.map */

7.sass_mix

Web サイト全体で類似した小さなスタイル (一貫した色やフォントなど) がいくつかある場合は、変数を使用してこの状況を均一に処理することをお勧めします。しかし、スタイルがますます複雑になり、スタイルコードの大部分を再利用する必要がある場合、独立変数はこの状況に対処できません。sassミックスインを通じてスタイルの大部分を再利用できます
@mixin rounded-corners {
  border-radius: 5px;
}


.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
@mixin container {
    width: 100px;
    height: 50px;
    border: 1px solid #67e500;
    margin: 10px;
}


.root{
    padding-left: 20px;
    box-shadow: 0 5px 10px #e5e5e5;
    @include container;
}

// 编译后
.root {
  padding-left: 20px;
  box-shadow: 0 5px 10px #e5e5e5;
  width: 100px;
  height: 50px;
  border: 1px solid #67e500;
  margin: 10px; }

/*# sourceMappingURL=style.css.map */
混合パラメータ転送

ミキシングでは、必ずしも同じスタイルを生成する必要はありません。ミックスインが生成する正確なスタイルは、@include時にパラメーターをミックスインに渡すことによってカスタマイズできます。

さらに、パラメータのデフォルト値も指定できます。パラメータが渡されない場合は、デフォルト値を使用できます。
@mixin content ($width,$height,$color:rgb(248, 153, 11)) {
    width: $width;
    height: $height;
    background-color: cornflowerblue;
    color: $color;
}

.box{
    margin: 10px;
    @include content(100px,256px ,#aecded)
}

.box2{
    border: 1px solid #999;
    border-radius: 15px;
    @include content(145px,40px);// 颜色没有传值，会使用默认颜色
}

// 编译后

.box {
  margin: 10px;
  width: 100px;
  height: 256px;
  background-color: cornflowerblue;
  color: #aecded;
}

.box2 {
  border: 1px solid #999;
  border-radius: 15px;
  width: 145px;
  height: 40px;
  background-color: cornflowerblue;
  color: #f8990b;
}

/*# sourceMappingURL=style.css.map */

8. セレクターの継承を使用して CSS を合理化する

使用する場合sass、重複を減らすための最後の主要な機能はセレクターの継承です。セレクターの継承とは、セレクターが別のセレクターに定義されたすべてのスタイルを継承できることを意味します。これは構文によって@extend実現されます。

コードを減らす方法:

☛ 変数を定義します。

☛混ぜます。

☛ 継承。
.container{
    width: 1226px;
    height: 480px;
    box-shadow: 0 5px 10px #e5e5e5;
    margin-left: 27.7px;
}

.root{
    padding-bottom: 23px;
    @extend .container;
}

.box{
    float: left;
    text-align: center;
    @extend .container;
}

.login_pwd{
    padding: 2px;
    letter-spacing: 3px;
    @extend .container;
}

// 编译后

.container, .root, .box, .login_pwd {
  width: 1226px;
  height: 480px;
  box-shadow: 0 5px 10px #e5e5e5;
  margin-left: 27.7px; }

.root {
  padding-bottom: 23px; }

.box {
  float: left;
  text-align: center; }

.login_pwd {
  padding: 2px;
  letter-spacing: 3px; }

/*# sourceMappingURL=style.css.map */
継承の原則

一般に、継承を使用すると、アプリケーションがcss美しく整然としたものになります。継承では、プロパティcssの大部分ではなく、ビルド時にセレクターのみがコピーされるためですcss。

9. Sass_Operation

Sass は数値の加算、減算、乗算、除算 ( +, -, *, /) をサポートし、必要に応じて異なる単位間で値を変換します。

親切なヒント

計算プロセス中に、異なるユニットが計算に参加してはなりません。
$size:1000px;
.root{
  width: $size + 200px;
}
$size:1000px;
.root{
  width: $size - 200px;
}
$size:1000px;
.root{
  width: $size * 2;
}
$size:1000px;
.root{
  width: ($size / 2);
}
運用上の優先順位

括弧を使用して演算の順序に影響を与えることができます
$size:1000px;
.root{
  width: ($size - 400) * 2;
}
アプリケーションシナリオ

モバイル端末を適応させる場合、通常は REM 計算が行われます。

例: ルート font-sizeは 50px、設計者が指定した値はです。340rem
$fontREM:50;
.root{
  width:(340rem / $fontREM);
}

10.制御命令

Sass は、特定の条件が満たされた場合にスタイルを参照したり、出力形式を繰り返す範囲を設定したりするなど、いくつかの基本的な制御命令を提供します。制御命令は高度な機能であり、日常の文章ではあまり使用されません。

@もし

@if 式の戻り値が false or ではない場合 null 、条件は true であり、出力内 { } のコードは
p {
  @if 1+1==2 {
    border: 1px solid;
   }
  @if 5 < 3 {
    border: 2px dotted;
   }
  @if null {
    border: 3px double;
   }
}
// return border:1px solid;
@のために

@for 命令は限られた範囲内でその形式を繰り返し出力することができ、その都度出力結果を要件（変数の値）に応じて変更します。
@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2px * $i;
   }
}


// return

.item-1 {
  width: 2px; }

.item-2 {
  width: 4px; }

.item-3 {
  width: 6px; }

/*# sourceMappingURL=style.css.map */

3.ウェブパック

1. Webpack の概要

質問について考えてみましょう。フロントエンドプロジェクトがますます大きくなったとき、以前の考え方に従って開発を続けることができるでしょうか?

問題の核心: ファイル管理、ES6 コード変換、プロジェクトのパッケージ化...

ソリューション: フロントエンドエンジニアリング (Webpack)

フロントエンドエンジニアリング

エンタープライズレベルのフロントエンドプロジェクトの開発において、フロントエンド開発に必要なツール、テクノロジー、プロセス、エクスペリエンスを標準化します。

例えば：

壁の構築: 材料がすべて準備できていれば、とても簡単なので、一人で行うことができます。

建物を建てるには、たくさんの大型機械や人手が必要ですが、危険を回避するために作業を標準化することが最も重要です。

基本的に、webpack は最新の JavaScript アプリケーション用の静的モジュールバンドラーです。Webpack がアプリケーションを処理するとき、内部で 1 つ以上のエントリポイントから依存関係グラフを構築し、プロジェクトに必要なすべてのモジュールを 1 つ以上のバンドルに結合します。バンドルは、コンテンツをショーケースするための静的リソースです。

2. Webpack環境の構築

グローバルにインストールする webpack
// 先判断有没有安装node.js
node -v

npm install --save [email protected]
npm install --save [email protected]
ローカルプロジェクトフォルダーを作成します (コマンドを使用することも、コードエディターで作成することもできます)
mkdir webpack_demo
cd webpack_demo
初期化プロジェクト
npm init
プロジェクトの初期化コマンドを実行すると、以下が表示されます。 (設定する必要がない場合は、直接 Enter キーを押してスキップできます)

webpack ローカルにインストールする
npm install --save-dev [email protected]
npm install --save-dev [email protected]
使用webpack

プロジェクト構造の作成: webpack_demo のファイルパスの下に作成しsrc、public两个文件夹
// src/show.js
export function show(content) {
  window.document.getElementById('root').innerText = 'Hello,' + content;
}
// src/index.js
import { show } from './show.js'
show('iwen');
注文の実行:webpack

如果在终端执行webpack命令的时候出现以下情况：

Webpack-cli はグローバルにインストールする必要があります
// 安装全局webpack-cli
npm install webpack-cli -g
上記の状況が発生した場合、Webpack パッケージが成功したことを意味し、プロジェクトファイルパス: dist フォルダーの下に表示されます。

親切なヒント

webpack は自動的に src ディレクトリを検索し、次にindex.js エントリファイルを検索してパッケージ化し、最後にパッケージ化されたコンテンツとして dist ディレクトリを生成します。

でpublic作成されindex.html、自動生成されたmain.jsファイルをインポートします
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="../dist/main.js"></script>
</body>
</html>

3. Webpack は設定ファイルを追加します

webpack 設定ファイルを追加することができ、設定ファイルを取得した後は、それらをさらに操作できるようになります。

エントリ構成

プロジェクトのルートにwebpack.config.jsファイルを作成し、次のコードを入力します。
module.exports = {
 // JavaScript 执行入口文件
 entry: './src/index.js',
};
構成を終了する

ファイルに webpack.config.js エクスポート構成コードを追加します
const path = require("path");

module.exports = {
    // 配置入口文件
    entry:"./src/index.js",
    // 配置出口文件
    output:{
        // 把所有依赖的模块合并输出到一个bundle.js文件
        filename:"bundle.js",
        // 把输入的文件都放到dist目录下
        // path.resolve:合并路径
        path:path.resolve(__dirname,"./dist"),
    }
}
次に、コマンドを実行すると、デフォルトで実行され、設定ファイルに従って実行されます。webpackwebpack.config.js

4. Webpack でのローダーの使用

Webpack は JavaScript と JSON ファイルのみを理解できます。これは、すぐに使用できる Webpack の組み込み機能です。ローダーを使用すると、Webpack が他のタイプのファイル (CSS タイプのファイル、画像タイプなど) を処理し、使用できる有効なモジュールに変換できるようになります。

Webpack はすべてのファイルをモジュールとして扱います。CSS ファイルも例外ではないため、CSS をパッケージ化したい場合は、CSS をインストールする必要があります。

css-loader 和 style-loader

CSSファイルを追加する

index.js CSSファイルをファイルに導入します
import "../src/css/index.css"
設定変更

webpack.config.js 設定ファイルを変更する
const path = require("path");

module.exports = {
    module:{
        rules:[
            // 解析css文件
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
             }
          ]
      }
}
親切なヒント

style-loadercss-loader合計のシーケンスがあり、最初に書き込んでから次にstyle-loader書き込む必要があります。

css-loader

インストール css-loader
npm install --save-dev [email protected]
インストール style-loader
npm install --save-dev [email protected]

5. Loader_ を使用して Webpack で処理するファイルを少なくする

インストール
親切なヒント:

2 つのパッケージ (less とless-loader) をインストールする必要があります。
npm instal --save-dev [email protected] [email protected]
設定変更

webpack.config.js 設定ファイルを変更する
const path = require('path');


module.exports = {
  module: {
    rules: [
        // 解析less文件
       { 
        test: /\.less$/, 
        use: ['style-loader', 'css-loader', 'less-loader'] 
       }
     ]
   }
};
less プロジェクトにファイルを追加する
import "../src/css/style.less"

6. Loader_ を使用して Webpack で Sass ファイルを処理する

webpack で scss\sass ファイルタイプをパッケージ化したい

インストール
親切なヒント

sass と sass-loader の 2 つのパッケージをインストールする必要があります
npm instal --save-dev [email protected] [email protected]
設定変更

webpack.config.js 設定ファイルを変更する
module.exports = {
  module: {
    rules: [
        // 解析sass文件
       { 
        test: /\.(scss|sass)$/, 
        use: ['style-loader', 'css-loader', 'sass-loader'] 
       }
     ]
   }
};
scss プロジェクトにファイルを追加する
import "../src/css/style.scss"

7. Webpack_HTML プラグインでのプラグインの使用

html-webpack-plugin プロジェクトのルートディレクトリにコピーsrcをコピーするのに役立ちます。index.html

インストール
npm install [email protected] --save-dev
プラグインの設定
const HtmlPlugin = require('html-webpack-plugin')


module.exports = {
// 解析html文件
  plugins: [
    new HtmlPlugin({
      template: './src/index.html', // 指定源文件的存放路径
      filename: './index.html' // 指定生成的文件的存放路径
     })
   ]
};
親切なヒント

パッケージ化されたbundle.jsがindex.htmlの最後に自動的に配置されます。

8. Webpack は CSS ファイルを分離します

現在のパッケージ化ではJavaScriptとCSSを同時に1つのファイルにパッケージ化しているため、CSSが小さい場合はむしろ有利ですが、CSSが大きい場合は別ファイルとして抽出する必要があります。

次を使用してCSS を分離できます mini-css-extract-plugin

インストール
npm install --save-dev [email protected]
設定ファイルを変更する
const minicssextractPlugin = require("mini-css-extract-plugin")

module.exports = {
    module:{
        rules:[
            // 解析css文件
            {
                test:/\.css$/,
                use:[minicssextractPlugin.loader,'css-loader']
            },
            // 解析less文件
            {
                test:/\.less$/,
                use:[minicssextractPlugin.loader,"css-loader","less-loader"]
            },
            // 解析sass文件
            {
                test:/\.(sass|scss)$/,
                use:[minicssextractPlugin.loader,"css-loader","sass-loader"]
            }
        ]
    },
    
    plugins:[
        // 分离CSS文件
        new minicssextractPlugin({
            filename:"./css/index.css"
        })
    ]
}
親切なヒント

mini-css-extract-plugin 競合するため削除する必要がありますstyle-loaderstyle-loader

`9.`Webpack は CSS ファイルを圧縮します

分割された mini-css-extract-plugin CSS ファイルは圧縮されていないため、個別に圧縮する必要があるのですが、どうすればよいですか?

インストール

optimize-css-assets-webpack-plugin CSS ファイルを圧縮する方法

npm/cnpm install --save-dev [email protected]
// 我刚开始使用npm安装，报错了，但是使用cnpm就没事

設定ファイルを変更する

const minicssextractPlugin = require("mini-css-extract-plugin")
const optimizecssassetswebpackPlugin = require("optimize-css-assets-webpack-plugin")

module.exports = {
    module:{
        rules:[
            // 解析css文件
            {
                test:/\.css$/,
                use:[minicssextractPlugin.loader,'css-loader']
            },
            // 解析less文件
            {
                test:/\.less$/,
                use:[minicssextractPlugin.loader,"css-loader","less-loader"]
            },
            // 解析sass文件
            {
                test:/\.(sass|scss)$/,
                use:[minicssextractPlugin.loader,"css-loader","sass-loader"]
            }
        ]
    },
    
    plugins:[
        // 分离CSS文件
        new minicssextractPlugin({
            filename:"./css/index.css"
        }),
        // 压缩CSS文件
        new optimizecssassetswebpackPlugin()
    ]
}

10.Webpack での Babel の設定

この時点で、多くの友人が問題を発見するかもしれませんが、今作成した ES6 コードはなぜ正常に実行されるのでしょうか?

これは、現在 Chrome デフォルトでサポートされているブラウザを使用しているためですが、一部のブラウザがサポートしていない場合はどうなるでしょうか。

を使用してコンパイルする必要があります babel

インストール
npm install --save-dev @babel/[email protected]
npm install --save-dev @babel/[email protected]
npm install --save-dev [email protected]
設定ファイル「babel.config.js」を追加

プロジェクトのルートディレクトリに追加された設定ファイル babel.config.js
// babel.config.js
module.exports = {
  presets: ['@babel/preset-env']
}
設定ファイルを変更する
module: {
    rules: [
        // 使用babel将ES6语法转化成ES5语法
       {
        test:/\.js$/,
        use:['babel-loader']
       },
     ]
}

11.Webpackのモード

対応するモードの組み込みの最適化を使用するように webpack に指示するmode 構成オプションを提供します。
'none'| 'development' | 'production'
オプション 説明する

発達に値を設定します。 DefinePlugin モジュールとチャンクの有効な名前を有効にします。process.env.NODE_ENVdevelopment

生産 DefinePlugin に process.env.NODE_ENV 値を設定します production。モジュールとチャンク、FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitOnErrorsPlugin およびの決定的な難読化された名前を有効にしますTerserPlugin 。

なしデフォルトの最適化オプションを使用しないでください

モードを実装するには 2 つの方法があります。

最初: 構成オブジェクトにmode オプションを指定するだけです
module.exports = {
 mode: 'development',
};
2 番目のタイプ: CLI パラメーターから渡されます (つまり、端末に入力されたコマンドでモードを指定します)。

webpack --mode=開発

オプション	説明する
発達	に値を設定します。 `DefinePlugin` モジュールとチャンクの有効な名前を有効にします。`process.env.NODE_ENVdevelopment`
生産	`DefinePlugin` に `process.env.NODE_ENV` 値を設定します `production`。モジュールとチャンク、`FlagDependencyUsagePlugin`、`FlagIncludedChunksPlugin`、`ModuleConcatenationPlugin`、`NoEmitOnErrorsPlugin` およびの決定的な難読化された名前を有効にします`TerserPlugin` 。
なし	デフォルトの最適化オプションを使用しないでください

12.Webpack での DevServer の使用

ここまでは webpack 基本的に普通に使えますが、実際の開発では以下が必要になる場合があります。

ローカルファイルプレビューを使用する代わりに HTTP サービスを提供します。

ファイルの変更を監視し、Web ページを自動的に更新してリアルタイムプレビューを実現します。

デバッグを容易にするソースマップをサポートします。

Webpack がこれらすべてを処理します。Webpack は上記のポイント 2 と 3 をネイティブでサポートしており、公式に提供されている開発ツール DevServer と組み合わせることでポイント 1 も簡単に実現できます。DevServer は、HTTP サーバーを起動して Web ページ要求を処理し、Webpack の起動、Webpack によって送信されたファイル変更信号の受信、および WebSocket プロトコルを介して Web ページを自動的に更新してリアルタイムプレビューを実現します。

サーバーの依存関係をインストールする
npm install -g [email protected]
npm install --save-dev [email protected]
// 使用npm安装报错，改成cnpm就好了
設定ファイルを変更する
const path = require('path');


module.exports = {
  devServer: {
    // 服务器打开目录
    static: path.join(__dirname, 'public'),
    // 开启压缩
    compress: true,
    // 设置端口
    port: 9000,
    // 热更新
    hot: true,
    // 自动打开浏览器
    open: true,
    //使用 History 路由模式时，若404错误时被替代为 index.html
    historyApiFallback: true
   }
};
const path = require("path");
const htmlPlugin = require("html-webpack-plugin")
const minicssextractPlugin = require("mini-css-extract-plugin")
const optimizecssassetswebpackPlugin = require("optimize-css-assets-webpack-plugin")

module.exports = {
    // 开发模式：development    生产模式：production
    // mode:"development",
    // 配置入口文件
    entry:"./src/index.js",
    // 配置出口文件
    output:{
        // 把所有依赖的模块合并输出到一个bundle.js文件
        filename:"bundle.js",
        // 把输入的文件都放到dist目录下
        // path.resolve:合并路径
        path:path.resolve(__dirname,"./dist"),
    },
    module:{
        rules:[
            // 解析css文件
            {
                test:/\.css$/,
                use:[minicssextractPlugin.loader,'css-loader']
            },
            // 解析less文件
            {
                test:/\.less$/,
                use:[minicssextractPlugin.loader,"css-loader","less-loader"]
            },
            // 解析sass文件
            {
                test:/\.(sass|scss)$/,
                use:[minicssextractPlugin.loader,"css-loader","sass-loader"]
            },
            // 使用babel将ES6语法转化成ES5语法
            {
                test:/\.js$/,
                use:["babel-loader"]
            }
        ]
    },
    
    plugins:[
        // 解析HTML文件
        new htmlPlugin({
            template:"./public/index.html",// 指定html文件存放路径
            filename:"./index.html"// 指定生成文件存放的路径
        }),
        // 分离CSS文件
        new minicssextractPlugin({
            filename:"./css/index.css"
        }),
        // 压缩CSS文件
        new optimizecssassetswebpackPlugin()
    ],

    devServer:{
        // 服务器打开目录
        static:path.join(__dirname,"public"),
        // 压缩
        compress:true,
        // 端口
        port:9000,
        // 实时更新
        hot:true,
        // 自动打开浏览器
        open:true,
        // 使用history路由模式，若404报错时被代替为index.html
        historyApiFallback:true
    }
}
サーバーの動作方法

webpack serve

webpack-dev-server

親切なヒント

構成ファイルが変更されると、ホットアップデートは不可能になり、サーバーを再起動する必要があります。ホットアップデートは、残りのコードにのみ適用されます。 src

13. クイック実行プランを構成する

クイック実行スキームを構成すると、実行方法を統一しやすくなります。そうでない場合は、webpack、などのキーワードをさらに覚える必要があります。webpack servewebpack-dev-server

修正

で設定しますpackage.json 。scripts
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"webpack --mode=production",
    "dev":"webpack-dev-server --mode=development"
  },
親切なヒント

package.json ファイル内に見つからない場合は、scripts 次のコマンドを実行してファイルnpm init を再生成できます。package.json

動作モード
npm start  // 相当于运行webpack
npm run dev // 相当于运行webpack serve

14. 開発モードと本番モードの分離

開発プロセスでは、通常、開発環境を次のように区別します。

開発環境
テスト環境
本番環境
...

開発モード

開発モードは、開発者にとって開発をより便利にするために存在します。開発モードでは、通常、デバッグがより便利になるため、エラーメッセージが非常に包括的になり、ホットアップデートステータスなどが表示されます。

本番モード

実稼働モードは、プロジェクトのパッケージ化とオンライン起動のために存在します。実稼働モードでは、パッケージをできるだけ小さくするために、より多くのエラープロンプトが削除されます。

`webpack` 開発モードと運用モードを構成する

では webpack 、開発モードと運用モードを区別できます。たとえば、次のような違いがmode あります。developmentproduction

依存関係をインストールします。

webpack-merge 複数の構成ファイルをマージするために使用できます。

npm install --save-dev [email protected]
// npm安装报错，使用cnpm不报错

開発および運用スキーマファイルを作成する

プロジェクトのルートディレクトリにファイルを作成します webpack.dev.config.js webpack.prod.config.js


// webpack.dev.config.js   开发环境
const path = require("path")
const {merge} = require("webpack-merge")
const webpackConfig = require("./webpack.config")


const devConfig = {
    mode:"production",
    devServer:{
        // 服务器打开目录
        static:path.join(__dirname,"public"),
        // 压缩
        compress:true,
        // 端口
        port:9000,
        // 实时更新
        hot:true,
        // 自动打开浏览器
        open:true,
        // 使用history路由模式，若404报错时被代替为index.html
        historyApiFallback:true
    }
}

module.exports = merge(webpackConfig,devConfig)



// webpack.prod.config.js  生产环境
const {merge} = require("webpack-merge")
const webpackConfig = require("./webpack.config")



const prodConfig = {
    mode:"production"
}

module.exports = merge(webpackConfig,prodConfig)

// webpack.config.js

const path = require("path");
const htmlPlugin = require("html-webpack-plugin")
const minicssextractPlugin = require("mini-css-extract-plugin")
const optimizecssassetswebpackPlugin = require("optimize-css-assets-webpack-plugin")

const webpackConfig = {
    // 开发模式：development    生产模式：production
    // mode:"development",
    // 配置入口文件
    entry:"./src/index.js",
    // 配置出口文件
    output:{
        // 把所有依赖的模块合并输出到一个bundle.js文件
        filename:"bundle.js",
        // 把输入的文件都放到dist目录下
        // path.resolve:合并路径
        path:path.resolve(__dirname,"./dist"),
    },
    module:{
        rules:[
            // 解析css文件
            {
                test:/\.css$/,
                use:[minicssextractPlugin.loader,'css-loader']
            },
            // 解析less文件
            {
                test:/\.less$/,
                use:[minicssextractPlugin.loader,"css-loader","less-loader"]
            },
            // 解析sass文件
            {
                test:/\.(sass|scss)$/,
                use:[minicssextractPlugin.loader,"css-loader","sass-loader"]
            },
            // 使用babel将ES6语法转化成ES5语法
            {
                test:/\.js$/,
                use:["babel-loader"]
            }
        ]
    },
    
    plugins:[
        // 解析HTML文件
        new htmlPlugin({
            template:"./public/index.html",// 指定html文件存放路径
            filename:"./index.html"// 指定生成文件存放的路径
        }),
        // 分离CSS文件
        new minicssextractPlugin({
            filename:"./css/index.css"
        }),
        // 压缩CSS文件
        new optimizecssassetswebpackPlugin()
    ],

    devServer:{
        // 服务器打开目录
        static:path.join(__dirname,"public"),
        // 压缩
        compress:true,
        // 端口
        port:9000,
        // 实时更新
        hot:true,
        // 自动打开浏览器
        open:true,
        // 使用history路由模式，若404报错时被代替为index.html
        historyApiFallback:true
    }
}

module.exports = webpackConfig;

実行モードを再構成します: (package.json ファイル内)

"scripts": {
  "start": "webpack --config webpack.prod.config.js",
  "dev": "webpack-dev-server --config webpack.dev.config.js"
}

15. Webpack の Devtool はデバッグプロセスを強化します

devtool 拡張デバッグプロセスをセットアップするには、次のようにします。

設定によりdevtool: "source-map"

ソースマップ

ソースマップは、コード圧縮前後の位置情報を格納した情報ファイルです。

つまり、デバッグ中に、圧縮されたコードではなく、元のコードの位置情報を直接表示できるため、後のデバッグが大幅に容易になります。

開発環境でデフォルトで生成されるソースマップには、生成されたコードの場所が記録されます。これにより、実行時エラーの行数がソースコードの行数と一致しないという問題が発生します。

解決策:次の設定をwebpack.dev.config.jsに追加して、実行時のエラー行数がソースコードの行数と一致するようにします。
// webpack.dev.config.js   开发环境
const path = require("path")
const {merge} = require("webpack-merge")
const webpackConfig = require("./webpack.config")


const devConfig = {
    // 开发模式
    mode:"development",
    //此选项生成的 Source Map 能保证运行时的报错行数与源代码的行数保持一致
    devtool:"source-map",
    devServer:{
        // 服务器打开目录
        static:path.join(__dirname,"public"),
        // 压缩
        compress:true,
        // 端口
        port:9000,
        // 实时更新
        hot:true,
        // 自动打开浏览器
        open:true,
        // 使用history路由模式，若404报错时被代替为index.html
        historyApiFallback:true
    }
}

module.exports = merge(webpackConfig,devConfig)
// webpack.prod.config.js  生产环境
const {merge} = require("webpack-merge")
const webpackConfig = require("./webpack.config")



const prodConfig = {
    // 生产模式
    mode:"production",
    // 隐藏错误，不进行提示
    devtool:"hidden-nosources-source-map"
}

module.exports = merge(webpackConfig,prodConfig)
ソースマップのベストプラクティス

開発モード中

devtool の値をに直接設定することをお勧めしますsource-map。これにより、特定のエラー行を直接見つけることができます。

本番環境では

ソースコードの漏洩を防ぎ、Web サイトのセキュリティを向上させるために、ソースマップをオフにするか、devtool を設定することをお勧めします hidden-nosources-source-map。

16. .browserslistrcファイルの説明

browserslistrc ファイルは、現在のプロジェクトのブラウザ互換性を示します。

使用方法は 3 つあります。

package.jsonに設定

別の設定ファイルとして設定

一部のプラグインではブラウザリストのリセットが必要です

Vue プロジェクトの環境設定を参照し、2 番目の方法を選択し、独立した設定ファイルとして設定します。

プロジェクトのルートディレクトリに .browserslistrc ファイルを作成します
> 1%  // 兼容市场上占有率超过1%的浏览器(世界级)
last 2 versions // 兼容浏览器最近的两个版本
not dead // 不支持24个月内没有官方支持或者更新的浏览器
not ie 11 // 不支持ie 11

17.postcss-loader は CSS 互換性を処理します

postcss は、 CSS の互換性の問題を処理できるJavaScript 変換スタイル用のツールです。私たちが作成する CSS コードに互換性のあるプレフィックスを追加できるのはこのツールです

cnpm install --save-dev [email protected]
cnpm install --save-dev [email protected]
cnpm isntall --save-dev [email protected]
cnpm install --save-dev [email protected]

プロジェクトのルートディレクトリに postcss.config.js ファイルを作成します

// postcss.config.js
module.exports = {
  plugins: {
    "autoprefixer":{
      "overrideBrowserslist":[
        // 兼容IE7以上浏览器
        "ie >= 8",
        // 兼容火狐版本号大于3.5浏览器
        "Firefox >= 3.5",
        // 兼容谷歌版本号大于35浏览器,
        "chrome  >= 35"
       ]
     }
   }
}

ファイルを変更する webpack.config.js

rules: [
   {
    test: /\.css$/,
    use:[MiniCssExtractPlugin.loader ,"css-loader","postcss-loader"]
   },
   {
    test: /\.less$/,
    use:[MiniCssExtractPlugin.loader ,"css-loader","postcss-loader","less-loader"]
   },
   {
    test: /\.(scss|sass)$/,
    use:[MiniCssExtractPlugin.loader ,"css-loader","postcss-loader","sass-loader"]
   }
]

#root{
    color: greenyellow;
    display: flex;
}

次のように：

エラーが報告されました

プロジェクトが実行されているルートディレクトリのターミナルでcnpm installを実行します。

次に、実行中のプロジェクトのルートディレクトリで開発環境を再起動します: npm run dev can run

18. Webpack による React 環境の構築

現在、最も一般的に使用されている 2 つのフロントエンドフレームワークである React と Vue は、Webpack を使用してプロジェクトを構築しています

次に、その環境を使用して webpack React プロジェクトを構築します

インストール
cnpm install -D @babel/[email protected]
cnpm install -S [email protected]
cnpm install -S [email protected]
設定ファイルの追加

Reactで使用される文法は文法なので、解析モジュールjsxを設定する必要がありますjsx
// 解析react文件
{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  loader: 'babel-loader'
}
同時にファイルを変更する必要がありますbabel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    "@babel/preset-react"
   ]
}
React コードを書く
import React from 'react'
import ReactDom from 'react-dom'


class App extends React.Component {
  render(){
    return (
      <div style={
    
    {color:"#333"}}>
         Hello
      </div>
     )
   }
}
ReactDom.render(<App/>,document.getElementById("root"))
最後に、開発環境を実行します ( npm run dev )。反応プロジェクトの環境が構成されます。

19. Webpack による Vue 環境の構築

現在、最も一般的に使用されている 2 つのフロントエンドフレームワークである React と Vue は、Webpack を使用してプロジェクトを構築しています

次に、次を使用してwebpack Vue プロジェクト環境を構築します。

インストール

Vue 固有のファイルに関しては.vue、それらを解析するためのパッケージのヘルプが必要です。
cnpm install --save [email protected] 
cnpm install --save-dev [email protected] 
cnpm install --save-dev [email protected]
cnpm install --save-dev [email protected] 
cnpm install --save-dev [email protected]
設定ファイルの追加

ファイル内 webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')


const baseConf = {
  module:{
       {
      test: /\.vue$/,
      use: ['vue-loader']
        }
    },
  plugins:[
    new VueLoaderPlugin()
   ]
}
Vue コードの記述
// index.js
import { createApp } from 'vue'
import App from './App.vue'


createApp(App).mount('#root')
// App.vue
<template>
 <p>Vue文件环境测试</p>
</template>


<script>
export default {
 
}
</script>


<style>
p{
 color: red;
}
</style>

20.Webpack画像処理

Webpack ではすべてがモジュールであり、画像も例外ではなく、個別に扱う必要があります。

インストール

画像処理は次のように行われます。 url-loader file-loader
cnpm install --save-dev [email protected]

cnpm install --save-dev [email protected]
設定の追加 ( webpack.config.js )
{
  test: /\.(png|svg|jpe?g|gif)$/i,
    use: {
      loader:"url-loader",
        options:{
          // 阈值，小于20 * 1024kb，进行base64转码
           limit:20 * 1024,
          // img/存放路径 [name]:图片名字 [hash:8]:hash8位 [ext]:后缀
             name:"img/[name].[hash:8].[ext]"
         }
     }
}
次に、src ディレクトリ内のファイルに画像を追加します。

この時点で、20 * 1024 kb の効果を持つ画像を追加してテストできます。

親切なヒント

画像が 20*1024kb より大きい場合は、インストールする必要があります file-loader
npm install --save-dev [email protected]
dist/img/ 20 * 1024kb を超えるファイルをインポートし、ディレクトリに直接コピーするために追加の操作を行う必要はなくなりました。

特記事項

こちらもフォントアイコンが識別可能で、これもWebpack5版の利点で、一括処理されます。

21.Webpack のプロキシ(実際にはクロスドメインの問題)

ネットワーク要求を行う場合、フロントエンドで最も一般的な問題はクロスドメインですが、これはフロントエンドとバックエンドでそれぞれ処理できます。

フロントエンド

JSONP (サーバー側のサポートが必要)

プロキシプロキシ (開発モード)

後部

コルス

ネットワークリクエストスキームをインストールする
cnpm install --save-dev [email protected]
構成の追加

構成の追加webpack.dev.config.js
devServer:{
  proxy: {
    //定义一个标记，如以后api开头的请求都走代理的设置
    '/api': {
      // 要请求的真实服务端基地址 相当于被/api替代了
      target: 'http://iwenwiki.com',
      //把api重写为空，因为别人没有 /api
      pathRewrite: { 
        "^/api": "" 
       },
      //发送请求头中host会设置成target
      changeOrigin: true
     }
   }
}
// App.vue
<template>
 <p>Vue文件环境测试</p>
 <img src="./assets/1.jpg" alt="">
</template>


<script>
import axios from "axios"


export default {
 mounted(){
    axios.get("/api/api/FingerUnion/list.php").then(res =>{
        console.log(res.data);
    })
 }
}
</script>


<style>
p{
 color: red;
}
</style>
このようにして、情報を取得し、クロスドメインの問題を解決することができます。

22. dist を自動的にクリーンアップする

パッケージ化およびリリースされるたびにdist ディレクトリ内のファイルを自動的にクリーンアップするため(古いファイルが保持されるのを防ぐため)

プラグインのインストールが可能clean-webpack-plugin

インストール
cnpm install --save-dev [email protected]
プラグインの設定
// webpack.prod.config.js
const commonConfig = require("./webpack.config");
const { merge } = require("webpack-merge");
const { CleanWebpackPlugin } = require('clean-webpack-plugin')


const cleanPlugin = new CleanWebpackPlugin()


const prodConfig = {
  mode: 'production',
  devtool: 'nosources-source-map',
  plugins: [cleanPlugin]
}


module.exports = merge(commonConfig, prodConfig)

23.Webpackの最適化

devtool これまで、Webpack では、開発環境と実稼働環境の分離、CSS コードの分離と圧縮、開発環境と実稼働環境のデバッグの追加と最適化など、Webpack 最適化のための多くの操作が行われてきました。

次に、いくつかの最適化ソリューションを紹介します。

文書処理領域の指定

ファイルサイズを確認し、大きすぎる場合は対処してください。

文書処理領域の指定

プロジェクト内、特にフォルダー内には多数の js ファイルがありますnode_modulesが、対処する必要があるのはsrcディレクトリ内のjs ファイルです。

したがって、エリアを指定する必要があります
 {
   test: /\.js$/,
   use: ['babel-loader'],
   // 包含只处理 src 目录下的文件
   include: path.resolve(__dirname, 'src'),
 }
ファイルサイズを確認し、大きすぎる場合は対処してください。

webpack-bundle-analyzer これはパッケージ化分析アーティファクトであり、インターフェイスも明確で、パッケージ化された各ファイルのサイズとそれぞれの依存関係を直感的に示すことができ、プロジェクトをより便利に分析するのに役立ちます。

インストール：
cnpm install --save-dev webpack-bundle-analyzer
構成を追加します。
// webpack.dev.config.js  开发环境


const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');


module.exports = {
 plugins: [
  new BundleAnalyzerPlugin({
   analyzerPort: 8888, // 指定端口号
   openAnalyzer: false,
   })
  ]
}

24. JavaScript でのコード検査

フロントエンドチームにとって非常に重要なのはコードの仕様であり、コードの仕様があって初めてコードの品質を確保することができます。

一般的なフロントエンドコード仕様ツール:

JSLint

JSHint

ESLint

もちろん、最初にここで推奨し ESLint 、その後の Webpack にも統合します。 ESLint

JSLint

利点: 構成は経験豊富な専門家によって決定されており、箱から出してすぐに使用できます。

欠点:

構成オプションが限られており、多くのルールを無効にできません

規定は厳しく、ベテランが良いと考えるスタイルに従わない者には警告が与えられる。

スケーラビリティが低い

エラーに基づいて対応するルールが見つかりません

JSHint

アドバンテージ：

設定できるパラメータはたくさんあります

使いやすい設定ファイルをサポート

いくつかの一般的なクラスライブラリをサポート

基本的なサポートES6

欠点:

カスタムルールはサポートされていません

エラーに基づいて対応するルールが見つかりません

ESLint

アドバンテージ：

デフォルトのルールにはJSLintとのJSHintルールが含まれており、これらは簡単に移行できます

警告2 つのレベルに設定することも错误、直接無効にすることもできます

プラグイン拡張機能のサポート

ルールはカスタマイズ可能

対応するルールはエラーに基づいて見つけることができます

サポートES6

唯一サポートされているJSXツール

欠点:

いくつかのカスタム構成が必要です (柔軟性が高すぎるためですが、ドキュメントは非常に詳細です)。

遅い (他の 2 つよりも遅い)

25.Webpack での ESLint の設定

チームのコーディング習慣を統一および標準化し、コードエラーのリスクを軽減するために、eslint はフロントエンドプロジェクトにとって不可欠なツールとなっています。

簡単に言うと、コードを書くには特定の規範に従う必要があります。どのような規範を自分で定義できるかについては、

ESLint公式サイト

JavaScript コードの問題を見つけて修正する - ESLint - Pluggable JavaScript Linter JavaScript のパターンを識別してレポートするための、プラグ可能で構成可能なリンターツール。コードの品質を簡単に維持します。https://eslint.org/

依存関係をインストールする
cnpm install [email protected] [email protected] --save-dev
webpack 設定ファイル ( webpack.dev.config.js )
// webpack.dev.config.js 文件中
const ESLintPlugin = require('eslint-webpack-plugin');


module.exports = {
 plugins: [new ESLintPlugin()],
};
ルートディレクトリに新しい.eslintrc.jsファイルを追加します
module.exports = {
  env: {
    node: true,
    browser: true,
    es6: true,
   },
  // 支持ES6并不代表支持所有ES6新语法， 设置为 "module" 支持 ECMAScript 模块
  parserOptions: {
    sourceType: 'module'
   },
  rules: {
    // JS文件中不支持console.log()
    'no-console': 2
   },
};
ESLint の共通仕様

"no-alert": 0, //アラート確認プロンプトの使用を無効にします

"no-array-constructor": 2,//配列コンストラクターの使用を無効にする

"no-bitwise": 0, //ビットごとの演算子の使用を無効にする

"no-caller": 1, //arguments.caller または argument.callee の使用を無効にします

"no-catch-shadow": 2,//外部スコープ変数と同じ名前の catch 句パラメータを禁止します

"no-class-assign": 2, //クラスへの代入は禁止されています

"no-cond-assign": 2,//条件式での代入文の使用を禁止します

"no-console": 2,//コンソールの使用を無効にします

"no-const-assign": 2,//const で宣言された変数の変更は禁止されています

"no-constant-condition": 2,//条件での定数式の使用を禁止します if(true) if(1)

"no-Continue": 0,//Continue の使用は禁止されています

"no-control-regex": 2,//正規表現での制御文字の使用を禁止します

"no-debugger": 2,//デバッガーの使用を無効にします

"no-delete-var": 2,//var で宣言された変数には delete 演算子を使用できません

"no-div-regex": 1,//除算のような正規表現は使用できません /=foo/

"no-dupe-keys": 2,//オブジェクトリテラルの作成時に重複キー {a:1,a:1} を許可しません

"no-dupe-args": 2,//関数パラメータを繰り返すことはできません

"no-duplicate-case": 2, //スイッチ内の case ラベルを繰り返すことはできません

"no-else-return": 2,//if ステートメントに return がある場合、その後に else ステートメントを続けることはできません。

"no-empty": 2, //ブロックステートメントの内容を空にすることはできません

"no-empty-character-class": 2, //正規表現の [] の内容を空にすることはできません

"no-empty-label": 2, //空のラベルの使用を無効にする

"no-eq-null": 2,//null に == または != 演算子を使用することは禁止されています

"no-eval": 1,//eval の使用を無効にする

"no-ex-assign": 2,//catch ステートメント内の例外パラメータに値を代入することは禁止されています

"no-extend-native": 2,//ネイティブオブジェクトの拡張を禁止します

"no-extra-bind": 2, //不要な関数バインドを無効にする

"no-extra-boolean-cast": 2,//不必要な bool 変換を無効にする

"no-extra-parens": 2,//不要な括弧を禁止します

"no-extra-semi": 2,//余分なコロンを禁止します

"no-fallthrough": 1, //スイッチの侵入を無効にする

"no-floating-decim": 2,//浮動小数点数の 0 .5 3 を省略することは禁止されています。

"no-func-assign": 2, //重複した関数宣言を無効にする

"no-implicit-coercion": 1, //暗黙的な変換を無効にする

"no-implied-eval": 2, // 暗黙的な評価を無効にする

"no-inline-comments": 0, //インラインコメントは禁止されています

"no-inner-declarations": [2, "functions"], // ブロックステートメントでの宣言 (変数または関数) の使用を禁止します。

"no-invalid-regexp": 2,//無効な正規表現を無効にする

"no-invalid-this": 2, //無効な this は禁止されており、コンストラクター、クラス、オブジェクトリテラルでのみ使用できます

"no-irregular-whitespace": 2,//不規則なスペースは使用できません

"no-iterator": 2,//イテレータ 属性の使用は禁止されています

"no-label-var": 2, //ラベル名は、var で宣言された変数名と同じであってはなりません

"no-labels": 2, // ラベル宣言を禁止します

"no-lone-blocks": 2,//不要なネストされたブロックを無効にする

"no-lonely-if": 2,//else ステートメント内の if ステートメントのみを禁止します

"no-loop-func": 1,//ループ内で関数を使用することは禁止されています (外部変数が参照されず、クロージャが形成されない場合)

"no-mixed-requires": [0, false], //宣言時に宣言型を混合することはできません

"no-mixed-spaces-and-tabs": [2, false],//タブとスペースを混在させることは禁止されています

"linebreak-style": [0, "windows"], //改行スタイル

"no-multi-spaces": 1,//余分なスペースは使用できません

"no-multi-str": 2,//文字列では \改行を使用できません

"no-multiple-empty-lines": [1, {"max": 2}], //空行は最大 2 行を超えることはできません

"no-native-reassign": 2,//ネイティブオブジェクトをオーバーライドできません

"no-negated-in-lhs": 2, //in 演算子の左側は存在できません。

"no-nested-ternary": 0,//ネストされた三項演算の使用を無効にします

"no-new": 1,//値を割り当てずにインスタンスを構築するために new を使用することは禁止されています。

"no-new-func": 1, //新しい関数の使用を無効にする

“no-new-object”: 2,//禁止使用new Object()

"no-new-require": 2,//new require の使用を無効にする

"no-new-wrappers": 2,//ラッパーインスタンスの作成に new を使用することは禁止されています。 new String new Boolean new Number

"no-obj-calls": 2,//Math() JSON() などの組み込みグローバルオブジェクトを呼び出すことはできません

"no-octal": 2, //8 進数の使用を禁止します

"no-octal-escape": 2, //8 進数のエスケープシーケンスの使用を無効にする

"no-param-reassign": 2,//パラメータの再割り当てを禁止します

"no-path-concat": 0, //ディレクトリ名またはファイル名はノード内のパス連結に使用できません

"no-plusplus": 0,//++の使用は禁止されています, –

"no-process-env": 0,//process.env の使用を禁止します

“no-process-exit”: 0,//禁止使用process.exit()

"no-proto": 2,// proto属性の使用は禁止されています

"no-redeclare": 2, //変数の繰り返し宣言は禁止されています

"no-regex-spaces": 2,//正規表現リテラルでの複数のスペースの使用を禁止します /foo bar/

"no-restricted-modules": 0, //指定されたモジュールが無効な場合、使用時にエラーが報告されます。

"no-return-assign": 1,//return ステートメントに代入式を含めることはできません

"no-script-url": 0,//javascript:void(0) の使用を無効にします

"no-self-compare": 2,//それ自体を比較できません

"no-sequences": 0,//カンマ演算子の使用は禁止されています

"no-shadow": 2,//外部スコープ内の変数は、それに含まれるスコープ内の変数またはパラメーターと同じ名前を持つことはできません

"no-shadow-restricted-names": 2, //厳密モードで指定された制限付き識別子は、宣言時に変数名として使用できません

"no-spaced-func": 2,//関数を呼び出すときに関数名と () の間にスペースを入れることはできません

"no-sparse-arrays": 2,//スパース配列は禁止されています、[1,2]

"no-sync": 0,//nodejs は同期メソッドを禁止します

"no-ternary": 0, //三項演算子の使用を無効にする

"no-trailing-spaces": 1,//行末の後にスペースを入れないでください

"no-this-before-super": 0,//super() を呼び出す前に This または super を使用することはできません

"no-throw-literal": 2,//リテラルエラーのスローを無効にする throw

"error"; "no-undef": 1,//未定義の変数は存在できません

"no-undef-init": 2,//変数を初期化するとき、変数に undefined の値を直接割り当てることはできません

"no-unknown": 2, //未定義は使用できません

"no-unexpected-multiline": 2, //複数行の式を避ける

"no-underscore-dangle": 1, //識別子は _ で開始または終了することはできません

"no-unneeded-ternary": 2,//不要なネストを禁止します var isYes = Answer === 1 ? true : false;

"no-unreachable": 2, //実行不可能なコードがあってはなりません

"no-unused-expressions": 2,//無駄な式を無効にする

"no-unused-vars": [2, {"vars": "all", "args": "after-used"}], //宣言後に使用されていない変数やパラメータは存在できません

"no-use-before-define": 2,//定義される前は使用できません

"no-useless-call": 2,//不要な通話を禁止して適用

"no-void": 2, //void 演算子を無効にする

"no-var": 0, //var を無効にし、代わりに let と const を使用します

“no-warning-comments”: [1, { “terms”: [“todo”, “fixme”, “xxx”], “location”: “start” }],//警告コメントは使用できません

"no-with": 2,//で無効化

"array-bracket-spacing": [2, "never"], //空でない配列に余分なスペースを許可するかどうか

"arrow-parens": 0,//矢印関数は括弧で囲まれます

"arrow-spacing": 0,//=> 括弧の前後

"accessor-pairs": 0,//オブジェクト内でゲッター/セッターを使用します

"block-scoped-var": 0, //ブロックステートメントで var を使用します

"brace-style": [1, "1tbs"],//中括弧のスタイル

"callback-return": 1,//コールバックを複数回呼び出すことなどは避けてください。

"camelcase": 2, // キャメルケースの名前付けを強制する

"comma-dangle": [2, "never"], //オブジェクトリテラルの末尾にカンマを含めることはできません

"comma-spacing": 0, //カンマの前後にスペース

"comma-style": [2, "last"],//カンマのスタイル、行頭または行末のどちらで改行するか

"complexity": [0, 11],//循環複雑度

"computed-property-spacing": [0, "never"], //計算されたキー名が許可されるかどうか

"consistent-return": 0, //return 後の省略を許可するかどうか

“consistent-this”: [2, “that”],//この别名

"constructor-super": 0,//非派生クラスはスーパーを呼び出すことはできません、派生クラスはスーパーを呼び出す必要があります

"curly": [2, "all"],//if() では {} を使用する必要があります{}

"default-case": 2, //switch ステートメントの最後にはデフォルトが必要です

"dot-location": 0,//行を折り返すときのオブジェクトアクセサーの位置 (行の先頭か末尾か)

"dot-notation": [0, { "allowKeywords": true }], //不要な角括弧は避けてください

"eol-last": 0, //ファイルは単一の改行文字で終わります

"eqeqeq": 2,//合同を使用する必要があります "func-names": 0,//関数式には名前が必要です

"func-style": [0, "declaration"],//関数スタイルは、関数宣言/関数式のみを使用できることを規定します

"generator-star-spacing": 0, //ジェネレーター関数の前後にスペース *

"guard-for-in": 0,//for in ループは if ステートメントでフィルタリングする必要があります

"handle-callback-err": 0,//nodejs はエラーを処理します

"id-length": 0, // 変数名の長さ

"indent": [2, 4],//インデントスタイル

"init-declarations": 0,//宣言時に初期値を割り当てる必要があります

"key-spacing": [0, { "beforeColon": false, "afterColon": true }],// オブジェクトリテラル内のコロンの前後のスペース

"lines-around-comment": 0,//行の前後のコメント

"max- Depth": [0, 4],//ネストされたブロックの深さ

"max-len": [0, 80, 4],//文字列の最大長

"max-nested-callbacks": [0, 2],//コールバックのネストの深さ

"max-params": [0, 3], //関数は最大 3 つのパラメーターのみを持つことができます

"max-statements": [0, 10], //関数内のステートメントの最大数

"new-cap": 2,//大文字の関数名の最初の行は new メソッドを使用して呼び出す必要があり、小文字の関数名の最初の行は new メソッドを使用せずに呼び出す必要があります。

"new-parens": 2, // 新規作成時にかっこを追加する必要があります

"newline-after-var": 2, //変数宣言の後に空行が必要かどうか

"object-curly-spacing": [0, "never"], //中括弧内に不要なスペースを許可するかどうか

"object-shorthand": 0,//オブジェクトリテラルの省略構文を強制します

"one-var": 1,//連続宣言

"operator-assignment": [0, "always"],//代入演算子 += -= など

"operator-linebreak": [2, "after"],//改行するとき、演算子が行末にあるか行頭にあるか

"padded-blocks": 0,//ブロックステートメントの行頭と行末に空行があるかどうか

"prefer-const": 0, // const を優先します

"prefer-spread": 0,//優先される拡張操作

"prefer-reflect": 0,//優先される Reflect メソッド

"quotes": [1, "single"],//引用符タイプ「 "" 」

"quote-props":[2, "always"],//オブジェクトリテラル内の属性名を二重引用符で囲む必要があるかどうか

"radix": 2, //parseInt は 2 番目のパラメータを指定する必要があります "id-match": 0, // ネーミング検出

"require-yield": 0, //ジェネレーター関数には yield が必要です。 "semi": [2, "always"], //ステートメントは強制的にセミコロンで終了します

“semi-spacing”: [0, {“before”: false, “after”: true}], //セミコロンの前後のスペース

"sort-vars": 0, // 変数が宣言されたときにソートします

"space-after-keywords": [0, "always"],//キーワードの後にスペースを入れるかどうか

"space-before-blocks": [0, "always"], //改行で始まらないブロック {先頭にスペースが必要です

"space-before-function-paren": [0, "always"],//関数を定義するとき、括弧の前にスペースが必要ですか?

“space-in-parens”: [0, “never”],//括弧内にスペースを入れる必要がありますか?

"space-infix-ops": 0,//中置演算子の前後にスペースを入れる必要がありますか?

"space-return-throw-case": 2,//return throw case の後にスペースを追加する必要がありますか?

“space-unary-ops”: [0, { “words”: true, “nonwords”: false }],//単項演算子の前後にスペースを追加するかどうか

"spaced-comment": 0, //コメントスタイルにスペースなどを含めますか?

"strict": 2,//厳密モードを使用します

"use-isnan": 2,//比較時の NaN の使用を無効にし、isNaN() のみを使用できます

"valid-jsdoc": 0,//jsdoc ルール

"valid-typeof": 2,//有効な typeof 値を使用する必要があります

"vars-on-top": 2, //var はスコープの先頭に配置する必要があります

"wrap-iife": [2, "inside"], //関数式の即時実行の括弧付きスタイル

"wrap-regex": 0,//正規表現リテラルは括弧で囲まれます

"yoda": [2, "never"]//表現条件を禁止します

個人で大規模かつ包括的な仕様を策定することは困難ですが、現時点では、大企業から成熟したソリューションを借用し、プロジェクトの状況に応じて少し修正することができます。

Airbnbルールの依存関係をインストールする
cnpm install [email protected]  [email protected] --save-dev
eslint 設定ファイルで使用されますAirbnb
module.exports = {
  env: {
    node: true,
    browser: true,
    es6: true,
   },
  // 支持ES6并不代表支持所有ES6新语法， 设置为 "module" 支持 ECMAScript 模块
  parserOptions: {
    sourceType: 'module'
   },
  extends: "airbnb-base",
  rules: {
    // JS文件中不支持console.log()
    'no-console': 2
   },
};
この時点で標準以外のコードを作成すると、多くの新しいルールが追加されていることがわかり、それらを 1 つずつ修正する必要があります。

less、sass、webpack (フロントエンドエンジニアリング)

1. 少ない

1. 少ない環境を構築する

1. 最初にノードをインストールします。cmd:node -v でノードがインストールされているかどうかを確認します。

2. インストールの回数を減らします: cnpm install -gless

3.less が正常にインストールされているかどうかを確認します:lessc -v

4. インストールが成功したら、ワークスペースに xx.less ファイルを作成します。

5. コンソールでlessをコンパイルします。コマンド:lessc style.less style.css

lessc + コンパイルするファイル名 + CSSにコンパイルされるファイル名

2. ブラウザで直接使用することを減らす

親切なヒント

このメソッドはプロジェクトを実行するためにサーバー モードを使用する必要があります

フロントエンドで直接使用することは推奨されませんが、サーバー側では使用できます。

プロジェクトに Less ファイルを導入し、Less js ファイルを解析します

3.less_variable

LESS では、 @記号を使用して 変数を定義できます。変数の割り当てはコロン (:)を使用して行われます。

LESSでの変数宣言の形式は「@変数名:変数値」です。

セレクターは変数を使用します

URL アドレスは変数を使用します

変数は宣言の最初に使用できます

変数としてのプロパティ

4.レスミックス

混合括弧

ミキシングに使用される!important

パラメーターを使用したミキシング

5.less_nested

ミックスインで使用される疑似セレクター

6.Less_Operation

7. レスエスケープ

8.less_function

9.less_scope

10.less_annotations とインポート

注記

輸入

2.サス

1.Sass環境のセットアップ

Rubyをインストールする

ルビージェムズ

サスのインストール

2.コンパイル_sass

Sassコードの作成

コマンドラインのコンパイル

3.sass_変数

変数を使用する

変数名はダッシュまたはアンダースコアで区切るべきですか?

4.sass_nesting

5. Sassファイルをインポートする

デフォルトの変数値

ネストされたインポート

6. サイレント注釈

7.sass_mix

混合パラメータ転送

8. セレクターの継承を使用して CSS を合理化する

継承の原則

9. Sass_Operation

運用上の優先順位

アプリケーションシナリオ

10.制御命令

@もし

@のために

3.ウェブパック

1. Webpack の概要

2. Webpack環境の構築

3. Webpack は設定ファイルを追加します

エントリ構成

構成を終了する

4. Webpack でのローダーの使用

CSSファイルを追加する

設定変更

インストール css-loader

インストール style-loader

5. Loader_ を使用して Webpack で処理するファイルを少なくする

インストール

設定変更

6. Loader_ を使用して Webpack で Sass ファイルを処理する

インストール

設定変更

7. Webpack_HTML プラグインでのプラグインの使用

インストール

プラグインの設定

このメソッドはプロジェクトを実行するためにサーバーモードを使用する必要があります

LESS では、 @記号を使用して変数を定義できます。変数の割り当てはコロン (:)を使用して行われます。

ミキシングに使用される`!important`

インストール `css-loader`

インストール `style-loader`

`mini-css-extract-plugin` 競合するため削除する必要があります`style-loaderstyle-loader`

`9.`Webpack は CSS ファイルを圧縮します

`package.json` ファイル内に見つからない場合は、`scripts` 次のコマンドを実行してファイル`npm init` を再生成できます。`package.json`

`webpack` 開発モードと運用モードを構成する

ルートディレクトリに新しい`.eslintrc.js`ファイルを追加します

`Airbnb`ルールの依存関係をインストールする

eslint 設定ファイルで使用されます`Airbnb`