webpack4.0安装及使用

webpack4.0安装及使用,第1张

webpack4.0安装及使用(一)

前言                                 

    1、什么是webpack 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。


当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。


把各种游依赖关系的模块 ,打包成浏览器能够识别的文件,其思想就是万物皆模块,它能够将各个模块进行按需加载,不会导致加载了无用或者冗余的代码,所以它还有一个名字叫前端模块化打包工具。


    2、webpack 有哪些功能? 为什么用webpack?

      (代码转换 文件优化 代码分割 模块合并 自动刷新 代码校验 自动发布)。


webpack可以使用webpack-dev-server本地开发,热更新模块化开发(import,require),打包后会干净的。


例如有10个js文件,只用5个,那么其他文件文件不会打包上线发布。


    3、webpack4.0和webpack3.0区别?

      增加mode属性,可以是development或者production,设置打包环境,development可以获得最好的开发体验。


      module.loader改为module.rules,module.loaders.loader改为module.loaders.use。


      webpack4.0删除合并了CommonsChunkPlugin插件,webpack会默认为你生成共享代码模块。


学习                                 

  首先学习webpack的前提是电脑里nodejs的基础 ,如果没有安装node环境 请看我上篇随便https://www.cnblogs.com/xym0996/p/11898523.html   官方网站进行安装node, http://nodejs.cn/ 下载最新版node包并进行安装。


  1、安装全局:

 npm install webpack -g
npm install webpack-cli -g

     

  2、查看版本:

 webpack -version

     

  3、创建项目:命名为web10的项目(进入项目目录)

    

    初始化项目:

 npm init

    生成package.json文件

  4、安装依赖包   

 npm i  webpack -D
npm i webpack-cli -D

    

    

  5、新建源码目录src src目录里面建一个index.js的文件

    

  6、打印 (随便写点代码 作为测试)

    

  7、打包  命令webpack,     

 webpack --mode=development
webpack --mode=production

    

    web10项目会自动生成一个dist目录

    

    

    同时在dist目录建立一个index.html的文件 在引入main.js

    

    

  运行index.html   f12控制台

    

  可以看到自己打印出来的123已经在控制台中出现

缺点                                

  到这一步webpack已经可以正常的使用了,但是它有一个缺点就是不能实时的动态更新,所以你每次修改了src的

代码 都要webpack重新进行打包然后才能正常显示你要的数据,而且还有一个缺点就是html文件需要自己手动建,而

不是自动建并且帮你引入js文件,所以下一篇随笔会注入热更新的html动态生成的插件及代码。


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

原文地址: http://outofmemory.cn/zaji/586260.html

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

发表评论

登录后才能评论

评论列表(0条)

保存