webpack的使用与理解

webpack的使用和理解

webpack官方概念： webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

• 理解
  简单来说，webpack是一个项目打包工具，它可以让我们进行模块化开发，解决模块间的依赖关系，最后将各个模块资源整合在一起生打包成一个或多个包（bundle），并且在打包过程中还可以进行图片压缩、less转成css、ES6转ES5、TypeScript转成JavaScript等文件处理。

• webpack的作用
  webpack作用是：处理开发过程中的js代码，能够让我们进行模块化开发，同时解决js间的相互依赖。

• loader的作用
  在开发中，不仅要处理js代码，还需要加载一些图片文件，css文件，.vue、.jsx转js文件，less、scss转css文件，Es6转Es5等操作，webpack本身是不支持的，因此需要使用对应的loader对webpack进行扩展。

• 如何模块化使用css文件
  css文件正常操作是将css文件在header中link引入，这种用法并不是模块化开发，而且如果文件多个的时候频繁引入并不优雅，但是不引入的话webpack打包时会对依赖的文件进行处理，不引入css就没有依赖关系，webpack打包时就会将其忽略。为了解决这个问题，打入一个总的文件里，使用时直接将这个文件引入就行了。

  用法： 将css文件在main.js入口文件中直接require(’./css/style.css’)；
  css-loader只负责css样式文件的引入，并不负责渲染，想要把css渲染到DOM上还需要用到style-loader。（先使用css-loader再使用style-loader，加载顺序是从右到左）

• url-loader和file-loader
  webpack在打包时options里面有limit属性，默认大概是8k，当要加载的图片小于limit会直接用url-loader打包编译成base64的格式，如果大于其值就会使用file-loader进行打包编译（加载），此loader只需要安装就行，不需要进行单独配置。

• 打包出来的文件是hash值的原因
  默认打出来的文件都在一个目录下，有可能不同代码文件夹下有相同的图片名称，默认32位hash值的原因是为了防止打包后的文件名称重复而导致的文件加载出现问题。

options: {
    limit: 8192,
    name: 'img/[name].[hash:8].[ext]'
}

其中.[ext]是原图片的扩展名。

• Es6转Es5 babel-loader
  将Es6或者更新的语法转换成浏览器识别的Es5语法。

• webpack使用环境(前提)
  webpack的正常运行依赖于node环境，而node环境为执行很多代码，又必须包含各种依赖包，为了管理node环境里的各种包，npm（node packages manager）出现了。

• webpack安装

1. 全局安装（任何终端里直接使用webpack都是全局的）

npm install webpack -g

2. 局部安装（package.json中script用的webpack就是局部的）

npm install --save-dev webpack
npm install --save-dev webpack@<version>

（打包后不需要继续使用）

本文地址：https://blog.csdn.net/EnjoyLearning_zn/article/details/109258327