一、WebPack概述
webpack 是代码编译工具,有入口、出口、loader 和插件。webpack 是一个用于现代JavaScript应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。
简单来说webpack是一个项目打包工具。
二、为什么要使用WebPack
在日常的开发中经常在一个index.html页面中引入多个css,js文件,会导致页面加载慢,所以有必要将他们合并为一个文件,所以使用webpack(其实还有很多如sass lass等第三方中间语言需要编译后运行,所以页需要用到webpack编译打包);
三、使用WebPack的优点
1、轻松使用es6。 因为webpack可以在浏览器不支持es6的情况下让你使用es6语法,最新的webpack版本已经不需要配置也能过变异es6语法,之前的版本都需要加入babel加载器才可以打包es6.
2、减少界面请求数量。 许多图片图表都是放到一张图片上的,这样做的原因是因为能过减少图片体积,同样的将js,css文件打包也可以减少体积使几面加载的更快。
3、模块化,让我们可以把复杂的程序细化为小的文件
四、WebPack的安装
npm install webpack -d npm install webpack-cli -d -d:表示模块在生产环境下不使用,只在开发环境下使用。
五、WebPack的入门
1、创建需要和并的js文件
a.js 、b.js
2、创建入口文件
在该文件中引入 需要被压缩、加密、合并的文件,webpack会对入口文件进行操作
// 引入a和b文件 import './a'; import './b';
3、配置文件
在配置文件中需要配置入口文件地址、输出文件地址和输出文件名称【webpack.config.js】
let path = require("path"); // 配置内容 module.exports = { // 入口文件 entry:"./src/main.js", // 输出文件【名称、地址】 output:{ // 地址 path:path.join(__dirname,"src"), // 名称 filename:"demo.min.js" } }
4、运行
webpack 或 // 自动压缩【类似于nodemon】 webpack -w