Webpack常用模块加载器Loader

css-loader 和 style-loader

css-loader解析相应的css文件中@import和url()函数的依赖关系, 将依赖进行require, 这些依赖依然被相应的模块加载器处理后, 再由file-loader处理, 最后将资源的dist路径返回给css-loader进行替换.
style-loader将css-loader处理过的css内容使用JavaScript代码注射进HTML文档, 这样做是比较方便, 但是遇到数量比较多的css内容时, 通常需要使用插件将所有的css解构出来合并为一个单独的css文件.

css-loader还实现了CSS Modules模块化CSS, 配合React等框架, 实现模块化组件开发.

常用模块规则:

{ test: /.css$/, use: ['style-loader', 'css-loader?modules'] }, // 处理顺序是反向的

file-loader

file-loadre将文件复制到dist目录下, 导出相对于上下文context的相对路径.
常用模块规则:

{ test: /.(html|png|jpg|ico)$/, use: 'file-loader?context=src&name=[path][name].[ext]' },

raw-loader

有时我们需要将字符串放到一个单独的文件中, 并在需要时将文件文本内容作为字符串导入.
这在异步导入时也很有用.

// 异步加载当前文件的文本内容
import('!raw-loader!.').then(({ default: text }) => { // 当前文件使用ES6模块规范, 需要获取默认导出
      this.setState({ code: text });
});

babel-loader

babel-loader是React开发必备的加载器, 因为React通常会使用JSX在js文件中编写组件, 而Babel提供了JSX编译功能, 需要使用babel-loader将js文件交给Babel编译后再导入.
安装Babel及其加载器:

npm i -S @babel/core @babel/preset-env @babel/preset-react babel-loader

常用模块规则:

{ test: /.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=@babel/env&presets[]=@babel/react' },