webpack

webpack,第1张

概述webpack 3.8.1版本   webpack是一个前端资源加载或者打包工具。   webpack的使用方法:     第一步:下载       npm install -g [email protected]        npm install [email protected] --save-dev  局部下载        下载尽量把全局和局部都安装上     第二步:打包js文件  

webpack 3.8.1版本

  webpack是一个前端资源加载或者打包工具

  webpack的使用方法:

    第一步:下载

      npm install -g [email protected]

       npm install [email protected] --save-dev  局部下载

       下载尽量把全局和局部都安装上

    第二步:打包Js文件

      输入指令: webpack    入口文件名        出口文件名

          例: webpack        Js/a.Js        dist/bundle.Js

       如果我们只想使用webpack这个指令的情况下,就需要完好打包配置webpack.config.Js

       webpack.config.Js文件是webpack的一个默认的配置文件

    第三步:添加热加载:改变文件内容,按住保存,就会自动刷新

       注意:如果webpack的版本是3.8.1  这个轻量级服务器就得是2.9.1版本([email protected]),如果webpack是4.0版本这个dev-server就得是3.0版本

       全局下载指令webpack-dev-server   npm install -g [email protected]

       在开发环境下下载指令npm i --save-dev [email protected]

       直接使用webpack-dev-server启动:这种启动只是启动服务器,不能自动刷新

       webpack-dev-server --hot --inline既可以启动服务器也可以让浏览器自动刷新

       配置启动指令在当前项目下的package.Json中将"script"对象里的内容改为,如下图

           

       注意这个服务器下生成的虚拟bundle.Js,如下图

          

          这个虚拟Js文件由配置文件决定的。但是他是和app.HTML同目录同级别关系。所以引入关系需要注意,如下图

          

    

     打包CSS文件

        Loader:依赖包

        CSS转成Js, less转成Js, Json 转成Js png传成Js,  loader就就解决这些问题的。

        CSS文件打包到Js中 需要css-loader  style-loader 

总结

以上是内存溢出为你收集整理的webpack全部内容,希望文章能够帮你解决webpack所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1072723.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存