twenty two
打包处理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
根目录创建babel.config.js的配置文件
配置webpack 的打包发布
在package.json文件的scripts节点下,新增build命令
“scripts”:{
“dev”:“webpack serve”,
“bulid”:“webpack --mode production”//项目发布时,运行bulid命令
}
自动清理dist目录下的旧文件
安装配置clean-webpack-plugin插件:
source map是一个信息文件,里面存着位置信息。
默认生成的source map,记录的是生成后的代码的位置,会导致运行时报错的行数与源代码的行数不一致
在webpack.config.js添加配置
devtool:'eval-source-map',即可
devtool:'nosources-source-map'可以只定位报错行数,不暴露源码
devtool:'source-map',显示行数并显示源码
最新文章
- Unity3D 动态改变地形
- .net使用pdfobject.js加载pdf文件
- 收集入侵Windows系统的证据
- android 项目学习随笔七(ViewPagerIndicator与ViewPager)
- SpringMVC控制器配置文件
- dp方程
- Redis VS Memcached 转载
- jmeter连接配置带跳板机(SSH)的mysql服务器
- 谈谈Grunt,NPM,Gulp
- VS2017离线安装入门与出家
- Luogu P3177 [HAOI2015]树上染色
- 50道sql练习题和答案
- P4811 C’s problem(c)
- css样式 float的理解
- NO.1:自学tensorflow之路------神经网络背景知识
- DDD-EF-数据仓储
- 171. Anagrams【medium】
- docker配置与实践#可以好好看看
- Binding RelativeSource
- Objective-C基础笔记(6)Block