webpack4.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下载模块 如果发现了错误的地方,恳请您指出来,对本篇文章有什么建议和批评请不要吝啬,我真诚的期待您的只言片语。



阅读更多

没有更多推荐了,返回首页