webpak最全的简单入门

时间  2019-11-16
标签 webpak 简单 入门 繁體版
原文   原文链接

了解webpack

什么是webpack

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

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

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

webpack和Grunt,Gulp的区别

<!-- more -->前端

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

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

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

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

安装

npm安装

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

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

cnpm安装

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

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文件，便可看到完整的项目！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程