标签：load   传递   css   this   time   通过   匹配   除了   export   

Info

webpack中一切都是模块，除了.js文件，所有模块都需要相应的loader进行打包导出为js对象才能使用。
通过向数组webpack.config.module.rulespush如下规则对象，就可以通过文件名设置loader规则。

rules: [
    // test：文件名匹配正则，loader：相应文件的loader
    { test: /\.vue$/, loader: 'vue-loader', },
    // 使用use以数组方式传递多个loader，同时loader可以传入携带选项参数的对象
    { test: /\.css$/, use: ['vue-style-loader', 'css-loader', ], },
    // 也可以使用下面的query方式提供选项参数
    { test: /\.(?:jpg|png|ico)$/, loader: 'url-loader?limit=10240&name=[name].[hash].[ext]', },
    // 对象形式
    { test: /\.(?:jpg|png|ico)$/, loader: { loader: 'url-loader', options: { limit: 20480, }, }, }，
],

现在我们可以非常方便地导入非js文件了：

import logo from './logo.png';
console.log(logo); // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAACLlBMV...ErkJggg==

当然，import语句也可以直接指定loader的，不过如果设置了rules就不能用这种方式：

import logo from 'url-loader?limit=102400!./logo.png';
// 等价于
const logo = require('url-loader?limit=102400!./logo.png').default;

可以这样在vue中使用：

url-loader 与 file-loader 的关系

可以看到url-loader经常把文件进行base64编码为URLData(语法：data:[][;base64],)，
这对于小文件非常有用，
但是对于大文件，还是使用file-loader复制到dist:webpack.config.output.path中比较合适。
url-loader的limit选项就是用来完成这项工作的，直接安装file-loader依赖即可。

贴一段代码，

url-loader

标签：load   传递   css   this   time   通过   匹配   除了   export   

原文地址：https://www.cnblogs.com/develon/p/12483993.html