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、安装全局:
1 npm install webpack -g 2 npm install webpack-cli -g
2、查看版本:
1 webpack -version
3、创建项目:命名为web10的项目(进入项目目录)
初始化项目:
1 npm init
生成package.json文件
4、安装依赖包
1 npm i webpack -D 2 npm i webpack-cli -D
5、新建源码目录src src目录里面建一个index.js的文件
6、打印 (随便写点代码 作为测试)
7、打包 命令webpack,
1 webpack --mode=development 2 webpack --mode=production
web10项目会自动生成一个dist目录
同时在dist目录建立一个index.html的文件 在引入main.js
运行index.html f12控制台
可以看到自己打印出来的123已经在控制台中出现
缺点
到这一步webpack已经可以正常的使用了,但是它有一个缺点就是不能实时的动态更新,所以你每次修改了src的
代码 都要webpack重新进行打包然后才能正常显示你要的数据,而且还有一个缺点就是html文件需要自己手动建,而
不是自动建并且帮你引入js文件,所以下一篇随笔会注入热更新的html动态生成的插件及代码。