WebPack入门

一、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官方中文文档

四、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