欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于Webpack的的认识及傻瓜式教学

程序员文章站 2022-06-22 21:16:54
刚学习了Webpack,ememememememememem就赶脚是一个打包工具,将js、css、json、img等等通通打包为最终的文件,最后渲染为一个页面。 也是终于捋清了Webpack的思路,在这里分享一下: 学习Webpack之前首先要知道Webpack是什么?它有什么作用? Webpack ......

 

  刚学习了webpack,ememememememememem就赶脚是一个打包工具,将js、css、json、img等等通通打包为最终的文件,最后渲染为一个页面。

  

  也是终于捋清了webpack的思路,在这里分享一下:

    学习webpack之前首先要知道webpack是什么?它有什么作用?

      webpack是一个前端资源打包工具

      webpack它会将你的项目看作是一个整体,通过一个给定的主文件,寻找到所依赖的所有分支文件,通过lorder处理为浏览器能够识别javascript文件

    知道它的作用之后我们就需要在nodejs来操作了

      首先我们在一个新文件夹中来利用nodejs创建package.json文件

      在nodejs中输入 npm init创建,如下图:关于Webpack的的认识及傻瓜式教学

    创建完毕之后,我们再安装webpack

    首先是全局的安装(注:我安装的是3.8.1的版本),如下图:

      输入的指令为:npm install -g webpack@3.8.1

      关于Webpack的的认识及傻瓜式教学

    然后我们在下载当前的文件下:

      指令为:npm install webpack@3.8.1

    这种局部下载和全局下载是一样的,一个是在任何地方都可以使用,一个只能在当前文件下使用,就不贴图了。

    这下我们就可以打包js文件了,打包的指令为 webpack  入口文件名称  出口文件名称

      其中index.js为入口文件   rundle.js为出口文件关于Webpack的的认识及傻瓜式教学

关于Webpack的的认识及傻瓜式教学

    这就完成了js文件的打包,但是这种打包指令如果有多个js的话会比较麻烦,这就需要我们用一种快捷方式来将它打包,这时我们就需要配置一个webpack.config.js文件,在文件夹中创建此文件,然后再里面配置内容,如下图:

    关于Webpack的的认识及傻瓜式教学

 

    这时我们在nodejs中输入webpack,就会发下dist文件下有一个打包出来的js文件

    关于Webpack的的认识及傻瓜式教学

     关于Webpack的的认识及傻瓜式教学

   这样我们就完成了js文件的打包,接下来我们对css文件的打包,这时我们需要下载css打包所需要的文件:

    在nodejs输入如下指令:

      npm install style-loader css-loader --save -dev

    关于Webpack的的认识及傻瓜式教学

    如上我们下载完毕之后,在webpack.config.js文件中添加如下指令:

关于Webpack的的认识及傻瓜式教学

    这样我们可以将css文件打包了,还可以将json文件、img图片打包(暂时还没学习,后续将会更新)

    接下来我们在来说一下热加载,就是将文件内容改变之后保存就会自动改变打包后的文件,不需要再进行繁琐的配置

    还是需要先下载:

      注意:webpack是3.8.1 这个轻量服务器就得是2.9.4 如果webpack是4.0版本,这个dev-server就得是3.0版本

      在nodejs输入如下指令:

        也是如上需要一遍全局下载,一遍局部下载

        npm install webpack-dev-server@2.9.4

      关于Webpack的的认识及傻瓜式教学

 

  配置完毕之后我们还需要在packjson中文件中添加如下代码:    

    关于Webpack的的认识及傻瓜式教学

   接下来在nodesj中输入指令npm run dev,就可以启动了

   然后我们创建一个app.css文件、index.html文件和aaa.js文件,在css中输入body:{background:red},将css文件和js文件打包,引入到html文件中

    关于Webpack的的认识及傻瓜式教学

 

    关于Webpack的的认识及傻瓜式教学

 

     关于Webpack的的认识及傻瓜式教学

 

    关于Webpack的的认识及傻瓜式教学

     注意:在html中引入的js文件为虚拟js文件,只是方便我们做项目时使用,最后我们将所有工作都做完以后再打包的js文件,才会使用真实文件

    最后我们在浏览器中打开html文件,输入localhost:8080/文件名称(注意:8081为nodejs中启动服务器时给出的地址)

    关于Webpack的的认识及傻瓜式教学

    关于Webpack的的认识及傻瓜式教学

 

    然后我们改变css样式,保存之后浏览器就会发生相应的改变,其它文件相同。

    不用这种方式的话,改变一次css或js样式就需要重新打包一次文件,相对来说较为繁琐。

    以上如有错误的地方还请见谅!