webpack配置

Webpack初体验

什么是webpack？
webpack是一个现代的JavaScript应用的静态模块打包工具。
那么如何理解打包呢？
打包就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

接下来开始演示webpack的相关操作：
首先在使用webpack之前需要安装webpack：
因为webpack是基于node.js运行的，所以安装webpack之前需要先安装Node.js,因为我安装好了，直接看安装结果吧：

现在在终端上安装的webpack是全局安装，后面还有局部安装，后面再进行介绍；

安装好了之后创建一个练习的文件夹，然后再分别创建dist和src这两个文件夹
dist:用于存放打包好的文件
Src：存放源文件

创建main.js文件（作为项目的入口文件）和mathUtils.js（用于存放一些函数）

接下来使用webpack 进行打包：

打包成功之后发现：

dist文件夹里面多了一个bundle.js的文件，这个就是打包后的文件

使用打包后的文件，在index.html引入这个文件：

运行结果:

因为每次使用这个命令都需要输入出口和入口参数，所以很不方便，所以接下来将这两个参数写入到配置文件中，在运行的时候直接读取，创建一个webpack.config.js文件：

因为path.require(‘path’)需要依赖node包，所以需要导入node模块，通过npm init生成package.json 文件

现在不用输入入口和出口参数，直接输入webpack直接就可以进行打包了：

同样也是可以运行的

但是我们在开发的时候一般不适用webpack，而是使用npm run build,因为可能在开发的时候可能配置文件不是webpack.config.js而是其他名字，比如produce.config.js，那么需要使用的打包命令就是webpack produce。如果我要使用npm run build进行打包 ，那么我就需要把这条命令和webpack这条命令映射起来，需要在package.json文件做如下配置：
在scripts这里加入红色框中的语句

加入之后执行 npm run build语句的时候webpack会到这个package.json这里找到build这条语句，这样子就建立了映射关系

输入命令后也是可以打包的，本质上还是执行的是webpack
但是现在用到webpack是全局的，可是在项目中，我们往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题。所以通常一个项目，都有自己局部的webpack，全局的用的比较少。我们先安装好安装局部webpack：

安装好之后自动生成这个模块：

里面的webpack模块

Package.json多了这两条语句，这个是开发时依赖，也就是开发的时候需要依赖，但是运行的时候就不用用到

安装了局部webpack后我们在终端上执行webpack命令后，其实使用的还是全局webpack，想要使用局部的还得需要在进入到.node_modul，然后再使用里面的webpack；但是如果执行npm run build，它是优先在局部webpack上找，所以一旦好局部webpack的时候，它使用的就是局部webpack，这也是为什么项目开发执行的是npm run build的另外一个原因。

在上面这些案例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。对于webpack本身的能力来说，对于这些转化是不支持的。想要解决这个问题，我们需要给webpack扩展对应的loader就可以啦。
接下来开始相关的配置：
先创建好css文件：

然后我们在入口处这个css文件，等下才可以一起打包：
在这里插入图片描述

现在我们试着打包一下，看会发生什么：

毫无疑问出错了，出错的地方正是我们刚才依赖的css文件，这个错误告诉我们加载style.css文件必须有对应的loader。
安装loader，这里我直接去官网查看安装步骤以及配置过程：
npm install --save-dev css-loader

在配置文件中加入这段代码
module.exports = {
module: {
rules: [
{
test: /.css$/i,
use: [“style-loader”, “css-loader”],
},
],
},};

我们发现上面这段代码中，不光是有css-loader这个loader，还有一个叫做style-loader的东西，这个是干什么的呢？现在虽然加入添加了css-loader但实际上运行的话还不能显示出效果，这是因为css-loader只是负责加载css文件，但是并不负责将css具体样式嵌入到文档中，而style-loader能将样式添加到DOM中，所以我们还需要添加一个style-loader帮助我们处理。
安装style-loader：
npm install --save-dev style-loader

配置文件：

注意：这里的"style-loader", “css-loader”
位置是不能够互换的，有多个loder的时候，执行顺序是从右向左的，先加载后再渲染。
最后我们重新打包后看有没有效果：

打包之后出现以上错误，我找了一下发现是版本的错误，因为在官网下载的是最新的版本，但是webpack的版本是3.6.0的，所以不匹配，我重新安装，改成这两个版本：

接下来再打包一次：

成功打包好了，运行一下看有没有效果：

满屏的绿色，说明我们成功了