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. Array in Depth

    Array in Depth Array.concat() & Array.push() https://developer.mozilla.org/en-US/docs/Web/JavaSc ...

  2. Java线程池状态和状态切换

    摘要 介绍线程池的五种状态RUNNING.SHUTDOWN.STOP.TIDYING和TERMINATED,并简述五种状态之间的切换.   在类ThreadPoolExecutor中定义了一个成员变量 ...

  3. 联童科技基于incubator-dolphinscheduler从0到1构建大数据调度平台之路

    联童科技是一家智能化母婴童产业平台,从事母婴童行业以及互联网技术多年,拥有丰富的母婴门店运营和系统开发经验,在会员经营和商品经营方面,能够围绕会员需求,深入场景,更贴近合作伙伴和消费者,提供最优服务产 ...

  4. SQL EXPLAIN解析

    本文转载自MySQL性能优化最佳实践 - 08 SQL EXPLAIN解析 什么是归并排序? 如果需要排序的数据超过了sort_buffer_size的大小,说明无法在内存中完成排序,就需要写到临时文 ...

  5. ffmpeg番外篇：听说这款水印曾经在某音很火？办它！

    今天在瞎逛时,偶然看到一个CSDN上的哥们说,他们曾经被一个水印难住了,仔细看了下,感觉可以用一行命令实现. 需求如下:视频加gif水印,gif循环,同时n秒后水印切换位置继续循环 这哥们遇到了两个问 ...

  6. while(1)和system("pause")区别

    我们在调试时,有时候会用到这两个语句. 1.显而易见,第一个是一个循环函数,占cpu.占内存: 2.system("pause")是一个系统调用,占内存,不占cpu;这个开销还是有 ...

  7. 构造方法和this的作用

    一.构造方法概述 构造方法是一个特殊的方法 是创建对象时候调用的方法 方法的名字很特殊:必须和类名保持一致,大小写都要一样 方法没有返回值 方法也没有返回值类型 构造方法无法在外部手动调用 publi ...

  8. Spark性能调优-RDD算子调优篇（深度好文，面试常问，建议收藏）

    RDD算子调优 不废话,直接进入正题! 1. RDD复用 在对RDD进行算子时,要避免相同的算子和计算逻辑之下对RDD进行重复的计算,如下图所示: 对上图中的RDD计算架构进行修改,得到如下图所示的优 ...

  9. STL中常用容器及操作 学习笔记1

    @[TOC](下面介绍STL中常见的容器及操作)## 不定长数组 vector> vetcor:其实就是一个数组或者说是容器 其操作不同于之前直接定义的数组 > 而且可以直接赋值也可以直接 ...

  10. 使用当前主流的github管理项目代码(记我的第一次项目创建)

    先创建一个github的账号 网址:https://github.com/ 然后下载一个git工具并安装 网址:https://gitforwindows.org/ 下载安装注册完成后, 创建一个新的 ...