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. CORS & OPTIONS & preflight request

    CORS & OPTIONS preflight request CORS 原理 CORS跨域的原理实际上是浏览器与服务器通过一些HTTP协议头来做一些约定和限制 OPTIONS 应用场景 h ...

  2. vue components registration & vue error & Unknown custom element

    vue components registration & vue error & Unknown custom element vue.esm.js:629 [Vue warn]: ...

  3. css ::selection 选择文本改变样式

    .p1::selection{ background: red; color: #fff; }

  4. 开发Microsoft Teams选项卡应用安全注意事项

    我们都知道,为了方便广大的开发人员快速开发Microsoft Teams选项卡应用,微软提供了一个JS SDK,你可以通过这里 https://docs.microsoft.com/en-us/jav ...

  5. idea快捷键：查找类中所有方法的快捷键

    查找类中所有方法的快捷键 第一种:ctal+f12,如下图 第二种:alt+7,如下图

  6. 「TcaplusDB知识库」概念（表、键、记录、索引）

       TcaplusDB作为一款NoSQL数据库,语法与传统的SQL关系库有所差异.本文将详细介绍TcaplusDB表.记录.索引这三个数据库中常用术语在TcaplusDB中的概念与意义. 术语\概念 ...

  7. 【Notes_3】现代图形学入门——基础变换、MVP变换模型

    基础变换(二维) 三维变化与二维变换矩阵类似 齐次坐标下的基础变换 Scale: \[S(s_x,s_y) =\begin{pmatrix} s_x &0 &0\\ 0 & s ...

  8. 导出----用Excel导出数据库表

    根据条件导出表格: 前端 <el-form-item label=""> <el-button type="warning" icon=&qu ...

  9. JAVA 判断一个字符串是否是合法的日期格式？

    采用SimpleDateFormat类的parse方法进行判断,如果转换不成功,就会出现异常.另外,还需要判断字符串的长度,若不判断,第二个字符串就会验证通过,实际上也不是合法的.话不多说,且看代码: ...

  10. 01.从0实现一个JVM语言之架构总览

    00.一个JVM语言的诞生过程 文章集合以及项目展望 源码github地址 这一篇将是架构总览, 将自顶向下地叙述自制编译器的要素; 文章目录 01.从0实现一个JVM语言之架构总览 架构总览目前完成 ...