webpack4.0安装及使用

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动态生成的插件及代码。