webpack基本使用

一、认识webpack

文档：https://www.webpackjs.com/concepts/

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具

1. 模块化：前端发展到了今天已经走向模块化，目前使用前端模块化有以下方案：AMD、CMD、CommonJS、ES6。在ES6之前，我们想要进行模块化开发，就必须借助其他工具，并且在通过模块化完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。而webpack其中一个核心功能就是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系，而且不仅仅是js文件，我们的css、图片、json文件等等在webpack中都可以被当作模块来使用。
2. 打包：可以将webpack中的各种资源进行打包合并成一个或多个包（Bundle）。并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5，将TypeScript转成JavaScript等等操作。

二、webpack的安装

1. webpack首先是依赖node环境的，需要先安装node.js
2. 使用npm全局安装webpack npm install webpack （不推荐，不利于控制webpack版本，比如从github上clone的项目在本地用webpack打包，项目和本地全局安装的webpack版本不一致可能就会出错，所以在当前项目中再安装指定版本会更加靠谱）
3. 局部安装webpack（推荐）：
   切换路径到对应目录->npm install webpack --save-dev (--save-dev是开发时依赖，项目打包后不需要继续使用的)

为什么全局安装后还需要局部安装？
在终端直接执行webpack命令，使用的是全局安装的webpack，当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

三、webpack的起步

在模块化开发中，项目中往往至少包含两个文件夹，dist和src文件夹。开发中写的源码会放在src文件夹里，而dist文件夹中存放的是将源码打包后生成的代码，项目最终发布的时候只需将dist文件夹放在服务器上即可。例如：我们在util.js中定义了两个方法，并将其暴露出去

function add(arg1, arg2) {
  return arg1 + arg2
}

function mul(arg1, arg2) {
  return arg1 * arg2
}
export {
  add,
  mul
}

在main.js中引入并使用这两个函数（main.js是项目的入口文件）：

import {add,mul} from './util.js'
console.log(add(20, 30))
console.log(mul(20, 30))

这个时候我们在html文件中引入js文件肯定不能将两个文件直接引入，因为浏览器是无法解析这种互相引用的模块化的代码的。所以需要使用webpack对源代码进行打包：npx webpack .\src\main.js .\dist\bundle.js，再由html中引入打包最终生成的bundle.js文件。

四、webpack的配置

1. 初始化 npm： npm init -y，会生成package.json文件，来管理该项目本地安装的npm包，用于定义这个项目所需要的各种模块，以及项目的配置信息。

• 在该文件的scripts字段中可以定义自己的执行脚本，比如我们添加一条"build":"webpack"，这样我们在命令行中执行npm run build命令时，就是去执行build缩写对应的命令，实现打包。如果每次执行都需要敲一长串命令，可以使用scripts脚本简化命令。
• scripts脚本在执行时，会按照一定顺序寻找命令对应的位置：首先会寻找本地的node_modules/.bin路径中对应的命令，如果没有找到，会去全局的环境变量中寻找
  详细配置：http://javascript.ruanyifeng.com/nodejs/packagejson.html

2. 创建webpack.config.js文件来编写webpack的配置，该文件名称是固定的，基本配置：

const path = require('path');   //node动态获取绝对路径

module.exports = {
  entry: './src/index.js',   //入口
  output: {         //打包的目标文件
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')  //路径的拼接
  }
};

详细配置：https://www.webpackjs.com/guides/

五、loader的使用

1、什么是loader

• loader是webpack中一个非常核心的概念
• webpack用来做什么呢?
  • 在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间 相关的依赖。
  • 但是,在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将jsx、.vue文件转成js文件等等。
  • 对于webpack本身的能力来说，对于这些转化是不支持的。但是给webpack扩展对应的loader就可以了。

2、loader使用过程:

• 步骤一：通过npm安装需要使用的loader
• 步骤二：在webpack.config.js中的modules关键字下进行配置
• 步骤三：使用webpack打包（注意文件只有在入口文件中引用才会打包到出口文件）

大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法： https://www.webpackjs.com/loaders/

六、webpack中配置vue

存在问题
--------------------占坑-----------------------

• 我们希望在项目中使用vue.js，那么必然需要对其有依赖，所以需要先进行安装npm install vue --save，（因为我们后续在实际项目中也会使用vue，所以并不是开发时依赖）
• 然后需要在js文件中引入vue，import Vue from 'vue'

正常运行之后，我们来考虑另一个问题：
如果我们希望将data中的数据显示在界面上，就必须修改index.html，如果我们后面自定义了组件，也必须修改index.html来使用组件。但是我们肯定不希望在开发中频繁地手动修改html模板，这该怎么解决呢？
这个时候我们可以定义一个template属性，将要展示的内容写在这里面。这样，项目编译之后就会将template中的内容替换到el属性挂载的div中。所以在实际开发中，这个index.html页面一般是不需要做任何改动的，我们做的实际上是一个SPA（单页面应用）。
--------------------占坑-----------------------

七、plugin的使用

1、什么是plugin

• plugin是插件的意思，通常是对于某个现有的架构进行扩展。
• webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等。

2、plugin和loader的区别

• loader主要用于转换某些类型对的模块，它是一个转换器
• plugin是插件，它是对webpack本身的拓展，是一个拓展器

3、plugin的使用过程

• 首先通过npm安装需要使用的plugins（非内置的插件）
• 然后在webpack.config.js中的plugins配置插件

八、搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果，方便我们在开发过程中进行测试。
不过它是一个单独的模块，在使用之前需要先安装它：npm install --save-dev webpack-dev-server
之后我们需要在webpack.config.js中配置一下：

由于我们上面是在本项目中局部安装的webpack-dev-server，所以无法直接使用命令行启动本地服务器。我们可以通过在package.json文件中编写脚本的方式解决：

这样我们可以在本项目路径下使用npm run dev，打开本地服务器，并且实现热部署。当我们需要将项目部署上线时，是不需要这个本地服务器的配置的，可以删掉，并通过npm run build打包得到目标文件。

既然这样，我们就可以将配置文件分离，对于开发、测试、生产环境下使用不同的配置。