这篇文章主要介绍了关于webpack导入css及各项loader，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
webpack导入css
1) 下载相关的加载器 npm install style-loader css-loader -D
2）将index.css引入到mian.js中
import './css/index.css'
立即学习“前端免费学习笔记（深入）”；
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']}
]
}}
立即学习“前端免费学习笔记（深入）”；
重启运行 `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.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:'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中文网！
相关推荐：
