Vue学习笔记-Day6 webpack安装、配置、loader使用

webpack是一个 静态模块打包工具。主要强调 模块、打包两个重点，可以将css、less、图片等都进行模块化打包。

webpack安装

webpack依赖node环境，电脑上需要安装node，node中有很多包，所以在安装node的时候，会自动安装 npm(node package manage) 来管理这些包。

通过 npm 安装webpack：

​ 直接安装最新版本： npm install webpack -g // -g代表全局安装

​ 指定版本： npm install webpack@3.6.0 -g

也可以通过 yarn 进行安装：yarn add webpack

npm和yarn都是包管理工具，但是由于npm刚被发布出来的时候，使用性能不佳，不好用，所以facebook推出了yarn，但是现在随着npm的逐步优化渐优，所以使用npm和yarn的人都很多，具体选择那个，看自己的习惯

配置

定义配置文件

当然，在使用path的时候，由于我们的项目里没有path这个包，所以需要引入这个包，通过 npm init实现自动初始化

简化运行的代码：每次运行的时候，都需要执行 webpack xx.xx十分的不方便，为了简化运行指令，这时候可以在package.json中进行配置

将webpack映射到build，在执行 npm run build的时候，会自动去script标签中找build，然后执行

局部安装webapck

当我们运行别人的代码时，全局安装的webpack可能不支持别人代码的版本。因此我们可以采用局部安装，代表该webpack只在当前项目中有用

npm install webpack@3.6.0 --save-dev

–save-dev（后面的dev是指开发依赖，如果不加上的话，是指运行依赖），当运行成功后，会在 package.json文件的 devDependencies中看到安装的包信息。

Loader使用

webapck本生不具有代码的压缩以及解析等功能，如果我们有需求，可以通过安装相关功能的loader来进行解析等。

大概步骤： 安装 -> 配置（module中）-> 配置依赖（将所有的资源作为模板导入到main.js）

1 css/less

安装loader：

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

这里需要安装两个loader，css-loader只负责将css文件进行加载，加载完成后，并没有起效果，我们还需要style-loader将模块的导出作为样式添加到DOM中

在webpack.config.js中进行配置。

 module: {
  rules: [
    {
      test:/\.css$/,  //正则表达式匹配css结尾的
      use:['style-loader','css-loader'] //这里的顺序不能改变，因为他的执行顺序是从右到左进行解析的
     },
    {
      test: /\.less$/, //正则表达式匹配 .less文件
      use: [
        {
          loader: 'style-loader',
        },
        {
          loader: 'css-loader', 
        },
        {
          loader: 'less-loader', 
        },
      ],
    },
      
  }

对less的加载经历三步：将less编译成css，将css进行模块化规范，最后将模块的导出作为样式添加到DOM中

配置依赖：

2 img

img的加载分为两种，一种是通过 url-loader进行加载，还有一种是通过file-loader进行加载。这个主要取绝于url-loader的limit配置，当图片大小 < limit 时，采用url加载，反之采用 file加载。下面也详细说了 采用url-loader和file-loader的区别

安装loader：

npm install --save-dev url-loader
npm install --save-dev file-loader

配置：

 module: {
  rules: [
  	 {
      test: /\.(png|jpg|gif|jpeg)$/i, //匹配png或者jpg、jpeg、gif
      use: [
        {
          loader: 'url-loader',//将图片加载为base64编码的Data URL
          options: {
            limit: 8192, //限制文件大小
          },
        },
      ],
    },
    {
      test: /\.(png|jpe?g|gif)$/i,
      loader: 'file-loader',// 将图片发送到输出文件，即/bist文件夹下，并且返回图片的URL地址
      options: {
        name: 'img/[name].[ext]', //图片被发送到输出文件的时候，自动以hash32为的字符串进行命名，我们可以将其进行修改，这里的话，是再bist下建立一个 img文件夹，并且使用原来的名字
      },
    }  
   ]
  }

配置完成后，浏览器就可以认识图片了

在打包后，使用的图片是 dist/img下面的，而不再是原来的src/img中的图片。因此我们需要在 package.json中配置一个 publicPath，它会为所有的url路径自动在前面加上 publicPath里面配置的路径：

3 ES6 -> ES5 Babel

目前仍然有一些浏览器不支持ES6语法，因此我们需要将ES6转化为ES5，使用babel-loader

安装：

npm install babel-loader babel-core babel-preset-env webpack

配置：

module: {
  rules: [
 	{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-proposal-object-rest-spread']
        }
      }
    },
  ]
}

安装完成后，所有的js文件夹中的ES6语法，再打包时，会自动转化为 ES5语法