webpack 3 零基础入门教程.pdf

目 录 0. 开始 1. 介绍 2. 安装 3. 实现 hello world 4. webpack 的配置文件 webpack.config.js 5. 使用第一个 webpack 插件 html-webpack-plugin 6. 使用 loader 处理 CSS 和 Sass 7. 初识 webpack-dev-server 8. 用 webpack 和 babel 配置 react 开发环境 9. 用 clean-webpack-plugin 来清除文件 10. 配置多个 HTML 文件 11. 如何使用 pug (jade) 作为 HTML 的模板 12. 如何使用模块热替换 HMR 来处理 CSS 13. 生产环境 vs 开发环境 14. 如何打包图片 15. 加载和打包 Twitter Bootstrap 框架 16. 使用 ProvidePlugin 插件来处理像 jQuery 这样的第三方包 17. 轻松通过两个实例来理解 devtool source-map 是什么意思 18. 构建开发和生产环境-分离配置文件 本文档使用 看云 构建 - 2 - 0. 开始 0. 开始 webpack 3 零基础入门教程 最详细 ，最简单的零基础 webpack 3 入门教程 ，人人都能学会。 原文发布于我的个人博客 ：https// 源码位于 ：https///hfpp2012/webpack-tutorial 项目源代码位于 ：https///hfpp2012/hello-webpack 联系我 email hfpp2012@ qq 903279182 本文档使用 看云 构建 - 3 - 1. 介绍 1. 介绍 1. webpack 是什么? 先来说一下 webpack 是什么。 webpack 的官方对它是这样定义的 ： webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. 中文的大概意思是说 ： webpack 可以看做是模块打包机 ：它做的事情是 ，分析你的项目结构 ，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言 （Scss ， TypeScript 等 ），并将其转换和打包为合适的格式供浏览器使用。 用大白话可以这样说 ： webpack 是一个前端模块化方案 ，更侧重模块打包 ，我们可以把开发中的所有资源 （图 片、js 文件、css 文件等 ）都看成模块 ，通过 loader （加载器 ）和 plugins （插 件 ）对资源进行处理 ，打包成符合生产环境部署的前端资源。 本文档使用 看云 构建 - 4 - 1. 介绍 如果这样还不明白的话 ，我们来说下前因后果。 在当今的社会 ，作为 web 开发 ，会越来越意识到前端的重要性 ，随着 HTML5 、 CSS3 、 ES6 各种技术的发展 ，前端的开发越来越宠大。甚至有些应用就是单页面应用(SPA) ，纯 JavaScript 开发 ，JavaScript 文件的管理也是一个问题。 JavaScript 模块化编 程 ，已经成为一个迫切的需求 ，这就出现了 JavaScript 的模块解决方案 ，以前是用 requirejs 或 seajs ，而现在则是用 webpack 。 举个例子 ，很多人开发了各种优秀的 JavaScript 模块或组件 ，我们不想重复发明轮子 ， 而是想直