webpack4.0从入门到遁入空门 柔情只为你懂 2022-05-24 05:54 147阅读 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 \} \}) \] 到这里,我们的基本配置就完成了,我们来看一下刚刚都写了那些代码 const Vue = require('vue-loader/lib/plugin'); const htmlWebapckPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports={ mode:'development' entry:'./src/index.js'; output:{ path:path.resolve(__dirname,'littleDream') filename:'[name].[chunkhash:6].js' }, devServer:{ port:8000, open:open, setup:function(app){ app.get('/data',(req,res)=>{ res.json({ name:'小梦', age:18 }) }) } }, module: { rules: [{ test: /\.vue$/, use: 'vue-loader' }, { test: /\.js$/, use: 'babel-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|jpe?g|svg)$/, use: 'url-loader' }] }, 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*,里面写上 <template> <div>我是一个最简单的项目\{ \{name\}\}</div> </template> <script> 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下载模块 如果发现了错误的地方,恳请您指出来,对本篇文章有什么建议和批评请不要吝啬,我真诚的期待您的只言片语。
还没有评论,来说两句吧...