标签：map less rules twenty two loader source webpack

打包处理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',显示行数并显示源码

标签：map,less,rules,twenty,two,loader,source,webpack
来源： https://www.cnblogs.com/TenDays/p/16275318.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。