1. 前言

1.1 Webpack是什么

  • 可能有很多的小伙伴对于这个Webpack既熟悉又陌生，有一些刚开始接触vue的小伙伴在对项目进行打包的时候经常会使用到npm run build来进行打包，但是却不了解Webpack里面复杂的配置和功能。
  • Webpack是一种前端资源构建工具，一个静态模块打包器，在Webpack看来，前端所有资源文件都会作模块处理，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源，Webpack官网上这张万年不变的示意图中其实也已经说明了一切。
  • 接下来我们就一起来学习一下Webpack的基本概念和配置流程。

1.2 Webpack的五个核心

  • Entry 入口指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

  • Output 输出指示Webpack打包后的资源bundles输出到哪里。

  • Loader Loader让Webpack能够处理那些非js文件。

  • Plugins 插件功能，可以用于打包优化和压缩，重新定义环境变量等功能。

  • Model 指示Webpack使用相应模式的配置，通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。

    Model的配置信息可以参考官网：https://webpack.docschina.org/configuration/mode/

2. Webpack的安装配置入门

2.1 安装

npm init -y //初始化

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

2.2 配置

  • 在文件夹中的src文件夹新建一个foo.js文件
//foo.js

alert('你好呀 webpack')
  • 在文件夹中新建一个webpack.config.js文件
//webpack.config.js

var path = require('path');

module.exports = {

  mode: '`production`',//环境

  entry: './src/foo.js', //打包入口

  output: { //打包出口

    path: path.join(__dirname, 'dist'), //打包后文件存放的位置

    filename: '`index.js`',  //打包后文件生成的文件名

  },

};
config的配置信息可以参考官网：https://webpack.docschina.org/configuration/
  • 此时 文件目录是这样子的

2.3 开始打包

  • 在package.json文件中添加如下命令
  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "webpack"

  },
  • 此时我们在终端输入npm run build命令就会将入口文件（entry）进行打包输出到（output）dist文件夹的位置

  • 此时的目录是这样的

  • 我们光看js是看不出效果的，在dist文件夹新建一个index.html页面引用该打包后的js文件试试
index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>引用打包后的js</title>

</head>

<body>

    <script src="./index.js"></script>

</body>

</html>
  • 打开该index.html 我们会发现效果已经出来啦！

  • 至此 一个最简单版的打包就完成了！！！

那么有同学就会问了 啊。。。。这打包了个寂寞啊？这跟原本的html引用js有区别吗？？？别急，上面只是演示了最简单的打包流程，webpack的功能远远不止这样

  • 我们来另外一个例子 在foo.js同个文件夹内创建一个称为 helloWebpack.js 的模块。
//helloWebpack.js

export default function () {

    alert('hi webpack')

}
  • 在foo.js引用它
//foo.js

import hello from './helloWebpack'

hello()

细心的同学可能会发现了现在如果直接在 html 页面里面引用 index.js 是无法执行的，浏览器是无法处理 ES6 模块或者是 common.js 规范的，那如果使用Webpack来处理入口来打包会怎么样呢？

  • 此时我们在终端输入npm run build命令 然后运行index.html文件。

此时效果就出来了！！！Webpack 天生支持 ES6 import 和 export 的模块语法，可以直接使用。

3. 总结

上面讲到了Webpack的基本配置和安装打包，五个核心要点之中的其中两个 下篇我们来学学如何使用Loader和plugins会发现更多Webpack的奥妙

Webpack的基本配置和打包与介绍的更多相关文章

  1. Webpack的基本配置和打包与介绍（二）

    1. 前言 在上一章中我们学习到了webpack的基本安装配置和打包,我们这一章来学学如何使用loader和plugins 如果没看第一章的这里有传送门 2. Loader 2.1 什么是loader ...

  2. Webpack安装配置及打包详细过程

    引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...

  3. 使用可视化图表对 Webpack 2 的编译与打包进行统计分析

    此文主要对使用可视化图表对 Webpack 2 的编译与打包进行统计分析进行了详细地讲解,供您更加直观地参考. 在之前更新的共十七章节中,我们陆续讲解了 Webpack 2 从配置到打包.压缩优化到调 ...

  4. 配置webpack中externals来减少打包后vendor.js的体积

    在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积,从本 ...

  5. webpack快速入门——配置JS压缩，打包

    1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...

  6. webpack配置：打包第三方类库、第三方类库抽离、watch自动打包、集中拷贝静态资源

    一.打包第三方类库 下面说2种方法: 第一种: 1.引入jQuery,首先安装: npm install --save-dev jquery 2.安装好后,在index.js中引入,用jquery语法 ...

  7. 3.使用webpack配置文件webpack.confg.js配置打包文件的入口和出口

    在项目根目录下新建webpack.config.js文件 webpack.config.js文件配置如下: // Node的路径操作使用的是path模块 const path=require('pat ...

  8. webpack配置自动打包重新运行npm run dev出现报错

    webpack配置自动打包重新运行npm run dev出现报错 运行npm run dev出现如下报错 Listening at http://localhost:8080(node:2328) U ...

  9. webpack + vuejs 基本配置（一）

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

随机推荐

  1. SVG & Blob & Base64

    SVG & Blob https://developer.mozilla.org/en-US/docs/Web/API/Blob SVG & Base64 https://develo ...

  2. vue2.0用法以及环境配置

    一.配置环境搭建 1.安装node.js (可以去官网看) 2.安装git (推荐看廖雪峰文章,点击查看) 3.安装vue: cmd:npm install vue //最新稳定版本 npm inst ...

  3. Linux之根目录说明

    文件系统 文件系统是操作系统用于明确存储设备(常见的是磁盘,也有基于NAND Flash的固态硬盘)或分区上的文件的方法和数据结构:即在存储设备上组织文件的方法.操作系统中负责管理和存储文件信息的软件 ...

  4. Basic认证时添加请求头

    http Basic认证 http协议定义的一种认证方式,将客户端id和客户端密码按照"客户端ID:客户端密码"的格式拼接,并用base64编 码,放在header中请求服务端, ...

  5. js实现element中可清空的输入框（2）

    接着上一篇的:js实现element中可清空的输入框(1)继续优化,感兴趣的可以去看看哟,直通车链接:https://www.cnblogs.com/qcq0703/p/14450001.html 实 ...

  6. Omega System Trading and Development Club内部分享策略Easylanguage源码 （第二期）

    更多精彩内容,欢迎关注公众号:数量技术宅,也可添加技术宅个人微信号:sljsz01,与我交流. 我们曾经在前文(链接),为大家分享我们精心整理的私货:"System Trading and ...

  7. SpringBoot利用spring.profiles.active=@spring.active@不同环境下灵活切换配置文件

    一.创建配置文件 配置文件结构:这里建三个配置文件,application.yml作为主配置文件配置所有共同的配置:-dev和-local分别配置两种环境下的不同配置内容,如数据库地址等. appli ...

  8. HDOJ-1560（迭代加深搜索问题）

    DNA sequence HDOJ-1560 *本题是迭代加深搜索问题,主要是要理解题目,题目中一定是有解的,所以为了找最小的解,可以从小的搜索深度开始逐渐增加. *这里有个技巧就是,如果本次指定开始 ...

  9. HDOJ-2087(KMP算法)

    剪花布条 HDOJ-2087 本题和hdoj-1686相似,唯一不同的是这里的子串一定要是单独的.所以在确定有多少个子串时不能用前面的方法.而是在循环时,只要找到一个子串,i就不是++,而是+=子串的 ...

  10. 扫盲贴|如何评价一款App的稳定性和质量？

    作者:友盟+移动开发专家 张文 「崩溃」与「卡顿」.「异常退出」等一样,是影响App稳定性常见的三种情况.相关数据显示,当iOS的崩溃率超过0.8%,Android的崩溃率超过0.4%的时候,活跃用户 ...