webpack_基础配置、端口、热加载、在内存中生成html页面的插件、样式加载器

1、webpack---是一个前端项目构建工具,是基于nodejs开发的,前端工具

    1、产生背景---合并(减少二次请求,提高网页加载速度)、压缩(节省带宽,节约用户流量)

     

        

     

     base64位编码的好处:编码过后的字符串,这样图片就会随着html代码结构一起下载到客户端,这样第一次请求就能加载到这个图片了而不需要用src属性单独指服务器的一个资源,这样就又是一个请求了(并不是所以的图片都适合,一般是适合小图片)

      2、webpack的基本使用

      安装:

        

      使用:通过一个小案例体验webpack前端构建工具的基本使用和作用(好处)

        (打包)减少二次请求,解决包于包之间复杂的依赖关系

        

        

        

        

        

        为了避免每次修改main.js之后都要重新用命名行语句再打包,把新修改的样式生效,所以我们可以自己配置一下文件的入口和出口目录

        

       3、每次修改代码后都要在命名行输入webpack  打包编译后刷新界面才能看到最新的修改,这样还是很麻烦,所以要借助新的工具实现自动打包编译的功能

        

        

        

          

        

        

        

        

      4、因为webpack默认只能打包处理js类型的文件,无法处理其他非js类型的文件,如果要处理非js类型的文件(如样式文件)我们需要手动安装一些第3方的loader加载器,装包后再配置

        

        

        

           

        

        

        

 总结:   

   1、npm init  创建包管理文件   package.json

   2、创建项目目录文件夹---存放源代码

   3、dist文件夹---存放项目打包输出之后的文件(不一定要提前建好,打包的时候发现没有的话也会帮我们自动创建的)

   4、可以用webpack命令行测试打包是否可以用了,测试好后再安装下 webpack-dev-server包进行实时打包  ,再创建webpack配置文件webapck.config.js  ,在里面配置下需要配置的入口、出口文件,热加载、等

   5、装html-webpack-plugin可以帮助我们在内存中生成一个html文件,和自己创建的html内容一模一样,并且生成的html还帮我们引入了bundle.js,所以我们自己的html中不用再引入bundle.js了

   6、。。。。。。

    

   

        

猜你喜欢

转载自www.cnblogs.com/yangyutian/p/11058856.html