打包处理less文件
1,运行npm i less-loader@10.0.1 less@4.1.1 -D
2, 在webpack.config.js的module->rules数组中
rules:[{test:/\.less$/,use:['style-loader','css-loader','less-loader']},]
base64可以防止额外的请求,优化性能(缺点:体积会增大,大文件不适合)
打包处理样式表中与url路径相关的文件
1,运行npm i url-loader@4.1.1 file-loader@6.2.0 -D
2,在webpack.config.js的module->rules数组中
rules:[{test:/\.jpg|png|gif$/,use:'url-loader'?'limit=22229'},]
?之后的是loader的参数项:
limit用来指定图片的大小,单位是字节(byte)
只有<=limit大小的图片,才会被转为base64格式的图片
配置Babel-loader
配置webpack 的打包发布
在package.json文件的scripts节点下,新增build命令
“scripts”:{
“dev”:“webpack serve”,
“bulid”:“webpack --mode production”//项目发布时,运行bulid命令
}
安装配置clean-webpack-plugin插件:
默认生成的source map,记录的是生成后的代码的位置,会导致运行时报错的行数与源代码的行数不一致
devtool:'eval-source-map',即可
devtool:'nosources-source-map'可以只定位报错行数,不暴露源码
devtool:'source-map',显示行数并显示源码
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。