原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/guides/get-started/
Webpack是一个在应用里构建JavaScript模块的工具。在安装完之后，通过命令行接口（cli）或api来使用它。Webpack通过快速构建一个应用的依赖图并按照正确的顺序绑定它们来简化工作流程。Webpack可以通过配置来定制优化你的代码，为你的产品分割出服务商，CSS或者JS代码，运行开发服务器它不用刷新页面而可以热加载代码等等非常棒的特性。
创建一个包
建一个演示用路径来实验webpack。安装webpack.
mkdir webpack-demo &&cd webpack-demo npm init -y npm install --save-dev webpack
./node_modules/.bin/webpack --help # Shows a list of valid cli commands .\node_modules\.bin\webpack --help # For windows users webpack --help # If you installed webpack globally
之后建一个子文件夹和index.js文件。
app/index.js
function component (){
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML = _.join(['Hello','webpack'],' ');
return element;
}
document.body.appendChild(component());
为了运行这一小块代码，通常需要一下的HTML
index.html
<html>
<head>
<title>webpack 2 demo</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="app/index.js"></script>
</body>
</html>
这个例子里，在script标签中有几个隐式的依赖关系。
index.js开始运行之前依赖包含在页面里的lodash，说它是隐式的是因为index.js从没有生命需要lodash；它只是假定存在一个_全局变量。
通过这种方式管理JavaScript项目有下面几个问题：
- 如果依赖丢失，或者放在错误的路径里，应用将彻底不能运行。
- 如果一个应用被引用但是没有被使用，那么浏览器就会下载大量不需要的代码
为了把index.js和依赖包lodash打包到一起，我们需要先安装lodash。
npm install --save lodash
然后引用它。
app/index.js
+ import _ from 'lodash';
function component () {
...
我们还需要修改index.html文件，预期会导出一个js打包文件。
<html>
<head>
<title>webpack 2 demo</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
- <script src="app/index.js"></script>
+ <script src="dist/bundle.js"></script>
</body>
</html>
在这儿，index.js明确要求需要lodash，并且把它绑定为_（非全局域）
通过说明一个模块需要什么依赖，webpack可以使用这些信息做成一个依赖图。然后使用依赖图来生成一个最适化的代码包，在这里脚本会按照正确的顺序被执行。并且不被使用的依赖不会被包含在代码包里。
然后在这个文件夹上运行webpack，index.js作为入口文件，bundle.js作为生成文件，页面需要的所有代码都被打包在这里。
./node_modules/.bin/webpack app/index.js dist/bundle.js
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0}[built]
[1](webpack)/buildin/global.js 509 bytes {0}[built]
[2](webpack)/buildin/module.js 517 bytes {0}[built]
[3] ./app/index.js 278 bytes {0}[built]
用浏览器打开index.html看看成功打包后的结果。你会看到一个包含“Hello webpack”文本的页面。
在webpack里使用ES2015模块
注意到了在app/index.js里的ES2015模块引用了吗？虽然浏览器还不支持import/export声明，但还是可以使用它们，因为webpack将会用ES5兼容的代码来替代这些指令。可以自己查看dist/bundle.js文件。
请注意，webpack不会碰import/export之外的代码。如果你要用别的ES2015特性，一定要用像Babel或Bublé的转换编译器。
通过配置文件来使用webpack
对于更复杂的配置，我们可以使用一个配置文件，webpack参照这个配置文件来打包代码。创建一个webpack.config.js文件之后，你可以通过下面的配置来实现上面的命令行命令。
webpack.config.js
var path =require('path');
module.exports ={
entry:'./app/index.js',
output:{
filename:'bundle.js',
path: path.resolve(__dirname,'dist')
}
};
这个文件可以由webpack通过下面的方式运行。
./node_modules/.bin/webpack --config webpack.config.js
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0}[built]
[1](webpack)/buildin/global.js 509 bytes {0}[built]
[2](webpack)/buildin/module.js 517 bytes {0}[built]
[3] ./app/index.js 278 bytes {0}[built]
配置文件可以使用webpack的所有灵活性。使用这个配置文件我们可以加入加载规则，插件，解析选项和许多其他的针对代码包的增强功能。
通过npm使用webpack
考虑到从命令行运行webpack不是很有趣，我们可以设置一个小捷径。像这样修改package.json：
{
...
"scripts":{
"build":"webpack"
},
...
}
现在你就可以运行npm run build命令，达到和上面一样的结果。npm通过它取得脚本，并临时修改环境让它包含bin命令。你在很多项目里都会看到这种做法。
结论
目前为止你完成了一个基本的构建，你需要深入研究webpack的基本概念和配置来更好的理解它的设计。并且查看指南去学习怎样解决一般的问题。API部分研究了一些低级别的特性。
-- End --
相关推荐
### Webpack 入门知识点详解 #### 一、Webpack简介 **Webpack** 是目前非常流行的前端资源模块化管理和打包工具。它能够有效地管理项目中的各种模块，并将其打包为适合生产环境部署的静态资源。此外，Webpack 还...
1. **Laravel 文档**：官方文档是学习 Laravel 的最佳资源，涵盖了从入门到高级的全面教程。 2. **社区与资源**：Laracasts 提供丰富的视频教程，Stack Overflow 和 Laravel.io 社区可以解决开发中的疑问。 3. **...
构建系统可以是像Grunt或Gulp这样的任务运行器，也可以是像Webpack这样的模块打包工具。它们帮助全栈增长工程师自动化重复性任务，比如代码压缩、合并、转译等。 ### Git与版本控制 版本控制是软件开发中的重要...
- Vue.js官方指南：https://cn.vuejs.org/v2/guide/events.html - Vue Router的安装与使用：https://router.vuejs.org/zh-cn/installation.html - 基于vue-cli的快速构建：http://www.jianshu.com/p/2769efeaa10a - ...
### avue技术讲解文档知识点概览 #### 一、avue技术概述 - **定义**：Avue是一款基于Vue全家桶和Element UI的快速集成解决方案，主要用于CURD和表单的快速开发。它采用了最新的前端技术栈，支持权限验证、第三方...
3. **文档**：README.md 文件，提供项目介绍、安装指南、使用方法和API参考等信息。 4. **资源文件**：如图片、字体或其他静态资源，用于配合CSS样式。 5. **测试**：可能包含测试用例，确保组件和样式的正确性。 6....
前端开发，又称客户端开发，指的是创建和维护网站或应用程序的用户界面和用户体验的过程。它侧重于可视化的部分，即用户可以直接看到并与之互动的部分。前端开发的核心在于提供直观、友好且高效的用户体验。 #### ...
"说明.htm"通常是项目提供的用户指南或者快速入门文档，它会详细介绍框架的安装步骤、基本用法、关键特性和常见问题，是初学者快速上手的必备资料。而"xboot-front-master"则可能是项目的主要源代码目录，"master...
README文件会详细介绍如何安装和使用ef.js，这对于新用户来说是非常重要的入门指南；示例代码可以帮助开发者快速理解ef.js的用法，并提供了一个可以参考的起点；而单元测试则确保了代码的质量和稳定性，对于维护和...
MongoDB入门指南.epub OpenStack最终用户文档（简体中文版）.epub PHP 5.5 Web零基础教程：开发一个在线阅读网站.epub PHP 扩展开发入门.epub Python 3 Basics Tutorial.epub Python 3 Module Examples.epub Python ...
8. `README.md` - 项目介绍和指南，通常会包含安装和快速入门的信息。 通过深入研究这些文件，开发者可以更好地了解Oz.js的实现细节，以及如何将其应用到实际项目中。 总之，Oz.js是一个注重模块化、性能和扩展性...
总结，本文档提供了Spring Boot和Vue.js结合的基础指南，包括设置Spring Boot项目、创建Thymeleaf模板、初始化Vue.js实例以及如何在页面上展示数据。通过这些步骤，开发者可以快速入门，进一步探索更复杂的应用架构...
如果您想查看我们的官方文档，只需单击。 它包含有关设置此入门程序的指南以及功能概述。 产品特点 Webpack加载器 该启动程序包含以下Webpack加载程序： Sass Loader，用于编译sass（SCSS） 文件加载器，用于加载...
- **官方网站**: 提供最新资讯和文档更新。 - **源码下载**: GitHub仓库，可以获取项目的源代码。 - **QQ交流群**: 提供技术交流和问题解答的社区。 - **在线演示**: 可以预览Jeecg-Boot的功能。 - **版本日志**: ...
RISE实验室GraphQL服务:RISE实验室中文网站API文档：技术栈前端Node8.0+(开发环境)Git(版本控制)Travis CI(持续集成)HTML/HTML5ES5/ES6CSS/CSS3Vue.js(框架类)Element/Bootstrap(UI类)SCSS(CSS预处理)webpack(打包...
1. **GitHub Pages**: “adnan-wahab.github.io”是GitHub Pages的个人域名格式，意味着这个项目是一个托管在GitHub上的个人网站，利用GitHub Pages服务来发布静态内容。 2. **Master分支**: 压缩包包含的文件名中...
你可以通过阅读README.md文件获取快速入门指南，通过查看源代码学习其实现原理，通过示例理解如何在实际项目中应用。 总的来说，imweb-tpl-loader是一个增强JavaScript开发体验的工具，它使得模板处理变得更加便捷...
**入门指南** 1. **安装配置**：Laravel 可以通过 Composer 安装，配置文件通常位于 `.env` 文件中，用于设置数据库连接、密钥等关键参数。Laravel Homestead 和 Valet 提供了方便的本地开发环境。 2. **文件夹...
### 前端开发学习宝典：从入门到精通的路径规划 前端开发作为现代Web开发的核心组成部分之一，其重要性不言而喻。对于希望成为优秀Web开发者的朋友们来说，掌握前端技术尤为关键。本篇文章旨在为初学者提供一份详尽...