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. 庐山真面目之十四微服务架构的Docker虚拟技术深入探究

    庐山真面目之十四微服务架构的Docker虚拟技术深入探究 一.我的开场白 曾几何时,分布式的发展也影响了后来的微服务架构的实现方式.到了现在,只要涉及到互联网技术领域,就会设计一个概念,那就是微服务. ...

  2. 每天自学两小时Python,整理了最详细的学习路线和规

    上次这篇文章每天自学两小时Python,三个月学通月入20K主要是给大家整理了学习资料视频和PDF书籍,很多需要的都关注私信领取了. 很多朋友领取之后都问我教程有了那么应该从哪去开始学习呢,私信太多我 ...

  3. JProfiler使用说明及常用案例分析

    1 配置远程连接 (1)启动JProfiler,选择Attach to a running JVM (2)选择Quick Attach,然后选择On another computer,然后选择Edit ...

  4. SpringCloudAlibaba—微服务概念及SpringCloudAlibaba介绍

    目录 1.1 系统架构演变 1.1.1 单体应用架构 1.1.2垂直应用架构 1.1.3 分布式架构 1.1.4 SOA架构 1.1.5 微服务架构 1.2 微服务架构介绍 1.2.1 微服务架构的常 ...

  5. ognl表达式应用场景和用法

    ognl表达式的用法和应用场景 1.配置文件 //书写方式是:'${@类全限定名@常量}' dic_city.type=${@com.imooc.constant.DictionaryConstant ...

  6. Spring Boot 快速迁移至 Quarkus

    Quarkus 是一个目前非常火的 Java 应用开发框架,定位是轻量级的微服务框架.,Quarkus 提供了优秀的容器化整合能力,相较于传统开发框架(Spring Boot)有着更快的启动速度.更小 ...

  7. IDEA xml 注解快捷键

    注释:CTRL + SHIFT + / 撤销注释:CTRL + SHIFT + \

  8. JavaScript遍历对象方法总结

    前言 本篇内容将按照下图展开: 遍历Object Object最常见的遍历方法方法就是使用for...in...,但其有一定的局限性,比如只能遍历可枚举属性.虽然Object无法直接使用for循环和f ...

  9. hdu 2841 Visible Trees(容斥)

    原文链接 There are many trees forming a m * n grid, the grid starts from (1,1). Farmer Sherlock is stand ...

  10. 文档翻译第001篇:Process Monitor帮助文档(Part 1)

    [译者注] Process Monitor是一款非常著名的系统进程监视软件.总体来说,Process Monitor相当于Filemon+Regmon,其中的Filemon专门用来监视系统中所有文件的 ...