webpack loader

webpack loader

一.处理css文件

1.安装style-loader 和css-loader

2.修改webpack.config.js

const path=require('path')

//这个配置文件，其实就是一个node文件，通过node中的模块操作，向外暴露了一个配置对象

//导入在内存中生成html的插件
//只要是插件都要放到plugins中去
const htmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
  entry:path.join(__dirname,"./src/main.js"),//入口
  output:{//输出文件配置
    path:path.join(__dirname,"./dist"),
    filename:'bundle.js'//指定输出文件的名称
  },
  plugins: [
      new htmlWebpackPlugin({//创建一个在内存中生成html页面的插件
        template: path.join(__dirname,"./src/index.html"),//指定模板页面
        filename: "index.html"//指定生成的页面的名称
      })
  ],
    //
    //
    //加上以下module的部分
    //
  module: {
    //这个结点用于配置所有的第三方模块加载器
    rules: [//所有第三方模块的匹配规则
      {test:/\.css$/,use:['style-loader','css-loader']}//配置处理css文件的第三方loader模块规则,test里面是正则表达式
    ]
  }

}

二、处理less文件

1.安装less-loader和less

2.输入规则

在webpack.config.js中加入

{test: /\.less$/,use:['style-loader','css-loader','less-loader']}//配置处理less文件的规则

三、处理scss文件

1.安装sass-loader和node-sass

npm i sass-loader -D

由于node-sass用npm下载会有问题，所以要用cnpm下载

2.在webpack.config.js中加入

{test: /\.scss$/,use:['style-loader','css-loader','sass-loader']}//配置处理scss文件规则

四、处理url

1.安装url-loader 和file-loader

npm i url-loader file-loader -D

2.在webpack.config.js中加入

{test:/\.jpg|png|gif|bmp|jpeg$/,use:'url-loader'},//配置处理url

传参：

{test:/\.jpg|png|gif|bmp|jpeg$/,use:'url-loader?limit=6000'},//配置处理url

limit给定的是图片的大小，单位是byte，大于limit的图片不会转为base64的字符串，小于limit的图片会转为base64的字符串

{test:/\.jpg|png|gif|bmp|jpeg$/,use:'url-loader?limit=6000&name=[hash:8]-[name].[ext]'},//配置处理url

name=[name].[ext]意思是图片保持原有的名字和后缀

[hash:8]加上哈希值

五、处理es6高级语法

ps：在以上的所有规则中，loader顺序不能改变，否则可能出错