[译]webpack官网文档：指南 -- 1.入门指南

原创翻译，转载请注明出处。

原文地址：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/[email protected]"></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/[email protected]"></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官网文档 ：指南 -- 1.入门指南

创建一个包

在webpack里使用ES2015模块

通过配置文件来使用webpack

通过npm使用webpack

结论

相关推荐

[译]webpack官网文档：指南 -- 1.入门指南