使用webpack

1.安装webpack

Webpack可以使用npm安装，新建一个空的练习文件夹（mkdir webPackProject），在终端中转到该文件夹后执行下述指令就可以完成安装

//全局安装

npm install -g webpack

//安装到你的项目目录

npm install --save-dev webpack

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

npm init

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

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

npm install --save-dev webpack

2.回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹

// 创建app public 文件

mkdir app public

app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:

index.html --放在public文件夹中;

Greeter.js-- 放在app文件夹中;

main.js-- 放在app文件夹中;

项目结构如图所示

我们在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js，之后我们还会详细讲述）

我们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块：

// Greeter.jsmodule.exports=function(){vargreet=document.createElement('div');greet.textContent="Hi there and greetings!";returngreet;};

main.js文件中我们写入下述代码，用以把Greeter模块返回的节点插入页面

constgreeter=require('./Greeter.js');document.querySelector("#root").appendChild(greeter())

正式使用webpack

第一种：webpack 可以在终端中使用，基本的使用方法如下；

#{entryfile}出填写入口文件的路径，本文中就是上述main.js的路径，#{destinationforbundledfile}处填写打包文件的存放路径#填写路径的时候不用添加{}webpack{entryfile}{destinationforbundledfile}

指定入口文件后，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果你的webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址，继续上面的例子，在终端中输入如下命令

# webpack非全局安装的情况

node_modules/.bin/webpack app/main.js public/bundle.js

第二种：通过配置文件使用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中的一个全局变量，它指向当前执行脚本所在的目录。

第三种：更快捷的执行打包任务

在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径其实是比较烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下。

{

  "name": "y",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "start": "webpack"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "webpack": "^4.33.0",

    "webpack-cli": "^3.3.3"

  }

}

注：package.json中的script会安装一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。

npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build，我们在命令行中输入npm start试试，输出结果如下：

现在只需要使用npm start就可以打包文件了，有没有觉得webpack也不过如此嘛，不过不要太小瞧webpack，要充分发挥其强大的功能我们需要修改配置文件的其它选项，一项项来看