webpack--加载器(loader)

加载器loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中引入CSS文件！

当我们项目中用js引入css 就会出现解析打包失败的情况

 

 

加载器配置：webpack在打包时，会根据js文件中的引用文件中的引入语法，去加载其他文件；然后读取他文件中，webpack只能识别js和json文件。

需要加载器loader去按照对应的文件编码进行解析

不同文件类型就要去使用不同的规则去解析，不同规则就不用的加载器

 

css-loader&style-loader

css-loader解析css文件

style-loader把 css-loader 生成的内容，用 style 标签挂载到页面的 head 中

1.npm install css-loader style-loader --save-dev

     //加载器配置loader,

       module:{

   rules:[

   {test:/\.css$/,use:["style-loader","css-loader"]}

   ]

   }

}

外部文件形式生成css资源

npm i mini-css-extract-plugin --save-dev

 

module: {

rules: [

//运行bundle时直接以style标签形式动态写入到页面

 {test:/\.css$/,use:["style-loader","css-loader"]},

{

test: /\.css$/,//css生成到css文件中,项目中以<link>形式引入使用

use: [MiniCssExtractPlugin.loader, 'css-loader']

}

]

},

plugins: [

new MiniCssExtractPlugin({

filename: '[hash].css' //css生成到css文件中,项目中手动以<link>形式引入使用

})

]

 

 

file-loader

项目中引入了常见类型(好多类型, 比如视频音频图片等等媒体编码)的文件,可以使用file-loader将其打包

npm i file-loader --save-dev

 

//webpack.config.js文件:

module: {

rules: [

//直接以style标签形式动态写入到页面

    {test:/\.css$/,use:["style-loader","css-loader"]},

        //项目中引入了以下结尾的文件就会启动file-loader

{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},

]

}

 

 

ts-loader

将 TypeScript 转为 JavaScript

npm install ts-loader webpack typescript --save-dev

项目中新建一个tsconfig.json文件(这是ts编译需要的配置文件)

//webpack.config.js文件:

module: {

rules: [

//直接以style标签形式动态写入到页面

// {test:/\.css$/,use:["style-loader","css-loader"]},

{

test: /\.css$/,

//css生成到css文件中,项目中以<link>形式引入使用

use: [MiniCssExtractPlugin.loader, 'css-loader']

},

{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},

{ test: /\.ts$/, use: 'ts-loader' },

]

},

 

babel-loader

Babel 是一个 JavaScript编译器，它是一个工具链，主要的用途就是在旧的浏览器或环境中将ECMAScript 2015+ 代码转换为向后兼容的 js 代码。babel-loader就是用babel工具将ES6转成ES5的一种加载器. 在webpack打包时遇到js文件，就交给babel处理。

npm install babel-loader @babel/core @babel/preset-env webpack -D

//webpack.config.js文件

module: {

rules: [

//直接以style标签形式动态写入到页面

 {test:/\.css$/,use:["style-loader","css-loader"]},

{

test: /\.css$/,

//css生成到css文件中,项目中以<link>形式引入使用

use: [MiniCssExtractPlugin.loader, 'css-loader']

},

{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},

{ test: /\.ts$/, use: 'ts-loader' },

//exclude:/node_module/ 意思是下载的模块不转码,其他js文件转码

 {

      test: /\.js$/,

      exclude: /(node_modules|bower_components)/,

      use: {

        loader: 'babel-loader',

        options: {

          presets: ['@babel/preset-env'],

          plugins: ['@babel/plugin-proposal-object-rest-spread']

        }

      }

    }

]

},

 

总结:babel-loader 很慢！解决办法：要排除 node_modules，参考文档中的 loaders 配置的 exclude 选项。

 

 

sass-loader

把Sass代码转化为css代码

npm install sass-loader sass webpack --save-dev

//webpack.config.js文件:

  module: {

    rules: [

      {

        test: /\.s[ac]ss$/i,

        use: [       

          'style-loader',  //不用单独引入 直接运行js代码 动态写入页面   

          'css-loader',

          // 将 Sass 编译成 CSS

          'sass-loader',

        ],

      },

    ],

  },