Webpack importiert CSS und verschiedene Loader

Dieser Artikel stellt hauptsächlich den Webpack-Import von CSS und verschiedene Loader vor. Jetzt kann ich ihn mit allen teilen, die ihn brauchen.

Webpack-Import von CSS

1) Laden Sie den entsprechenden Loader npm install style-loader css-loader -D

2) Fügen Sie index.css in main.js ein

import './css/index.css'

3) Konfigurieren Sie webpack.config.js

Modulattribut verwenden

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']}
        ]
    }}

Starten Sie die Ausführung von „npm run dev“ neu

2. Webpack importiert Bilder

Da das Importieren von Bildern die Verwendung von URL-Adressen erfordert, müssen Sie „URL-Loader“ und „File-Loader“ (Abhängigkeiten von „File-Loader“) einführen es muss zusammen mit „url-loader“ eingeführt werden)

npm i url-loader file-loader -D

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

Webpack.config.js konfigurieren

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. Webpack führt Babel

für erweiterte ES6-Syntax ein, die einige Browser nicht erkennen , verwenden Sie „babel“, um

npm install babel-core babel-loader babel-plugin-transform-runtime -D //Konvertierungstool

npm install babel-preset-env babel-preset zu transformieren -stage-0 -D //Syntax

In webpack.config.js konfigurieren

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

Neu im Stammverzeichnis des Projekts erstellen ` .babelrc`s `babel`-Konfigurationsdatei (JSON-Format, muss der JSON-Spezifikation entsprechen)

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

4. Im Webpack verwendete Vorlagen müssen analysiert werden .vue-Dateien

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

Konfiguration in webpack.config.js

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

Höhere Versionen von Webpack müssen das Plug-In (den blauen Teil) konfigurieren, wenn Vue-Loader verwendet wird.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Mobiles Datums- und Auswahl-Plug-in mobiscroll

Verwendung des Bootstrap-Datatimepicker-Plug-ins

Das obige ist der detaillierte Inhalt vonWebpack importiert CSS und verschiedene Loader. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!