写点什么

带你温习一下 webpack 配置

用户头像
IT皮皮蟹
关注
发布于: 2021 年 04 月 30 日
带你温习一下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 时,页面实时刷新,否则不会刷新。

发布于: 2021 年 04 月 30 日阅读数: 14
用户头像

IT皮皮蟹

关注

还未添加个人签名 2021.04.14 加入

还未添加个人简介

评论

发布
暂无评论
带你温习一下webpack配置