webpack4.0从入门到遁入空门

柔情只为你懂 2022-05-24 05:54 205阅读 0赞

webpack目前已经更新到4.8.3了，5.0指日可待，所以这篇文章后期应该会不停的修改更新webpack的最新语法

### 什么是webpack ###

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

这是官网给出的解释,实际上就是一个类似于gulp的模块化管理和打包工具，把一些浏览器不能支持的语法解析为浏览器可以支持的语法，同时可以压缩打包代码，让写代码变得容易起来。

###  ###

如何安装webpack

webpack仍然是基于nodejs环境运行的，所以直接npm install webpack -D和npm install webpack-cli -D就可以了

*注意不要将webpack下载到全局，后期会出问题*

###  ###

如何使用webpack

###     ###

当你下载好一切的时候我们就可以开始使用它了。 首先，需要创建一个文件夹，里面放你的项目，在与你的项目同级的文件夹里面创建一个js文件，命名为**webpack.config.js**,这个文件就是webpack的配置文件，整个webpack的配置也是在这里面完成的

###  ###

webpack入门开始

###     ###

由于webpack的语法规定，我们所有的配置都写在

module.exports=\{

这个大括号里面，语法有没有很眼熟？没错，就是nodejs模块化抛出的语法，你问我为什么要这样写？我也不知道webpack的语法规定

其中的第一个参数为*mode*,是决定webpack模式的关键，不写的话不会报错，但是会提醒，建议加上，参数一共有两项

> development 开发环境配置，如果出现错误，会告诉你错在了第几行代码上

> production 线上环境配置，不会报错

我们先把这个参数写上

module.exports=\{

mode:'development'//作为一个励志成为程序员的码农当然需要的是开发环境了，注意用字符串格式

第二个参数是入口文件的路径*entry*，就是我们项目中的入口文件，我在项目的文件下创建了一个*index.js*作为我的入口文件，加上入口文件的配置

module.exports=\{

mode:'development'//作为一个励志成为程序员的码农当然需要的是开发环境了，注意用//字符串格式

entry:'./src/index.js'//这个地方写入口文件的路径，根据自己文件夹的结构写！

第三个参数是出口文件的配置*output*,就是当你一切都配置完成之后，webpack会帮你把一切都打包好，这时候它需要知道你打包后的文件夹需要放在哪里，要起什么样的名字，*path*里面写打包好的文件要放的位置，**一定要写绝对路径**,*filename*里面写你要给重新打包过的js起的新名字

const path = require('path');//1

module.exports=\{

mode:'development'

entry:'./src/index.js'//这个地方写入口文件的路径，根据自己文件夹的结构写！

output:\{

path:path.resolve(\_\_dirname,'littleDream')//2

filename:'\[name\].\[chunkhash:6\].js'//3

> 1.由于paht的地方必须要放绝对路径，所以我引了nodejs的这个内置模块，把我的路径转换为绝对路径

> 2.这个路径时我希望打包后的项目出现在的位置，littleDream这个文件夹webpack会帮我们创建好的

> 3.里面的这个名字是随意起的，\[name\]是一个变量，指的就是我本来js文件的名字,\[chunkhash:6\]是我为了防止缓存，随机生成了6位的随机数放在了文件名的后面，这个参数你也可以写为index.js,随意啦 下一个参数*devServer*也是一个对象，对象里面配置了一些开启本地服务需要配置的参数，和*gulp*的语法极其相似,里面主要的配置有三个

######  ######

port

配置端口号，一般都是4,6,8开头的四位数字

#####  #####

open

启动本地服务之后打开自动打开浏览器，打开的是你的默认浏览器

#####  #####

setup

拦截中间件，我们在写前端数据的时候，很容易遇到一些向后台发送*ajax*请求的数据，这个属性就可以满足我们的需求,具体代码如下

devServer:\{

port:8000//这个自己随意的

open:open//不写的话默认就是false

setup:function(app)\{

app.get('/data',(req,res)=>\{//这里拦截了前端get方式的路由data,并且返回了一个json数据

res.json(\{

name:'小梦',

age:18

\})

一个项目当中免不了要遇到各种类型的文件，webpack的宗旨就是将一切都模块化，所以需要一个配置将不同的后缀的文件匹配不同的编译模板，使其能够成功的模块化，有一点点绕对不对，我们边看代码边继续说

module: \{

rules: \[\{

test: /\\.vue$/,

use: 'vue-loader'

\}, \{

test: /\\.js$/,

use: 'babel-loader'

\}, \{

test: /\\.css$/,

use: \['style-loader', 'css-loader'\]//css是用来解析的，style是把css文件从js里面拿出来，放在html里面，从右向左解析

\}, \{

test: /\\.(png|jpe?g|svg)$/,

use: 'url-loader'

\}\]

*module*就是模块的意思,*rules*就是规则,规则中规定了什么类型的文件要用什么模板来编译，*test*的值是一个正则表达式，如果符合这个正则表达式，*webpack*就会用*use*里面的*loader*来解析这个后缀名的的文件,他的强大之处在于可以将任何语言转为Javascript,也可以将静态资源转换加载出来,但不同类型的文件是需要用不同类型的*loader*来加载的,

> *vue*后缀的文件需要用*vue-loader*来解析

> *js*后缀的文件用*babel-loader*来解析,本篇文章中使用的都是ES6的语法，一些浏览器还不支持，所以使用了*babel-loader*将ES6语法解析为ES5的语法

> 图片的后缀名有很多，我只是写了几个常见的后缀名,*url-loader*可以将较小的图片转换为*base64*编码的格式

> *css*后缀的文件比较特殊,因为在*webpack*中，所有的*css*是可以直接在*js*中引用的,所以我们需要两个*loader*来帮助我们,第一个*css-style*帮助我们解析css文件,另一个*style-loader*把css文件从JS文件里面拿出来，放在HTML里面去,*webpack*在解析的时候会从右向左解析,先解析*css-loader*,再解析*style-loader*,顺序改变的话就会出错

金无赤足，人无完人。*webpack*已经是一个很强大的前端打包工具，可还是有一些无法实现的功能，这时候就需要借助我们强大的插件**plugins**了。 先简单的给大家介绍一个插件*html-webpack-plugins*,这个插件是用来解析HTML的，里面的一些常用参数如下:

template: './index.html', //源文件

filename: 'index.html', //编译后的文件名

minify: \{

minimize: true, //压缩代码

removeComments: true, //移除注释

collapseWhitespace: true, //去掉空格

minifyCSS: true, //压缩行内css

minifyJS: false //压缩行内js

> *template*里面写你要打开的的页面的路径和名字

还有一个插件的名字是*vue-loader*,这个插件是用来编辑*vue*代码的

关于插件的使用

所有的插件在使用的时候都需要先利用*require*引入，然后*new*一下,具体用法如下

const Vue = require('vue-loader/lib/plugin');

const htmlWebapckPlugin = require('html-webpack-plugin');

使用的时候需要全部写在*plugins*里面

plugins:\[

new Vue(),

new htmlWebpackPlugin(\{

template:'./index.html',

filename:'index.html',

minify:\{

minimize:true,

removeComments:true,

collapseWhitespace:true,

minifyCSS:true,

minifyJS:true

\})

到这里，我们的基本配置就完成了,我们来看一下刚刚都写了那些代码

> 到现在为止，已经完成了webpack4.0从入门到放弃的全部内容，这些代码已经可以完成一个简单项目的打包压缩  
>

###  ###

如何运行webpack？

###     ###

最基本的配置已经完成了，可是没有项目，所以也看不出来效果，我们来写一个简单的项目来运行一下这个*webpack*; 与*webpack.config.js*同级的目录中创建一个文件夹为*src*,这个文件夹就是我们的项目,然后在*src*文件夹里面创建一个js文件，命名为*index.js*,在同级的目录下再创建一个*index.html*,在*index.html*里面写一个id为*app*的div盒子,之后与*index.html*同级的目录下创建一个文件夹,命名为*css*,在*css*文件夹中创建文件*style.css*,然后在css文件中写一些简单的样式,然后在*src*的文件夹下创建一个vue格式的文件,命名为*APP.vue*,里面写上

<div>我是一个最简单的项目\{ \{name\}\}</div>

</template>

export default \{

data:function()\{

return \{

name:'hello word'

</script>

然后在*index.js*里面引用就可以了,index.js里面代码如下

import style from './css/style.css';

import Vue from 'vue';

import APP from './APP.vue';

new Vue(\{

el:'\#app',

render:h=>h(APP)

\});

一个最简单的项目就完成了,文件夹的结果有点不太清晰？我们直接看下面:

5.21

src

index.js

index.html

APP.vue

css

style.css

webpack.config.js

一个最基本的结构和项目就完成了,在webpack.config.js的部分打开*cmd*命令窗口直接运行*webpack*就可以了,运行完毕之后,再运行*webpack-dev-server*等本地服务起来之后浏览器窗口就会自动打开了。

关于*webpack*的基本配置到这里就算是结束了,如果想要学习更多关于*webpack*的知识请移步官网,最后面演示的时候写了一些vue的代码可能之前没有接触到,不要着急，马上就会更新，期待您的继续关注,文章中所有提到的*loader*和插件都需要npm下载模块 如果发现了错误的地方,恳请您指出来,对本篇文章有什么建议和批评请不要吝啬，我真诚的期待您的只言片语。