webpack入门

为什么使用webpack

随着前端的发展，现在网站的html、css、js代码越来越多，大量的业务逻辑由js实现，所以一个中型项目所有的js代码可能达10w行左右。那么面对如此庞大复杂的前端项目，我们需要把复杂的程序细化为小的文件便于开发以及维护，软件工程则称之为模块化。因此，使用webpack可以很好解决项目模块化的问题。

模块化的优点：

1. 避免命名冲突，减少命名空间污染（便于开发，提高代码质量）
2. 文件按需加载 （提高网站性能）
3. 高复用性 （提高开发效率，减少项目体积）
4. 高维护性 （减少项目维护成本）

webpack是什么

webapck是基于JavaScript 的静态模块打包工具。它可以将各式各样的静态资源根据依赖关系图打包压缩成一个或多个文件。但是webpack本身只支持javascript资源，我们可以通过配置loader打包其他类型的资源。

webpack作用

1. 打包：把项目的js文件或其他静态资源打包成一个文件，减少服务器压力和下载带宽
2. 转换：把非javascript语言转换成普通的js，让浏览器顺利运行
3. 优化：优化性能

---

webapck核心概念

webpack官方文档-概念

入口(entry)

配置入口文件的地址，可以是单一入口，也可以是多入口。

const config = {
  entry: {
    main: './path/to/my/entry/file.js' // './'是以webpack.config.js为根目录
  }
};

应用场景1

分离 应用程序(app) 和 第三方库(vendor) 入口

实际开发中，项目的js文件可能包括两种类型。第一种是实现业务逻辑的js；第二种是插件或者公用的js。第一种在开发过程中频繁地进行修改，而第二种js我们很少或者根本不会进行改动。所以，我们可以将两种类型js分别作为两个入口形成完全分离、互相独立的依赖关系。

const config = {
  entry: {
    app: './src/app.js',
    lib: './src/lib.js'
  }
};

应用场景2

多页面应用程序

在多页应用中，页面之间的跳转将加载新的资源，通过多入口可以为每个html按需加载资源，提升程序西能并节约了带宽。

const config = {
  entry: {
    home: './src/home/index.js',
    detail: './src/detail/index.js',
    list: './src/list/index.js'
  }
};

出口(output)

webpack打包后文件的路径，可以指定多个入口，但只能有一个输出配置。但是path的路径可以是变量：path: __dirname + ‘/dist’ （__dirname 是 nodejs 参数，可阅读其官方文档）

const config = {
  output: {
    filename: 'bundle.js', // 打包后js的文件名
    path: '/home/proj/public/assets' // 文件保存的绝对路径
  }
};

loader

loader 用于对模块的源代码进行转换，对非 JavaScript 文件（CoffeeScript、TypeScript、Less、Sass等）进行转换成webpack 能够处理的有效模块，然后进行打包。使用loader之前需要安装相对应的 loader。

常用loader安装方法

css、less、sass

插件(plugins)

插件可以执行比loader范围更广的任务，目的在于解决 loader 无法实现的其他事，从打包优化和压缩，到重新定义环境中的变量等，可根据需要配置不同功能的插件。插件使用之前也需要安装。

模块热替换(HMR - Hot Module Replacement)

在应用程序中对模块进行更改，添加或删除时，无需重新打包且加载整个页面，来提高开发效率。webpack-dev-server 插件支持 hot 模式

• 保留在完全重新加载页面时丢失的应用程序状态。
• 只更新变更内容，以节省宝贵的开发时间。
• 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

---

webpack项目构建

百度了很多帖子及教程，还是webpack官方的构建过程最全面易懂。在构建过程中，大家可能遇到一些不懂的配置或者语法，可以针对性百度学习，所以在此也不画蛇添足，如有疑问请留言共同学习。

webpack官方文档-详细构建教程