webpak最全的简单入门

2019年10月2日 347次阅读 来源: 孟繁胜游

了解webpack

什么是webpack

官方文档是这样介绍的：点我了解官方文档

简单的来说，WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

Webpack是由Tobias Koppers开发的一个开源前端模块构建工具。它的基本功能是将以模块格式书写的多个JavaScript文件打包成一个文件，同时支持CommonJS和AMD格式。但让它与众不同的是，它提供了强大的loader API来定义对不同文件格式的预处理逻辑，从而让我们可以将CSS、模板，甚至是自定义的文件格式当做JavaScript模块来使用。Webpack 基于loader还可以实现大量高级功能，比如自动分块打包并按需加载、对图片资源引用的自动定位、根据图片大小决定是否用base64内联、开发时的模块热替换等等，可以说是目前前端构建领域最有竞争力的解决方案之一。

webpack和Grunt,Gulp的区别

<!– more –>

Webpack与Gulp、Grunt没有什么可比性，它可以看作模块打包机，通过分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

<u>他们的工作方式也有较大区别：</u>

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

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

安装

npm安装

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

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

cnpm安装

npm在国内安装会比较慢，所以可以使用淘宝 NPM 镜像定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm，首先要安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
//查看cnpm是否安装成功
cnpm -v
//如果出现版本号的信息，说明你安装成功

然后你就可以重复上面的npm安装

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

此时你会发现速度飞快。

创建package.json文件

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

cnpm init

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

《webpak最全的简单入门》

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

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

回到根目录空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。

接下来我们再创建三个文件:

  • index.html –放在public文件夹中;
  • Greeter.js— 放在app文件夹中;
  • main.js— 放在app文件夹中;

我们在index.html文件中写入最基础的html代码（html模板页面上一篇文章中我有提到），它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js）。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>webpack入门</title>
    <!-- 设置 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 兼容国产浏览器的高速模式 -->
    <meta name="renderer" content="webkit">
    <meta name="Author" content="孟繁胜游" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css">
      
    </style>
</head>
<body>
    <div id="root">

    </div>
<script type="text/javascript" src="bundle.js"></script>
<script type="text/javascript">
  
</script>
</body>
</html>

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

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "new webpack";
  return greet;
};

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

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

至此，万事俱备，只欠东风

运行webpack

通过终端运行

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

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

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

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

运行过后可以看到下面的运行结果

《webpak最全的简单入门》

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

《webpak最全的简单入门》

通过配置文件来使用Webpack

Webpack拥有很多其它的比较高级的功能（比如说本文后面会介绍的loaders和plugins），这些功能其实都可以通过命令行模式实现，但是正如前面提到的，这样不太方便且容易出错的，更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，我们可以把所有的与打包相关的信息放在里面。

继续上面的例子来说明如何写这个配置文件，在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，我们在其中写入如下所示的简单配置代码，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。

const path=require('path');
module.exports={
  //JavaScript执行入口文件,
  entry:'./app/main.js',
  //需要指定一下输出的路径path和输出的文件名filename
  output:{
    path:path.resolve(__dirname,'./public'),  //自定义输出文件所在目录
    filename: "bundle.js"//打包后输出文件的文件名
  },
  //设置mode
   mode: 'development' // 设置mode
}

有了这个配置之后，再打包文件，只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项，示例如下：

《webpak最全的简单入门》

第二种方法成功运行，接下来看一个更方便的方法。

设置配置文件 打开

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

{
  "name": "webpack3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.1"
  }
}

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

《webpak最全的简单入门》

如果出现让你安装webpack-cli的提示，那你就输入yes，安装webpack-cli依赖

《webpak最全的简单入门》

总结（归纳流程）

首先创建空文件夹通过命令全局安装webpack

//全局安装
npm install -g webpack
//或者--淘宝镜像，速度比较快
cnpm install -g webpack

其次初始化你的文件根目录并且安装依赖

npm init  //根目录初始化
npm install --save-dev webpack // 安装Webpack

然后创建你的项目

eg：在根文件夹下创建一个src文件夹，src文件夹里面可以放入你的源代码js，css等
    同样根目录下创建一个public文件夹，里面放入你的html文件它在这里目的在于引入打包后的js文件，这里我们先把       之后打包后的js文件命名为bundle.js

根目录下创建并配置webpack.config.js文件

const path=require('path');
module.exports={
  //JavaScript执行入口文件,
  entry:'./src/js/main.js',
  //需要指定一下输出的路径path和输出的文件名filename
  output:{
    filename:'bundle.js',   //自定义输出文件名
    path:path.resolve(__dirname,'./public/js')  //自定义输出文件所在目录
  },
  //设置mode
   mode: 'development' // 设置mode
}

然后在根目录下运行webpack

webpack

《webpak最全的简单入门》

输出成功后，打开你的html文件，即可看到完整的项目！

    原文作者：孟繁胜游
    原文地址: https://segmentfault.com/a/1190000020066885
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞