WebPACKの負荷CSSファイルとその設定
- 我々はいくつかのCSSファイルの方法を書いたとき、私たちは、もともとCSSファイルにインポートするリンクタグを介して行われていますが、1つの輸入によって、HTMLのGO TO 1を参照したい場合は、当社のCSSファイルは言葉をたくさん持っている場合に推奨されていません;そして今、私たちはWebPACKのを学ぶ、私たちは、ファイルbundle.js充填することにより、すべてのファイルがすべてそこに輸入に依存することを願っています。
- 私たちは、main.jsファイル、CSSファイルを依存する必要がすべて、そのファイルbundle.jsパッケージ化されたCSSファイルは、CSSファイルのエントリ関数main.jsファイルを持っていなければならない場合にインポートされていない場合、であるかを知りたいです。
- 使用コード：
require('css文件地址')
- 依存性が完了した後、我々はそれがエラーを見つける実行ビルドをNPMパックます。エラー：あなたによってタイプのこのAN適切なローダーファイルを処理する必要があるかもしれません。あなたはこのファイルを処理するために、適切なローダーが必要な場合がありますことを、この手段
- オープンWebPACKの中国語サイト私たちは、我々は両方の内側にCSS-ローダーとスタイル・ローダーローダーをインストールする必要性を発見しました。そして、我々はまた、webpack.config.jsローダーでこれらのファイルを設定する必要があります
- 以下のように、これら2件の従属ダウンロードNPMを使用して、我々はそう：
npm install css-loader style-loader --save-dev
- webpack.config.jsファイルでは、対象となるプロパティのモジュールが存在すると、そのオブジェクトのルール内のプロパティは、ある配列で、各アレイがローダを必要と異なるファイルで処理されます。コードは以下の通りであります：
const path = require('path');
module.exports = {
// 在配置文件中，手动指定 入口 文件和 出口 文件
mode:'development', // webpack4.x版本中需要加入这个属性
entry:'./src/main.js', // 入口文件
output:{ // 出口文件
path:path.resolve(__dirname,'dist'), // 指定将要打包好的文件应该要输出到哪个地方去（注意：路径必须是绝对地址）
filename: 'bundle.js' // 指定输出文件的文件名
},
module:{
rules:[
{test:/\.css$/ , use:['style-loader' , 'css-loader']}
]
}
}
- ここで我々は、ファイルの種類を扱っていることをテスト手段、クラスローダの各項目を使用するプロセスに必要な書類です。
注：CSS-ローダーの役割は、ローダは、CSSファイルmain.jsファイルをロードできるようにするために使用され、そしてスタイルローダの役割は、DOMとしてエクスポートモジュールにスタイルを追加することです。ここではいくつかの人々が疑問であってもよい。そのような役割が懸念される中で、それは最初に、魚にスタイルとしてDOMに追加され、その後、アレイはそうでないことを順番にファイルをロードしなければなりません。ここで私はあなたの考えは間違っていないことを伝えることは非常に明確だが、彼はこれは非常に奇妙であるのWebPACK、それはローダーをロードするように右から左へ、配列の最後の要素です。
- セットの依存、良いローダーのダウンロードと設定終了発見CSSファイルのスタイルが出てきた後、私たちが実行されます。