webpak最全的简单入门

32次阅读

共计 5117 个字符，预计需要花费 13 分钟才能阅读完成。

了解 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 中发布你的模块，这些问题的答案都不重要，回车默认即可（如下图）。

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

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

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

通过配置文件来使用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 文件中的配置选项，示例如下：

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

设置配置文件 打开

在命令行中输入命令需要代码类似于 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 试试，输出结果如下：

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

总结（归纳流程）

首先创建空文件夹通过命令全局安装 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

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

正文完
git github html5 windows
发表至： javascript
2019-08-14
 0
关于javascript:排队五小时才能吃上一口的Popeyes要借阿里云数据中台10年内开足1500家门店
【Copy攻城狮日志】聊聊JavaScript heap out of memory
this 改变this的指向
关于javascript:用-Tensorflowjs-做了一个动漫分类的功能一