Webpack 入门学习

时间 2019-11-30

标签 webpack 入门学习繁體版

原文原文链接

1.什么是Webpack?

Webpack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss,TypeScript等），并将其打包为合适的格式以供浏览器使用。css

2.WebPack和Grunt以及Gulp相比有什么特性？

其实WebPack和另外两个并无太多的可比性，Gulp/Grunt是一种可以优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过WebPack的优势使得WebPack能够替代Gulp/Grunt类的工具。html

Grunt和Gulp的工做方式是：在一个配置文件中，指明对某些文件进行相似编译，组合，压缩等任务的具体步骤，这个工具以后能够自动替你完成这些任务。前端

Grunt和Gulp的工做流程

Webpack的工做方式是：把你的项目当作一个总体，经过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的全部依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。java

开始使用WebPack

初步了解了WebPack工做方式后，咱们一步步的开始学习使用WebPack。

安装

Webpack可使用npm安装，新建一个空的练习文件夹（此处命名为Webpack sample pro）,在终端中转到该文件夹后执行下述指令就能够完成安装。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

正式使用Webpack前的准备

1.在上述练习文件夹中建立一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init命令能够自动建立这个package.json文件

npm init

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，做者等信息，不过不用担忧，若是你不许备在npm中发布你的模块，这些问题的答案都不重要，回车默认便可。node

1.package.json文件已经就绪，咱们在本项目中安装Webpack做为依赖包webpack

//安装 Webpack
npm  install --save-dev webpack

2.回到以前的空文件夹，并在里面建立两个文件夹，app文件夹和public文件夹，app文件夹用来存放原始数据和咱们将写的javaScript模块，public文件夹用来存放准备给浏览器读取的数据（包括使用webpack生成的打包后的js文件以及一个index.html文件）。在这里还须要建立三个文件，.index.html文件放在public文件夹中，两个js文件（Greeter.js和main.js）放在app文件夹中，此时项目结构以下图所示 web

index.html文件只有最基础的html代码，它惟一的目的就是加载打包后的js文件（bundle.js）npm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

　Greeter.js只包括一个用来返回包含问候信息的html元素的函数。json

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

main.js用来把Greeter模块返回的节点插入页面。浏览器

//main.js 
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());

正式使用Webpack

webpack能够在终端中使用，其最基础的命令是

webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}

只须要指定一个入口文件，webpack将自动识别项目所依赖的其它文件，不过须要注意的是若是你的webpack没有进行全局安装，那么当你在终端中使用此命令时，须要额外指定其在node_modules中的地址，继续上面的例子，在终端中属于以下命令

//webpack非全局安装的状况 node_modules/.bin/webpack app/main.js public/bundle.js

结果以下

termialResult1

能够看出webpack同时编译了main.js 和Greeter,js,如今打开index.html,能够看到以下结果

htmlResult1

有没有很激动，已经成功的使用Webpack打包了一个文件了。不过若是在终端中进行复杂的操做，仍是不太方便且容易出错的，接下来看看Webpack的另外一种使用方法。

经过配置文件来使用Webpack

Webpack拥有不少其它的比较高级的功能（好比说本文后面会介绍的loaders和plugins），这些功能其实均可以经过命令行模式实现，可是正如已经提到的，这样不太方便且容易出错的，一个更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，能够把全部的与构建相关的信息放在里面。

仍是继续上面的例子来讲明如何写这个配置文件，在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，并在其中进行最最简单的配置，以下所示，它包含入口文件路径和存放打包后文件的地方的路径。

module.exports = {
 entry: __dirname + "/app/main.js",//已屡次说起的惟一入口文件  output: {  path: __dirname + "/public",//打包后的文件存放的地方  filename: "bundle.js"//打包后输出文件的文件名 } }

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

如今若是你须要打包文件只须要在终端里你运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就能够了，这条命令会自动参考webpack.config.js文件中的配置选项打包你的项目，输出结果以下

webpack

又学会了一种使用Webpack的方法，并且不用管那烦人的命令行参数了，有没有感受很爽。有没有想过若是能够连webpack(非全局安装需使用node_modules/.bin/webpack)这条命令均可以不用，那种感受会不会更爽~，继续看下文。

更快捷的执行打包任务

执行相似于node_modules/.bin/webpack这样的命令实际上是比较烦人且容易出错的，不过值得庆幸的是npm能够引导任务执行，对其进行配置后可使用简单的npm start命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关设置便可，设置方法以下。

{
  "name": "webpack-sample-project", "version": "1.0.0", "description": "Sample webpack project", "scripts": { "start": "webpack" //配置的地方就是这里啦，至关于把npm的start命令指向webpack命令 }, "author": "zhang", "license": "ISC", "devDependencies": { "webpack": "^1.12.9" } }

注：package.json中的脚本部分已经默认在命令前添加了node_modules/.bin路径，因此不管是全局仍是局部安装的Webpack，你都不须要写前面那指明详细的路径了。

npm的start是一个特殊的脚本名称，它的特殊性表如今，在命令行中使用npm start就能够执行相关命令，若是对应的此脚本名称不是start，想要在命令行中运行时，须要这样用npm run {script name}如npm run build，如下是执行npm start后命令行的输出显示

npmStartTermialResult

如今只须要使用npm start就能够打包文件了，有没有以为webpack也不过如此嘛，不过不要过小瞧Webpack，其强大的功能包含在其一系列可供配置的选项中，咱们一项项来看。

Webpack的强大功能

生成Source Maps（使调试更容易）

开发老是离不开调试，若是能够更加方便的调试固然就能提升开发效率，不过打包后的文件有时候你是不容易找到出错了的地方对应的源代码的位置的，Source Maps就是来帮咱们解决这个问题的。
经过简单的配置后，Webpack在打包时能够为咱们生成的source maps，这为咱们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。

在webpack的配置文件中配置source maps，须要配置devtool，它有如下四种不一样的配置选项，各具优缺点，描述以下：

devtool选项	配置结果
source-map	在一个单独的文件中产生一个完整且功能彻底的文件。这个文件具备最好的source map，可是它会减慢打包文件的构建速度；
cheap-module-source-map	在一个单独的文件中生成一个不带列映射的map，不带列映射提升项目构建速度，可是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试形成不便；
eval-source-map	使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项能够在不影响构建速度的前提下生成完整的sourcemap，可是对打包后输出的JS文件的执行具备性能和安全的隐患。不过在开发阶段这是一个很是好的选项，可是在生产阶段必定不要用这个选项；
cheap-module-eval-source-map	这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和`eval-source-map`选项具备类似的缺点；

正如上表所述，上述选项由上到下打包速度愈来愈快，不过同时也具备愈来愈多的负面做用，较快的构建速度的后果就是对打包后的文件的的执行有必定影响。

在学习阶段以及在小到中性的项目上，eval-source-map是一个很好的选项，不过记得只在开发阶段使用它，继续上面的例子，进行以下配置

module.exports = { devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项 entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" } }

cheap-module-eval-source-map方法构建速度更快，可是不利于调试，推荐在大型项目考虑da时间成本是使用。

本文参考：连接：http://www.jianshu.com/p/42e11515c10f 來源：简书