带你温习一下 webpack 配置

前言

你知道 node、webpack 和 npm 之间的关系吗？

首先来介绍一下 node、webpack 和 npm 的有什么样的关系。

我们知道 webpack 是对我们所开发的 html、css、js 等模块化开发的文件进行一个整体的打包，然后更好地让我们发布。但是要想使用 webpack 进行打包，那么就得依赖于 node 的环境。

同样 node 环境为了能够执行许多的代码，就需要安装对应依赖的包，这就需要利用 npm 工具进行安装。

npm 的全称即是 Node Packages Manager。

webpack 执行的出入口文件

问题一：那么我们为什么需要 webpack 的出入口文件呢？出入口文件有什么用呢？

入口文件就是让开发人员提供要打包的的一个主文件。

模块化依赖中，这个主文件会依赖另外的文件，webpack 可以根据你的主文件找到其中依赖的其他的文件，于是 webpack 便将这些所有的文件打包到一个 js 文件中(这个文件大部分命名为 bundle.js)。

出口文件便是我们所说的打包成功后生成文件(bundle.js)。

问题二：那么如何使用去使用 webpack 去打包文件？又如何去配置出入口文件呢？

利用 webpack 打包文件最直接的方式便是通过执行命令行直接打包文件，如图：

显然通过这种方式最直接，直接就可以将开发代码打包好，但是不好的地方便是我们输入的命令行太长，如果每次打包都需要输入那么长的命令行显然是不太合理，也不是我们应该干的。

那么就需要第二种方式，需要一个配置文件对该出入口文件提供说明，那么该配置文件就是 webpack.config.js，那么如何配置呢？

首先可以利用npm run init 命令导入创建一个 package.json 的文件。接下来就可以在对应项目的 webpack.config.js 的文件中配置对应的出入口文件

// 要使用node的内容需要使用 npm init进行导入创建package.jsonconst path = require("path");
module.exports = {  // 要打包的文件入口  entry: './src/main.js',
  // 要生成的文件，最好是个对象，有多个内容  output: {    path: path.resolve(__dirname,'dist'),    filename: "bundle.js"  }}

说明：该配置文件中用到了 CommonJS 的语法规范，利用 require 进行导入 path，module.exports 导出相关内容。entry 中对应的便是入口文件，而 output 中 path 便是要要导出的文件的绝对路径，其中“__dirname”是当前文件夹所在的绝对路径，然后在此路径上拼接 dist 目录，filename 便是生成的文件名。

webpack 的核心 loader

webpack 的 loader 是 webpack 中的核心，如果只有使用对应的 loader 才能导入对应的静态资源，比如 css-loader、style-loader、less-loader、vue-loader、file-loader、url-loader 等

css-loader、style-loader、less-loader

在 JS 的文件中如果引用了 CSS 的文件，那么就需要将 css-loader 和 style-loader 进行配置，css-loader 可以帮助我们处理 import / require（）但是不能将文件中的存在的样式显示出来，这时需要 style-loader 才能将解析样式，将要加载的样式在页面呈现出来。

CSS 样式文件：

module: {    rules: [      {        test: /\.css$/,        use: [          { loader: "style-loader" },          { loader: "css-loader" }        ]      }    ]}

如果要引用 less 的样式文件，则需要在 css-loader 和 style-loader 样式的基础上加上 less-loader，使用 less-loader 会将 less 的文件编译成 css 文件，这样就可以处理 less 的样式文件。

less 样式文件：

module: {    rules: [      {        test: /\.less$/,        use: [{          loader: "style-loader"        }, {          loader: "css-loader"        }, {          loader: "less-loader"        }]      }    ]}

url-loader、file-loader

url-loader 和 file-loader 的是当文件资源中有引用图片等资源时，会使用这两个 loader。

module: {    rules: [      {        test: /\.(png|jpg|gif)$/,        use: [          {            loader: 'url-loader',            options: {              // 当加载的图片，小于limit时，会将图片编译成base64字符串的格式              // 当加载的图片，大于limit时，会需要file-loader模块进行加载              limit: 8192, // 8kb
              // 对图片进行自定义的修改              name: "img/[name].[hash:8].[ext]"            }          }        ]      }    ]}

说明：limit：是对对应的图片资源进行限制，如果大于 limit 中的值，则会需要 file-loader 来处理这些图片，会将这些图片重命名加进开发的资源中，也就是说 webpack 会将大于 limit 的图片也打包，如果小于 limit 的值，则会将图片编译成 base64 的字符串格式加载。

name: name 的属性就是可以让开发对大于 limit 的图片打包命名，在上述代码中会将大于 limit 的图片会在打包的总的目录下(/dist)生成一个 img 的目录，而生成的图片的名字是自己原来的名字[name]+随机生成的 8 位的哈希值[hash:8]+不同图片的扩展名[ext]。

file-loader 需要使用以下代码自己安装（以上的的 loader 也可以通过此方法安装），上述在在使用 file-loader 时不需要配置，只需要将需要的 file-loader 安装好即可，因为配置了 url-loader 之后，file-loader 可以主动处理对应图片资源：

npm install file-loader --save-dev   // 无版本，安装最新版本npm install file-loader@3.0.1 --save-dev   // 安装需要的对应版本

vue-loader

vue-loader 的作用就是对以扩展名为.vue 的文件进行加载编译。

module: {    rules: [      {        test: /\.vue$/,        use: [          "vue-loader",        ]      }    ]}

在使用 vue 模块化开发的的过程中，难免会需要使用.vue 的文件，这样就需要配置一个 vue-loader。

webpack 的插件

插件一：HtmlWebpackPlugin

这个插件的作用就是帮助你打包 html 文件，我们都知道创建 Vue 项目的创建时需要有个 index.html 页面作为页面显示的一个入口，当然我们打包的时候也需要将此文件打包到要发布的 dist 文件夹下。首先可以使用npm install html-webpack-plugin --save-dev安装需要的插件。接着使用下面的方法进行配置：

// 导出需要用的html-webpack-plugin插件const HtmlWebpackPlugin = require("html-webpack-plugin")
plugins: [    // 把index.html放入到要发布的包中    new HtmlWebpackPlugin({      template: 'index.html'    })]

插件二：UglifyjsWebpackPlugin

UglifyjsWebpackPlugin 插件可以帮助我们将生成的 bundle.js 代码进行丑化，也就是把我们的生成的 JS 代码简化，当然开发过程中我们不会进行该操作，毕竟有时候需要看看生成的代码，但是在最后的打包发布会将最后生成一份简化的代码，毕竟这样占用的空间比较小。在未进行简化之前的生成的 bundle.js 中的代码是这样的：

那么使用该插件之后进行简化之后的 bundle.js 代码就会变成这样：

使用该插件的方法如下：首先安装使用npm install uglifyjs-webpack-plugin --save-dev安装该插件。接着在 webpack.config.js 的配置文件中添加如下配置：

  plugins: [      // 丑化JS，占用更小的空间      new UglifyJSWebpackPlugin()  ]

webpack 的搭建本地服务器

在我们开发代码的过程中我们会不断的修改完善我们的代码，但是只有打包后才可以显示我们修改后的内容，这样就会导致我们会频繁的进行打包运行，为了解决这个问题，webpack 为开发人员提供了一个本地开发的服务器，可以帮助我们自动实时刷新显示我们修改后的代码的结果。让我们可以在本地的服务器上进行运行，不需要频繁的打包便可以直接运行，只需要到发布时打包一次即可。使用方法如下：首先使用npm install webpack-dev-server --save-dev安装搭建使用本地服务器的环境。然后就接着在 webpack.config.js 中进行对这个服务器的配置：

  devServer:{    contentBase:'./dist',    inline:true // 页面实时刷新  }

说明：contentBase: 该属性的作用就是说明为哪个文件文件夹提供本地服务。inline: 值为 true 时，页面实时刷新，否则不会刷新。