webpack中的loaders总结

版权声明：本文为博主原创文章，喜欢的话，可以通知我后进行转载哦！ https://blog.csdn.net/maidu_xbd/article/details/88388003

loader用来解析js以外的东西，（webpack 自身只理解 JavaScript） style-loader------读取css，输出js字符串—解析css文件、import

css-loade-----------输出字符串<style>--输出样式到<style>标签

postcss-loader----让webpack解析、处理css文件的loader，给浏览器加前缀的

autoprefixer-------结合postcss-loader使用，告诉postcss-loader哪些可以加前缀 

file-loader----------将文件编译到js中，引入文件（图片/字体）

url-loader-----------将文件编译到js中，以base64形式将文件放在bundle里

less-loader---------编译less

babel-loader--------将es6语法编译为es5等能被浏览器识别的语法

一、style-loader css-loader使用说明

1、安装命令【npm i style-loader css-loader -D】

2、webpack.config.js配置：

    入口entry：可以通过在 webpack 配置【webpack.config.js】中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src

    输出output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist

    loader:【{test: /\.css$/i, use: ['style-loader', 'css-loader']}】注意执行顺序，从后往前

const path=require('path');

module.exports={
  mode: 'development',
  entry: './src/js/index',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.min.js'
  },
  module: {
    rules: [
      {test: /\.css$/i, use: ['style-loader', 'css-loader']}
    ]
  }
};