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. nasm astrcspn函数 x86

    xxx.asm %define p1 ebp+8 %define p2 ebp+12 %define p3 ebp+16 section .text global dllmain export ast ...

  2. 高性能环形队列框架 Disruptor 核心概念

    高性能环形队列框架 Disruptor Disruptor 是英国外汇交易公司LMAX开发的一款高吞吐低延迟内存队列框架,其充分考虑了底层CPU等运行模式来进行数据结构设计 (mechanical s ...

  3. 运用Spock编写高质量单元测试

    单元测试作为提升代码质量的有效方法,目前在国内各大互联网公司的开发团队中,尤其是业务团队中却鲜少被使用.这主要由于大家对于单元测试有一些认知错误,或者没有正确的打开方式.至今我们团队在小剧场.零代码运 ...

  4. AtCoder Regular Contest 113

    比赛地址 A(暴力) 题目链接 题目: 给出\(K\),求出满足\(A\times B\times C\le K\)的\((A,B,C)\)对数 解析: 将C移动到等式右边,得到\(A\times B ...

  5. Hadoop生态常用数据模型

    Hadoop生态常用数据模型 一.TextFile 二.SequenceFile 1.特性 2.存储结构 3.压缩结构与读取过程 4.读写操作 三.Avro 1.特性 2.数据类型 3.avro-to ...

  6. vue：表单验证时，trigger的值什么时候选blur什么时候选change

    对el-input输入框的验证,trigger的值选blur,即失去焦点时进行验证. 下拉框(el-select).日期选择器(el-date-picker).复选框(el-checkbox).单选框 ...

  7. 使用PowerDesigner进行数据库设计并直接把设计好的表导出相应的建表语句

    Power Designer:数据库表设计工具 PowerDesigner是Sybase公司的一款软件,使用它可以方便地对系统进行分析设计,他几乎包括了数据库模型设计的全过程.利用PowerDesig ...

  8. 生产者与消费者以及ActiveMQ

    生产者与消费者以及ActiveMQ 一. 多线程实现生产者与消费者 1.1 生产者与消费者头文件 #pragma once #include <iostream> #include < ...

  9. 网络地址转换NAT的两种模式（概念浅析）& IP溯源

    由于全球IPv4地址越来越少.越来越贵,因此大到一个组织,小到一个家庭一个人都很难获得公网IP地址,所以只能使用内网地址,从而和别人共享一个公网IP地址.在这种情况下,NAT技术诞生. 翻译 NAT( ...

  10. 10. vue之webpack打包详解

    一.什么是webpack webpack官网给出的定义是 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应 ...