网站开发用的框架,金螳螂家装官网,中国建设银行青浦支行网站,网站制作多少钱?webpack是一个打包工具#xff0c;即webpack会将一切文件视为模块#xff0c;但是webpack在打包的时候只是认识JS文件或者JSON文件#xff0c;并不认识CSS文件#xff0c;png图片等#xff0c;如果想让webpack能够在打包的时候识别其他文件#xff0c;就必须要使用loader…webpack是一个打包工具即webpack会将一切文件视为模块但是webpack在打包的时候只是认识JS文件或者JSON文件并不认识CSS文件png图片等如果想让webpack能够在打包的时候识别其他文件就必须要使用loader即loader的作用就是让webpack拥有可以加载和了解除JS文件以外的其他文件。
loader在webpack中的配置
module.exports {module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader]}]}
}
其中的rules是一个对象数组因为在webpack中不会仅仅是使用一个loader也会同时使用多个loader帮助webpack来解析除JS外的其他文件且rules的执行顺序是从下往上执行即如果我们要优先执行的loader我们就需要写在rules的最下面。且每个rules都有两个配置项一个test即是我们这个loader是处理什么对象的即测试对象。下面的use就是我们使用的loader。
对于Loader我们可以通过rules去匹配哪些文件会被这个loader所处理。Loader本身就是一个函数当webpack解析资源的时候会调用相关的loader去处理loader接收到文本内容作为参数将处理完的内容进行返回出去。那么loader除了接收内容作为参数外还有map代表sourcemap以及meta代表别的loader传递的参数。
以css-loader为例
我们需要使用 css-loader 来处理css文件webpack编译后就不再是CSS文件了而只是一段JS代码而使用 style-loader 的作用就是将css-loader所转化的JS对象进行执行核心就是会动态的创建一个style标签将前者所转化的JS对象动态的插入到header中。这样就将CSS文件成功的让webpack识别。
如何写webpack loader
写一个Markdown文件的loader使md文件可以被import并使用
识别md文件能够读取md文件信息
新建一个loader.js文件里面通过引用插件之类的方法实现我们需要的功能比如读取markdown文件利用 marked 插件将md文件转换为html字符串return出去在webpack.config.js的Module中正则匹配ms后缀文件使用我们在config中配置的md loader这样在app.js中引用这个md文件就可以打印出内容的html串了。
// markdown-loader.js
const marked require(marked) // marked是在package中安装的一个包function transform(source) {const html marked.parse(source)return export default ${JSON.stringify(html)};
}// webpack中的配置
{test: /.md$/,use: ./config/markdown-loader.js,// use写入loader的相对路径// use不仅可以写入名称也可以写入路径和node的require模式是 一样的
}
