解决webpack 打包 样式的 问题
程序员文章站
2022-04-26 14:46:57
...
解决css文件 cnpm i style-loader css-loader -D { test: /\.css$/, use: ['style-loader','css-loader'] }
解决less文件 cnpm i less-loader less -D { test: /\.less$/, use: ['style-loader','css-loader','less-loader'] }
解决scss文件 cnpm i sass-loader node-sass -D { test: /\.sass$/, use: ['style-loader','css-loader','sass-loader'] }
解决图片文件 cnpm i url-loader file-loader -D
{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=3000000&name=[hash:8]-[name].[ext]'}, // 处理图片路径的 loader
// limit 给定的值,是图片的大小,单位是 byte ,如果我们 引用的 图片,大于或等于给定的 limit 值,则不会被转为 base 64格式的字符串, 如果 图片小于给定的 limit 值,则会被转为 base64的字符串。
解决字体文件
{ test: /\.(ttf|eot|svg|woff|woff2$)/, use: 'url-loader'}, //处理 字体文件的 loader
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //配置 Babel 来转换高级的 ES 语法
使用babel , 可以帮我们将高级的语法转换为低级的语法
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
{ /\.js$/ , use: 'babel-loader', exclude: /node_modules/ }
{ test: /\.vue$/, use: 'vue-loader' }, // 处理 .vue 文件的loader
下一篇: css文本居中
推荐阅读
-
Android--解决图片保存到相册显示1970年1月1日 8:00的问题
-
解决js相同的正则多次调用test()返回的值却不同的问题
-
完美解决linux下U盘文件只读的问题
-
layui问题之渲染数据表格时,仅出现10条数据的解决方法
-
解决layui表格内文本超出隐藏的问题
-
Apache遇到的问题 APR not found问题的解决方法
-
ubuntu系统下matplotlib中文乱码问题的解决方法
-
Table 组件构建过程中遇到的问题与解决思路
-
django(1045,"Accessdeniedforuser'wccLab'@'localhost'(usingpassword:no)BUG问题的解决教程
-
解决Coreldraw打开大文件失败的问题