Fiime分享6.服务器配置
在webpack.config.js中写入模块监听地址
在module.exports节点中添加:
devServer:{
open:true, //自动打开
port:80, //端口号
host:'127.0.0.1' //指定运行地址
}
7.Webpack Loader使用
加载器的使用
在实际开发过程中，webpack 默认只能打包处理以.js后缀名结尾的模块。
其他非.js 后缀名结尾的模块，webpack 默认处理不了，需要调用loader加载器才可以正常打包，否则会报错!
loader加载器的作用:协助webpack打包处理特定的文件模块。
比如:
css-loader 可以打包处理.cSs相关的文件
less-loader可以打包处理.less相关的文件
babel-loader可以打包处理webpack 无法处理的高级JS语法
判断js文件 ----非js/或存在高级语法，寻找loader----解决/报错
新建src/index.css
li {
list-style:'none';
}
在index.js中插入
import './index.css'
报错:
Module not found: Error: Can't resolve './src/index.css'
需要使用loader加载器处理错误
开始配置:
npm i css-loader style-loader -D
安装两个对象loader处理器
在webpack.config.js中的module.exports中添加入口
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']}
//顺序不能写反，顺序提交并反馈到webpack 处理是从后往前处理
]
}
新的样式 index.less
html,body,ul {
margin: 0;
padding: 0;
li{
line-height: 30px;
padding-left: 20px;
font-size: 12px;
}
}
导入样式
import './index.less'
开始写判断
导入包 npm i less less-loader -D
在module中声明
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
导入包 npm i file-loader url-loader -D
导入图片
index.js
//导入图片文件
import logo from './src/1.jpg'
index.html
<img src="" alt="" class="box">
webpack.config.js中module节点添加
{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=1024' },
//limit是指定文件的字节大小
//查看调试
console.log()
