webpack是为现代js程序准备的静态模块打包工具

一:关于对webpack的理解

可以将其认为是一个电脑主板,由于使用js作为源码,因而其可以默认编译js代码(别种类型的文件可以依靠loaders或plugins),因为其底层由node提供支持,因而其支持编译common/esmodule的导入方式。而其被三大框架使用的原因是生态————提供了近乎所有文件的编译工具,这也使得webpack对整个前端工程的支持近乎全面。

二:安装

想要安装使用webpack,应首先确保安装node

截至当前,webpack更新到了5,笔者也使用的webpack5,node最低需12.x.x,可以命令行下使用node -v查看node版本

命令行下输入以下命令:

//全局安装
npm install webpack webpackcli -g //局部安装(推荐)
npm install webpack webpackcli -D
  • 问题1:推荐局部安装的原因

有时候可能项目的webpack版本不同,不同的webpack可能会存在不兼容

  • 问题2:为什么要安装webpackcli,

webpackcli并不是必需的,三大框架并没有安装webpackcli,安装webpackcli是由于当前命令行里需要webpackcli执行webpack内的命令且需要一些参数时,换句话说,此刻webpack需要webpackcli执行带参数的 命令,而webpackcli又依赖webpack(互相依存)

读者也可以指定webpack版本:

// 如:npm install webpack@3.6.0
npm install webpack@xxxxx

三:尝试写一个小demo

  • 如果全局安装了webpack:

    全局环境下,webpack命令可以在任一目录中使用

为演示webpack同时支持es6导入导出和common导入导出,以下两个非index.js文件使用两种方式

新建项目目录:

—mydemo

______src

——————__index.js

——————__common.js

——————__esmodule.js

——————index.html

//common.js
// node的导出流
const common_export = function(){
return '我是node的导出流'
}
module.exports = {
common_export
} //esmodule.js
// es6的导出流
export function es_export(){
return '我是esmodule的导出流'
} // index.js
import { es_export } from './esmodule'
const { common_export } = require('./common')
console.log(es_export(),common_export());

此时可以在mydemo目录命令行下输入webpack

即可生成一个dist目录,且内部生成一个main.js的文件,即如今项目结构显示如下:

—mydemo

______dist

——————__main.js

______src

——————__index.js

——————__common.js

——————__esmodule.js

——————index.html

假设读者有live-server这个插件且index.html中引入了./dist/main.js这个文件,在live on browers以后控制台会出现打印消息:

此时可以做个总结:

  1. webpack天然支持js的两种导入导出流
  2. 在输入webpack后会默认将当前目录下src目录中的index.js作为入口,且会默认在当前目录下生成dist目录并将打包后的js文件合并成./dist/main.js
  3. webpack天然支持生成静态文件,只需在index.html中引用打包后的main.js文件即可
  • 局部使用

    局部环境下,想要执行webpack命令,需要将webpack作为node中的一个包使用,此时,需要使用npm包管理器,换句话说,需要node支持

想要使用node环境,需要使用npm init命令生成package.json目录,这个目录记录当前npm的一些信息,可以在这里查看已安装的包目录

如果目录中有中文名,可以使用 npm init -y命令,这是由于node对中文的支持并不好

注:于全局目录此时保持一致

  1. 在新建目录下进行npm初始化

    npm init -y
  2. 下载webpack包

    npm install webpack -D

    -D是指开发时要用到的依赖,-S是生产环境也要用到的依赖

    如果此时package.json中显示有webpack包名,则说明局部安装成功

注意:此时此刻想要打包文件,不应使用webpack命令,因为一但使用webpack命令,则会使用全局的webpack进行打包————这与初衷不符

如何使用局部webpack命令打包项目?

  1. 可以使用.bin

使用.bin默认查找node-module下的webpack

.\node_modules\.bin\webpack

  1. 使用npx

使用npx将优先使用局部webpack,同方法1一样

npm webpack

  1. package.json的script字段中,使用命令(推荐使用)



    如果是这种方式,可以使用npm run build命令,此时将默认执行局部的webpack命令(本质上,所有局部查找的命令都是查找node-modules里的安装的包并且运行这个包)

下一记:webpack本身的配置以及其loader配置

webpack解析(1)的更多相关文章

  1. 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...

  2. webpack核心概念

    一.webpack四个核心概念 1.入口[Entry] webpack将创建所有应用程序 依赖关系图表.图表的起点被称之为 入口起点.入口起点告诉webpack从哪里开始,并遵循着依赖关系图表知道打包 ...

  3. 搭建一个属于自己的webpack config(-)

    搭建一个属于自己的webpack config(-) 前期准备 环境说明 mac 10.12.6 node v8.8.1 npm 5.4.2 全局安装下webpack.webpack-dev-serv ...

  4. webpack入门(六) API in modules

    A quick summary of all methods and variables available in code compiled with webpack. 用webpack编译的一些变 ...

  5. webpack入门(四)webpack的api 2 module

    接着介绍webpack的module. module Options affecting the normal modules (NormalModuleFactory)  这些选项影响普通的模块 m ...

  6. webpack入门(三)webpack的api

    终于到了webpack api这一篇,我都等不及了0.0; webpack is fed a configuration object. Depending on your usage of webp ...

  7. vue2+webpack 开发环境配置

    前提条件: 1.安装node.js https://nodejs.org/en/ 下载安装合适的平台 2.安装npm 第一步:初始化项目 新建文件夹 E:\app 推荐vue项目目录结构: confi ...

  8. 一字一句的搞懂vue-cli之vue webpack template配置

    webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...

  9. Webpack知识汇总

    介绍 webpack把任何一个文件都看成是一个模块,模块间可以相互依赖(require or import),webpack的功能就是把相互依赖的文件打包在一起.webpack本身只能处理原生的Jav ...

随机推荐

  1. 翻译:《实用的Python编程》07_05_Decorated_methods

    目录 | 上一节 (7.4 装饰器) | 下一节 (8 测试和调试) 7.5 装饰方法 本节讨论一些与方法定义结合使用的内置装饰器. 预定义的装饰器 在类定义中,有许多预定义的装饰器用于指定特殊类型的 ...

  2. 通过Dapr实现一个简单的基于.net的微服务电商系统(五)——一步一步教你如何撸Dapr之状态管理

    状态管理和上一章的订阅发布都算是Dapr相较于其他服务网格框架来讲提供的比较特异性的内容,今天我们来讲讲状态管理. 目录:一.通过Dapr实现一个简单的基于.net的微服务电商系统 二.通过Dapr实 ...

  3. RE.从单链表开始的数据结构生活(bushi

    单链表 单链表中节点的定义 typedef struct LNode{ int data;//数据域 struct LNode *next;//定义一个同类型的指针,指向该节点的后继节点 }LNode ...

  4. 浅入Kubernetes(12):Deployment 的升级、回滚

    目录 更新 上线 会滚 缩放 Deployment 直接设置 Pod 水平自动缩放 比例缩放 暂停 Deployment 上线 本篇内容讨论 Pod 的更新和回滚,内容不多. 更新 打开 https: ...

  5. 终于可以像使用 Docker 一样丝滑地使用 Containerd 了

    有追求的工程师一般都是有技术洁癖的,云原生的世界更是如此,Kubernetes虽然制定了容器运行时接口(CRI)标准,但早期能用的容器运行时只有Docker,而Docker 又不适配这个标准,于是给 ...

  6. JavaScript课程——Day07(对象简介、Math对象、时间对象、字符串对象)

    1.对象简介 在javaScipt中,一切皆为对象或者皆可以被用作对象 宿主对象:window,document 内置对象:Number  String  Boolean  Array数组  Obje ...

  7. 配置 ESLint 自动格式化自闭合标签(Self closing tag)

    对于没有子元素或不需要子元素的 HTML 标签,通常写成其自闭合的形式会显得简洁些, - <SomeComponent></SomeComponent> + <SomeC ...

  8. Docker笔记(一) 基础知识

    官方文档地址:https://www.docker.com/get-started 中文参考手册:https://docker_practice.gitee.io/zh-cn 笔记原作者:陈艳男 B站 ...

  9. 1438. Longest Continuous Subarray With Absolute Diff Less Than or Equal to Limit

    Given an array of integers nums and an integer limit, return the size of the longest continuous suba ...

  10. ASP程序写的项目与微信服务号(公众号)完美结合。仅需一个DLL组建WeixinDLL

    因ASP程序开发有很多优点,早年间ASP风靡全球,因此如今还在继续运营的ASP开发的项目仍在运行着,但是随着社交网络不断发达,特别是微信支付.微信通讯.小程序等的出现,导致很多ASP项目对接起来就比较 ...