webpack中Loader的使用

photot.jpg

1.什么是Loader?

webpack它只认识JavaScript的代码，当需要打包一些文件（图片文件），css样式、font字体这些的时候就需要借助与loader了，loader就是一个node的模块，用于对模块的源码进行转换。
具体的查看webpack官网的描述:https://webpack.js.org/loaders/

2.file-loader

根据我上面介绍的当webpack在打包的过程中遇到了图片的文件，它就不认识了就会报：You may need an appropriate loader to handle this file type

代码结构如下:

//index.js
import photot from './photot.jpg'
var root=document.getElementById('root');
var img=new Image();
img.src='dist/'+photot;
root.append(img)

image.png

打包报错：

image.png

解决:

根据提示我们知道webpack它不认识这种文件，需要一个Loader来解决，并且我们通过阅读文档知道file-loader就是干这个事的（https://webpack.js.org/loaders/file-loader/）

1.安装file-loader

npm install file-loader --save-dev

2.配置webpack.config.js

const path=require('path');
module.exports={
    mode:'development',
    entry:{
        main:'./index.js'
    },
    module:{
        rules:[
            {
                test:/\.jpg$/,
                use:{
                    loader:'file-loader'
                }
            }
        ]
    }
}

意思是遇到.jpg文件结尾的就借助file-loader打包(这里可配置(png,text,gif等))
打包生成的文件如下:

image.png

页面执行效果：

image.png

当然如果你想导出的文件名自己定义，和自定义导出的文件夹这也是可以的
在webpack.config.js中加上

options:{
    outputPath:'images',
    name:'img.jpg'
}
完整代码在下面

const path=require('path');
module.exports={
    mode:'development',
    entry:{
        main:'./index.js'
    },
    module:{
        rules:[
            {
                test:/\.jpg$/,
                use:{
                    loader:'file-loader',
                    options:{
                        outputPath:'images',
                        name:'img.jpg'
                    }
                }
            }
        ]
    }
}

重新导出的效果在下面:

image.png

更多关于file-loader的使用查看:https://webpack.js.org/loaders/file-loader/

3.css-loader

当我们想修改图片的样式时也是一样需要引入css-loader来解决.

3.1.安装css-loader

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

3.2.配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

3.index.js:

image.png

打包运行结果如下:

image.png

4.sass-loader

如果你想玩一些sass、less这样的预编译css当然也是可以的啦,步骤是一样的更多配置信息:https://webpack.js.org/loaders/sass-loader/

4.1安装:

npm install sass-loader node-sass webpack --save-dev
npm install style-loader css-loader --save-dev

4.2webpack.config.js配置

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }]
    }
};

4.3执行效果

image.png

5.扩展

webpack官网还提供了很多的loader，font字体文件、less文件、等处理的loader。
步骤是一样的，先安装，在配置webpack.config.js文件https://webpack.js.org/loaders/

最后编辑于：2019.07.24 11:34:35