webpack4使用教程之loader

1 css-loader

1.1 新建文件

使用cssloader需要先创建一个css文件，这里在css目录下新建一个normal.css文件，整个项目所有的代码都放在了src目录下。
在这里插入图片描述

1.2 在入口文件里添加引用

在这里插入图片描述
在main.js文件里添加对css文件的引用。

1.3 安装和配置css-loader

执行下面两个命令：

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

上面两个命令都要执行。然后在webpack.config.js文件里添加下面的配置：

module: {
    rules: [
      {
       test: /\.css$/,
        // css-loader只负责将css文件进行加载，如果还有使用还需要style-loader
        // style-loader负责讲样式添加到dom中
        // 使用多个loader时，顺序是从右向左读的
        use: [ 'style-loader','css-loader' ]
      }
    ]
  }

然后执行npm run dev 进行编译，就可以了，然后在浏览器中打开要访问的页面，就可以了。
在这里插入图片描述

2 less-loader

有的时候，我们会创建less文件，来设置样式，

2.1 创建文件

接着在css目录下创建special.less文件，内容如下：

@fontSize:50px;
@fontColor:orange;
body{
  font-size: @fontSize;
  color: @fontColor;
}

2.2 在入口文件里添加引用

在这里插入图片描述

// 3 依赖css文件
require('./css/normal.css');
// 4 依赖less文件
require('./css/special.less');

2.3安装和配置less-loader

npm install --save-dev less-loader less

然后在webpack.config.js文件里添加下面的配置:

{
          test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
}

然后执行npm run dev，在浏览器里访问页面可以看到了。
在这里插入图片描述 ### 3 url-loader
如果我们想在css文件里引用图片，就需要使用url-loader。首先我们需要准备一张图图片，这里我放在了src目录下的img文件夹下。然后修改normal.css文件，设置页面的背景图片。

body {
  background: url("../img/huluwa.png");
}

3.1 配置和安装url-loader

执行下面这个命令安装url-loader。

npm install --save-dev url-loader

然后在webpack.config.js文件里添加：

 {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }

limit是限制使用的图片的文件的大小，如果不超过这个就会将图片直接转成base64的字符串。然后执行npm run dev 就可以了。

3.2 安装和配置file-loader

当图片文件的大小超过了上面设置的值，再执行编译命令，就会提示报错，这个时候需要安装file-loader。这个时候再执行编译命令，就发现没有报错了，但是打开浏览器发现图片还是显示不了，F12打开看以后，发现它引用的是一个文件，而不再是一个base64的字符串，
在这里插入图片描述也就是说它找文件是在index.html文件的所在的目录去寻找的图片文件，但是实际上这个文件是在项目的dist目录下，
这个文件就是我们引用的文件，它的名字是webpack用哈希算法生成的，是为了防止文件重名。
这个时候找不到文件，需要在webpack.confgi.js文件里添加下面这个属性，设置公共路径：

publicPath: "dist/"

在这里插入图片描述
这样，涉及到的所有url都会在前面加上dist，如下图，这样显示就没有问题了。

3.3 设置文件名

但是这样也有一个问题，就是它显示的url文件名，我们并不知道它是啥，可以通过下面的配置来设置文件名。
在这里插入图片描述

name:'img/[name].[hash:8].[ext]'

这行代码的意思就是将文件打包到dist目录下img文件夹，并用原来的文件名加上8为hash值，使用原来的扩展名。

3 ES6语法处理

webpack打包的js文件里，并没有将es6的语法转成ES5的语法(比如说我们可以在打包的文件里搜到const 关键字)，这个时候就要使用另外一个插件：babel-loader
执行下面这个命令，这个和官网上的不太一样，这个不用再加其他的配置文件。

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

然后在webpack.config.js文件里加下面的配置：

{
        test: /\.js$/,
        
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }

然后再执行编译命令，就可以看到webpack打包的js文件里已经没有es6语法了。