webpack は CSS とさまざまなローダーをインポートします

この記事では主に webpack の CSS インポートとさまざまなローダーについて紹介します。これには特定の参考値がありますので、必要な友達に参考にしてください

webpack imports

スタイルをダウンロードします。 -loader css-loader

-D2) main.jsにindex.cssを導入します

import './css/index.css'

3) webpack.config.jsを設定します

モジュール属性を使用します

const path = require('path')

module.exports = {
    mode: 'development',
    entry:path.join(__dirname,'./src/main.js'),//打包的那个文件    output:{
        path:path.join(__dirname,'./dist'),
        filename :'bundle.js'
    },
    devServer:{
        open:'true',
        port:'8081',
        contentBase:'src'
    },    module:{
        rules:[
            test: {'/\.css$/',use['style-loader','css-loader']}
        ]
    }}

再起動して`npm run dev`を実行します

2. Webpackは画像をインポートします

画像のインポートにはURLアドレスを使用する必要があるため、`url-loader`と`file-loader`を導入する必要があります(`file-loader`は`urlに依存します) -loader` なので一緒に導入する必要があります)

npm i

url-loader file-loader

-D

.box{
  background-image:url('../Images/1.jpg')  
}

webpack.config.jsを設定する

module:{ 
    rules:[ 
        {test:/\.css$/,use:['style-loader','css-loader']},        {test:/\.(jpg|png|gif|bmp|jpeg)$/,use: url-loader?limit=4000&name=[hash:8]-[name].[ext]' },　　　　 //如果图片大于limit的大小则不会被解析成base64
        //name设置是否重命名图片,  [name].[ext]是保持引入的时候的图片的名字,[hash:8]-[name].[ext]是自动在图片原名前加一个随机的hash值，防止图片重复
        ]
}

3 babelの導入。

in webpack ブラウザーによって認識されない一部の高度な ES6 構文は、`babel` を使用して変換できます

npm install babel-core babel-loader babel-plugin-transform-runtime -D //変換ツール

npm install babel -preset-env babel -preset-stage-0 -D //構文

webpack.config.jsで設定します

<span style="color: #000000">module:{ 
  rules:[       <span style="color: #ff0000"> {test:</span></span><span style="color: #ff0000">/\.js$/,use:'babel-loader',<strong>exclude</strong>:/node_modules/</span><span style="color: #000000"><span style="color: #ff0000">}</span>
        //exclude是去掉不需要转换的包 <br>　　]
}</span>

新しい`.babelrc` `babel`設定ファイルをルートディレクトリに作成します。プロジェクト (JSON 形式、必須 JSON 仕様に準拠)

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

4. Webpack でテンプレートを使用する場合は、.vue ファイルを解析する必要があります

npm install vue-loader vue-template-compiler -D

webpack.config.js での設定

const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {
　　plugins:[
　　　　new VueLoaderPlugin(),
　　],　　module:{
　　　　rules:[
　　　　　　{test:/\.vue$/,use:'vue-loader'},
　　　　]　　
　　},
}

webpack の上位バージョンで vue-loader を使用する場合、プラグイン (青い部分) の設定が必要です

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

モバイルの日付と選択プラグイン mobiscroll

bootstrap-datatimepicker プラグインの使用方法

以上がwebpack は CSS とさまざまなローダーをインポートしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。