webpack导入css及各项loader

不言
Lepaskan: 2018-07-09 17:32:46
asal
1399 orang telah melayarinya

这篇文章主要介绍了关于webpack导入css及各项loader,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

webpack导入css

1) 下载相关的加载器 npm install style-loader css-loader -D

2)将index.css引入到mian.js中

import './css/index.css'
Salin selepas log masuk

3) 配置webpack.config.js

使用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']}
        ]
    }}
Salin selepas log masuk

重启运行 `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')  
}
Salin selepas log masuk

配置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值,防止图片重复
        ]
}
Salin selepas log masuk

3.webpack中引入babel

对于部分浏览器不识别的高级的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:&#39;babel-loader&#39;,<strong>exclude</strong>:/node_modules/</span><span style="color: #000000"><span style="color: #ff0000">}</span>
        //exclude是去掉不需要转换的包 <br/>  ]
}</span>
Salin selepas log masuk

在项目的根目录下新建 `.babelrc` 的 `babel` 配置文件(JSON格式,需要符合JSON规范)

{    "plugins":["transform-runtime"],    "presets":["env","stage-0"]
}
Salin selepas log masuk

4.webpack中使用模板,需要解析.vue文件

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

在webpack.config.js中的配置

const VueLoaderPlugin = require(&#39;vue-loader/lib/plugin&#39;);module.exports = {
  plugins:[
    new VueLoaderPlugin(),
  ],  module:{
    rules:[
      {test:/\.vue$/,use:&#39;vue-loader&#39;},
    ]  
  },
}
Salin selepas log masuk

高版本的webpack使用vue-loader的时候都需要配置下插件(标蓝部分)

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

 移动端日期及选择插件mobiscroll

bootstrap-datatimepicker插件的使用

Atas ialah kandungan terperinci webpack导入css及各项loader. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan