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的大小则不会被解析成base
 //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中配置

module:{ 
 rules:[ {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
 //exclude是去掉不需要转换的包 
　　]
}

在项目的根目录下新建 `.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的时候都需要配置下插件（标蓝部分）