フロントエンド白WebPACKの学習（四）

.lessファイルと同様のファイル.scssの.cssファイル

以下ローダ手段少ない使用プラグイン、入力端子に必要npm i less less-loader -Dインストール。
SASSローダ手段は、ノードSASSプラグを使用する必要があり、入力端子npm i node-sass sass-loader -D取付
入口のjsファイルの紹介

import "./css/index.less"
import "./css/index.scss"

あまりローダー構成さwebpack.config.js

module.exports = {
    ...
    module:{
        rules:[
            //loader的顺序不能颠倒，webpack使用loader的顺序是从右到左（从下到上）
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},

        ]
    }
}

9.画像形式のファイルのパッケージ

画像形式のファイルは端末入力、プラグインファイルローダ使用する必要パッケージ化されているnpm i file-loader url-loader -DURLローダーをインストールすることを
コンテナのdivのindex.htmlに追加するdivの背景設定：URLを（）プロパティ

<div id="img"></div>

#img{
    width: 128px;
    height: 128px;
    background: url(../img/圣诞树.png);
}

すべての画像のプロパティのwebpack.config.jsのconfigureのurl-ローダー

module.exports = {
    ...
    module:{
        rules:[
            //loader的顺序不能颠倒，webpack使用loader的顺序是从右到左（从下到上）
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|png|bmp|jpeg|gif)$/,use:'url-loader'},
        ]
    }
}

Webページを開くと、自動的にBase64形式に変換された元の画像の要素の見直しを見つけるでしょう。

私たちは、中のurl-ローダーを設定することができます

//url-loader 可以接收配置参数 
//limit 参数：若图片大小（单位：字节）大于或等于limit的值，则图片会被转换为base64格式；若图片小于limit的值，则不转换
//name 参数：设置name=[name].[ext]后，打包时将会保留文件原文件名。前面加上[hash:8]则会在原文件名前随机生成8位hash值，防止文件重名。
{test:/\.(jpg|png|bmp|jpeg|gif)$/,use:'url-loader?limit=5106&name=[hash:8]-[name].[ext]'},

ファイルのパッケージアイコン10フォント

アイコンのブートストラップは、ここで紹介しました。最初のインストールnpm i bootstrap -Dブートストラップのためには、必要がブートストラップをインストールした後、オープン象徴的なプロジェクトをインストールするので、オープン象徴的な4.xの後に独立した項目として単離されたアイコンがnpm i https://github.com/iconic/open-iconic.git -D。（オープン象徴的でないエラーをインストールしていないが、アイコンは、正常にできません表示）
index.htmlに使用されるアイコンアイコン

<span class="oi oi-account-login"></span>
<span class="oi oi-account-logout"></span>

main.js導入

//通过路径形式引入node_modules中相关的文件，可以直接省略node_modules，直接写包的名字，默认回去node_modules里找
import "bootstrap/dist/css/bootstrap.css"
import "open-iconic/font/css/open-iconic-bootstrap.css"

webpack.config.jsのconfigure

module.exports = {
    ...
    module:{
        rules:[
            //loader的顺序不能颠倒，webpack使用loader的顺序是从右到左（从下到上）
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|png|bmp|jpeg|gif)$/,use:'url-loader?limit=5106&name=[hash:8]-[name].[ext]'},
            {test:/\.(ttf|svg|woff|eot|woff2|otf)$/,use:'url-loader'},
        ]
    }
}

11.高度な文法パック

あなたは、たとえば、高レベルの構文のjsファイルを使用する場合は、ES6 / 7文法は、WebPACKのは解決することはできません。この時点で、我々はバベル・ローダーを使用する必要があります。
例えば、我々は解析エラーのWebPACK、その場合には、main.jsにclassキーワードを使用します。

class Person {
    static info = {name:"seven",age:150}
}

console.log(Person.info);

バベルコア、端子装着することにより、バベルローダニーズnpm i babel-loader babel-core -D
- configureバベルへのプロジェクトのルートディレクトリに.babelrcファイルを作成し、使用するために必要な関連のプラグインをインストールバベル
- npm i babel-plugin-transform-runtime -D
- npm i babel-preset-env babel-preset-stage-0 -D

{
    "presets": ["env","stage-0"],
    "plugins": ["transform-runtime"]
}

バベルローダー設定さwebpack.config.js

module.exports = {
    ...
    module:{
        rules:[
            //loader的顺序不能颠倒，webpack使用loader的顺序是从右到左（从下到上）
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|png|bmp|jpeg|gif)$/,use:'url-loader?limit=5106&name=[hash:8]-[name].[ext]'},
            {test:/\.(ttf|svg|woff|eot|woff2|otf)$/,use:'url-loader'},
            //exclude 表示使用babel-loader时排除node_modules目录及其以下的文件
            {test:/\.js/,use:"babel-loader",exclude:/node_modules/}
        ]
    }
}

WebPACKの基本的最終用途に来ます

フロントエンド白WebPACKの学習（四）

おすすめ