Webpack4 学习笔记 - 01:webpack的安装和简单配置
安装 webpack
新建一个Demo文件夹,执行初始化:
npm init
在Demo文件夹里安装 webpack
和 webpack-cli
:
npm install webpack webpack-cli -D
webpack-cli
可以使用命令行的方式来使用 webpack
,从版本4开始,webpack
和 webpack-cli
分别管理, 如果不安装 webpack-cli
, 就没法使用命令行了。安装完之后,执行
webpack -v
查看安装是否成功。但是,命令执行后,会给你一个大大的错误提示,类似这样:
webpack: command not found
这是因为 webpack
并非全局安装的,当输入这个命令时,npm
会从全局的目录模块中找 webpack
,找不到就报错了。
那怎么运行刚装好的 webpack
呢? 通过 npx
命令来运行就OK了:
npx webpack -v
npx
会寻找存在于项目内node_modules目录下的安装包。
创建项目并简单配置
webpack
安装完毕,接下来就开始写demo,创建几个文件夹和文件,如图:
index.html 中的内容:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>webpack4 学习笔记</title>
</head>
<body><div id='root'></div><script src='./dist/bundle.js'></script>
</body>
</html>
header.js中的内容:
function Header() {var dom = document.getElementById('root');var header = document.createElement('div');header.innerText = '这里是Header区域';dom.append(header);
}module.exports = Header;
index.js中的内容:
const Header = require('./header.js');new Header();
webpack.config.js中的内容:
const path = require('path'); // 得到的path为webpack.config.js所在的目录module.exports = {entry: {main: './src/index.js'},output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},mode: 'development'
}
其中 webpack.config.js
是 webpack
的默认配置文件,关于 webpack
的配置信息默认都要写到这个文件中。
entry
是 webpack
要打包的入口文件,必须要提供一个入口,webpack
才知道从哪里开始打包,否则会报错,这里的入口文件就是src目录下的index.js文件。
output
是出口文件,即打包过的文件放到哪里了。path
就是存放的路径,path.resolve(__dirname, 'dist')
表示路径为根目录下的dist文件夹。filename: 'bundle.js'
表示打包后的文件名为bundle.js。
mode: 'development'
表示当前的工作模式为开发环境,如果不配置 mode
则默认为 production
,即生产环境。
简单配置完成,运行命令:
npx webpack
可以看到文件已经打包好,webpack自动生成了一个dist目录,并把bundle.js放在了该目录下:
打开index.html,可以看到内容正确显示出来:
OK,一个简单的配置完成了。
如果不想通过
npx wepack
这个命令来打包,可以在package.json中配置下 scripts
:
"scripts": {"bundle": "webpack"},
这样,在命令行输入
npm run bundle
同样会完成打包,而且这种配置很灵活,后续可以配置不同的命令来打包出不同的结果。
Webpack4 学习笔记 - 01:webpack的安装和简单配置相关推荐
- Docker基础学习笔记01:Docker安装
文章目录 一.Docker概述 (一)Docker为何物 (二)Docker思想 1.集装箱 2.标准化 3.隔离性 二.在私有云上创建虚拟机 (一)登录OpenStack私有云 1.查看[概览] 2 ...
- Z3 SMTsolver 学习笔记(一) ——安装,环境配置篇
https://github.com/Z3Prover/z3 源文件从这里可以下载.然后看看readMe文件. Windows7下使用Visual Studio 命令符建立Z3 着急的兄弟可以直接跳到 ...
- JSP学习笔记01 - JSP简介及运行环境配置
一.什么是JSP 1.jsp简介 JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它是由Sun Microsystems公司倡导.许多 ...
- Flume学习笔记(一)安装与简单使用
本文环境如下: 操作系统:CentOS 7.2.1511 64位 Flume版本:1.6.0 1. 系统需求 Flume需要Java 1.6及以上(推荐1.7),对Agent监控目录的读写权限. 2. ...
- MyBatis框架学习笔记01:初探MyBatis实现简单查询
文章目录 一.什么是MyBatis (一)MyBatis概述 (二)ORM工具的基本思想 二.创建数据库与表 1.在Navicat里创建MySQL数据库testdb 2.创建用户表 - t_user ...
- Spring框架学习笔记01:初探Spring——采用Spring配置文件管理Bean
文章目录 一.Spring概述 二.入门案例演示 (一)创建Maven项目[SpringDemo2021] (二)在pom.xml文件里添加依赖 场景:勇敢的骑士去完成杀龙的任务. (三)创建杀龙任务 ...
- 树莓派4b学习笔记一:树莓派4B开箱简单配置(远程工具+opencv+pytorch1.3)
最近突然对树莓派起了兴趣,其实主要是为了在树莓派上练习linux操作,此外也能玩出一点花样,例如我就准备用树莓派做一些简单的计算机视觉方面的小实验.话不多说,下面简单介绍一下我对树莓派 ...
- MySQL学习笔记01【数据库概念、MySQL安装与使用】
MySQL 文档-黑马程序员(腾讯微云):https://share.weiyun.com/RaCdIwas 1-MySQL基础.pdf.2-MySQL约束与设计.pdf.3-MySQL多表查询与事务 ...
- PHP学习笔记01: 安装PHP开发套件xampp
PHP学习笔记01: 安装PHP开发套件xampp 1.从网上下载xampp7.3.7 2.安装xampp
最新文章
- python打不开-安装的python为什么打不开
- wxWidgets:wxAccessible类用法
- 前端学习(3314):提取action
- sql azure 语法_Azure Data Studio中SQL Server Profiler
- Emacs Lisp基本语法(六)
- table 谷歌下不出现滚动条
- git pull push 项目的时候总是提示要输入用户名密码的解决方案
- 如何在Windows下载pygame
- maven项目配置私服
- 文件夹提示文件或目录损坏且无法读取怎么修复
- 每一首歌曲的背后都有一段感人的故事……
- HTB-Sequel
- python打开读取文件内容
- [16-8-1]每日总结
- 用户价值VS商业价值
- python 制作网站教程_Python爬取网站博客教程并制作成PDF
- 如何从公网访问局域网WEB服务器
- 视觉SLAM十四讲第六讲
- 读书计划 现在开始……
- python入门到放弃篇46绘制几何图形
热门文章
- 怎么查看这个历史最大连接session数
- 【Java面试题】37 说出ArrayList,Vector, LinkedList的存储性能和特性
- divideSentence
- AngularJs 取消对 html 字符串标签转义
- 微软虚拟学院开学了!
- 【心情】期待 Mr. Jack In New York!
- 检查当前ORACLE连接数
- java queue size_Java中的PriorityQueue size() 方法 - Break易站
- three.js 贴图只显示颜色_C4D作品“花里胡哨”?我怀疑你贴图方式有问题……
- android8.1上musicfx,Android自带音频均衡器MusicFx分析