webpack importe du CSS et divers chargeurs

Cet article présente principalement l'importation de CSS par Webpack et divers chargeurs. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

L'importation de CSS par Webpack

. 1) Téléchargez le chargeur approprié npm install style-loader css-loader -D

2) Introduisez index.css dans main.js

import './css/index.css'

3) Configurez webpack.config.js

à l'aide de l'attribut du module

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

Redémarrez et exécutez `npm run dev`

2. Webpack importe des images

Étant donné que l'importation d'images nécessite l'utilisation d'adresses URL, vous devez introduire `url-loader` et `file-loader` ( ` file -loader` dépend de `url-loader` il doit donc être introduit ensemble)

npm i url-loader file-loader -D

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

Configurer 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值，防止图片重复
        ]
}

Introduction de babel

dans le webpack pour une navigation partielle Syntaxe ES6 avancée qui n'est pas reconnue par le navigateur, utilisez `babel` pour transformer

npm install babel-core babel-loader babel-plugin-transform-runtime -D //Outil de conversion

npm install babel-preset-env babel-preset-stage-0 -D //Syntaxe

Configurer dans webpack.config.js

<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>

Créez un nouveau fichier de configuration `.babelrc` `babel` dans le répertoire racine du projet (format JSON, doit être conforme aux spécifications JSON)

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

4 Pour utiliser des modèles dans .webpack, vous devez analyser le fichier .vue

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

Configuration dans webpack.config.js

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

Lorsque les versions supérieures de webpack utilisent vue-loader, vous devez configurer le plug-in (la partie bleue)

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile. L'apprentissage de chacun est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Plug-in de sélection et de date mobile Mobiscroll

Utilisation du plug-in bootstrap-datatimepicker

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!