Webpack4.0基础教程三：安装简单的loader解析

webpack中，有一种操作就是在“.js”文件中引入非javascript资源，所以在将其打包的过程中，我们需要某些loader解析器对相关的资源进行解析。

首先我们先来看看引入css资源：

安装style-loader和css-loader两个loader:npm install --save-dev style-loader css-loader

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': './src'
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

这个时候我们就可以往入口文件(index.js)中import './style.css'。现在，当该模块运行时，含有css字符串的<style>标签，将被插到html文件的<head>中。废话不多说，实栗说话：

/src/style.css:

.hello {
  color: red;
}

/src/index.js

import './style.css'

我们对index.js进行打包：npm run build，便在dist目录下产生了bundle.js

为了验证我们的样式是否已经打包成功，我们在dist目录下创建一个index.html文件，并将bundle.js文件引入进来：
/dist/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webpack_all</title>
</head>
<body>
  <p class="hello">hello world</p>
  <script src="./bundle.js"></script>
</body>
</html>

这个时候我们看到在页面上呈现红色字体的“hello world”：

Webpack4.0基础教程三：安装简单的loader解析

小伙伴可能会说：“这不对啊，明明之前说css文件中的样式将会通过style标签插入到html文本中，但是上面的index.html只是将bundle.js插入进去而已。”

别急，上图说话：

Webpack4.0基础教程三：安装简单的loader解析

看到没有，当我们在浏览器中打开该index.html文件，则会发现包含内容的style标签已经被插入到页面中了。也就是说，通过style-loader和css-loader对入口文件进行打包之后，我们可以通过在页面中引入bundle.js的方式通过bundle.js来插入style标签。（之后有时间想研究一下其中的原理，小伙伴们有知道的可以分享一下哦，想想大概也就是通过js来创建style标签，然后插入）

那如果我们想要导入图片呢？这个时候我们就可以用file-loader。

npm install --save-dev file-loader

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': './src'
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
}

现在，当你 import MyImage from './my-image.png'，该图像将被处理并添加到 output 目录，并且_ MyImage 变量将包含该图像在处理后的最终 url。当使用 css-loader 时，如上所示，你的 CSS 中的 url('./my-image.png') 会使用类似的过程去处理。loader 会识别这是一个本地文件，并将 './my-image.png' 路径，替换为输出目录中图像的最终路径。html-loader 以相同的方式处理 <img src="./my-image.png" />。

现在我们向项目中添加一个图像：

现在我们在/src目录下面添加一张图片：

/src/Hydrangeas.jpg：

Webpack4.0基础教程三：安装简单的loader解析

在index.js中导入该图片：

import Icon from './Hydrangeas.jpg'

现在我们只是将图片导入进来并没有将它使用，故而我们还要添加以下的代码：

function component() {
  let element = document.createElement('div');

   // 将图像添加到我们现有的 div。
   let myIcon = new Image();
   myIcon.src = Icon;

   element.appendChild(myIcon);

  return element;
}

document.body.appendChild(component());

然后打包：npm run build

打开index.html，呈现以下的页面：

Webpack4.0基础教程三：安装简单的loader解析

实际上，在打包的过程中我们也把该图片打包到出口目录中，如下：

Webpack4.0基础教程三：安装简单的loader解析

只不过图片的名字已经改成了随机串，同时页面中引用的图片也是打包后的这张图片，如下：

Webpack4.0基础教程三：安装简单的loader解析

这样来说，其实我们也就可以在页面中引用这张图片，不过有一个问题：我们每次打包完之后图片的名称都不一样，也就说如果我们需要在页面中直接引用该图片，我们就需要每次改变在页面中引用的图片名，这是特别麻烦的一件事。有了问题就需要解决，不过这个问题我们把它放到讲plugin（插件）的时候再来解决。

现在我们已经将普遍会用到的两种基本的资源通过loader来进行相应的解析操作，但是各位小伙伴们可能没有发现，就是我们之前配置的babel转码在webpack中有用到吗？对于这个问题，我们先来看看被打包后的文件bundle.js：

Webpack4.0基础教程三：安装简单的loader解析

从上面的图片可以看到有Symbol的字串，小伙伴们会很肯定地觉得webpack打包的时候并没有使用我们之前的配置对代码进行相应的转码。不过我们不应该这样看，因为我们目前的配置确实不能将Symbol进行转码，要对它进行转码还需要配置其他的一些插件。不过实际上我们也确实没有对代码进行转码处理，如果小伙伴想要验证它没有转码，很简单，就是在我们的路口文件中添加“let arr = [1, 2];console.log([...arr]);”,然后在打包之后我们在打包后的文件中搜索console.log找到我们上面console.log转码后的部分，然后就能看到了，小伙伴们可以去试试，这里我们就不演示了。

接下来我们来了解下如何在打包的时候对代码进行相应的转码：

首先我们要安装babel-loader包：npm install --save-dev babel-loader

然后在webpack.config.js中添加babel-loader规则：

   module: {
    rules: [
	...
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
      }
    ]
  }

这里我们先打断一下，我们先来看看官方是怎么做的：

Webpack4.0基础教程三：安装简单的loader解析

上面是说还需要安装babel-core包，该包是babel的核心依赖包，babel的核心api都在这里面。

废话就不多说了，我们继续我们之前的操作，我们来看看没有安装babel-core能不能成功（很显然是不能的，毕竟官网要下载babel-core包，也就说明babel-loader是建立在babel-core的基础上来实现的），先来看看栗子：

先在我们的入口文件，也就是index.js上，我们加入两条语句：

let arr = [1, 2, 3];
console.log([...arr]);

然后我们打包生成bundle.js文件，在该文件中查找console.log:

Webpack4.0基础教程三：安装简单的loader解析

咦？？？语句已经被转码了，官网耍我们吗？？？

别急，小伙伴们记得之前我们为了测试还安装了babel-cli吗，其实目前是这个在起作用，不信我们就把这个包给删了。我们先把package.json中相应的模块删除，然后删除node_modules文件夹，然后再npm install一下。（个人不喜欢用uninstall来删除包，因为之前有过几次在通过这个命令删除包之后，发现项目就出问题了）

完成上面的步骤，我们进行打包，发现出问题了。。。：

Webpack4.0基础教程三：安装简单的loader解析

呜呜呜。。。以后还是别太高看自己，官方不会骗人的，只能说你能力还不足而已。。。

然后我们再把babel-core进行安装之后就和刚刚转码是一样的，另外为了方便检测我们仍然把babel-cli重新安装，至于为什么babel-core和babel-cli都可以，其中的原理小伙伴们可以自行去研究一下。

之前在网上看到别人写的只安装webpack和babel-core就能进行转码简直就是扯淡，连最基本的babel-preset-XX都没有，希望大家都尝试去看看官方文档，以官方为准，或者自己多动手试试，不要被网上一些自以为是的人写的文章所误导。

Webpack4.0基础教程三：安装简单的loader解析

相关推荐