webpack imports css and various loaders

This article mainly introduces about webpack importing css and various loaders. It has certain reference value. Now I share it with everyone. Friends in need can refer to it

webpack imports css

1) Download the relevant loader npm install style-loader css-loader -D

2) Introduce index.css into main.js

import './css/index.css'

3) Configure webpack.config.js

Use module attribute

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

Restart running `npm run dev`

2. Webpack imports images

Since importing images requires the use of url addresses, you need to introduce `url-loader` and `file-loader` ( `file-loader` depends on `url-loader` So it needs to be introduced together)

npm i url-loader file-loader -D

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

Configure 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. Introduction of babel

in webpack For advanced ES6 syntax that some browsers do not recognize, use `babel` to convert

npm install babel-core babel-loader babel-plugin-transform-runtime -D //Conversion tool

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

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

Create a new `.babelrc in the root directory of the project ``babel` configuration file (JSON format, needs to comply with JSON specification)

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

4. When using templates in webpack, you need to parse the .vue file

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

Configuration in webpack.config.js

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

High version When webpack uses vue-loader, you need to configure the plug-in (the blue part)

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Mobile date and selection plug-in mobiscroll

Usage of bootstrap-datatimepicker plug-in

The above is the detailed content of webpack imports css and various loaders. For more information, please follow other related articles on the PHP Chinese website!