webpack4-01:概念与零配置Hello World

时间 2019-12-04

标签 webpack4 webpack 概念配置 hello world 繁體版

原文原文链接

前提

本人才疏学浅，若有描述不对，或者理解错误的地方欢迎指出。会及时改正！html

此教程基于windows 64位操做系统node

Nodejs 版本：v10.15.1
npm : 6.4.1
webpack : 4.30.0

概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个 bundle。webpack

从 webpack v4.0.0 开始，能够不用引入一个配置文件也能完成简陋的打包效果。git

在开始以前，请确保安装了Node.js的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，理想的起步。使用旧版本，你可能遇到各类问题，由于它们可能缺乏 webpack 功能以及/或者缺乏相关 package 包。github

本地安装

webpack v4+ 开始须要与webpack-cli（此工具用于在命令行中运行 webpack）一块儿安装：web

mkdir lesson-01 && cd lesson-01
npm init -y
npm i webpack webpack-cli -D
复制代码

补充：npm

npm init -y 中 -y是 --yes 的简写，若是不加会一直让你敲回车，省去敲回车的过程。
-D 是 --save-dev 的简写，意思是包的依赖出如今到根目录下的 package.json 内的 devDependencies 对象中,此对象是用于开发环境所依赖的包。
-S 是 --save 的简写，包的依赖出如今 dependencies 对象中，此对象是生产环境所依赖的包。

注意点

当安装完成webpack、webpack-cli后，运行时：json

webpack -v

'webpack' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
复制代码

发现webpack不是内部指令，实际上是没有全局webpack变量的缘由，可是官方不推荐全局安装 webpack，由于这样这会将你项目中的 webpack 锁定到指定版本，而且在使用不一样的 webpack 版本的项目中，可能会致使构建失败。windows

解决办法

咱们在安装Node.js的时候,顺带的把npm、npx安装了，在这里重点是npx，因此咱们须要使用npx运行webpack的命令。以下：浏览器

npx webpack -v

4.30.0
复制代码

这样就解决了不安装全局webpack致使的问题。

Hello World

解决上面问题后，进入正题，零配置Hello World。

新增src/index.js、index.hmtl文件。目录以下：

lesson-01
  |- node-modules
  |- package.json
  |- package-lock.json
+ |- /src
+   |- index.js
+ |- index.html

复制代码

src/index.js

console.log('Hello World!');
复制代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script src="./dist/main.js"></script>
</body>
</html>
复制代码

如今使用npx运行webpack命令：

npx webpack

Hash: 512808a97d0c43adbe09
Version: webpack 4.30.0
Time: 602ms
Built at: 2019-04-21 10:51:34
  Asset       Size  Chunks             Chunk Names
main.js  957 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 28 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
复制代码

运行后，会看到根目录下生成了dist/main.js目录及文件。这是webpack v4+ 默认导出打包的路径以及文件名称，而默认打包的入口既是src/index.js。

在看看上面的打包结果发现有一个警告，意思是在webpack v4+ 开始须要一个mode的配置选项，此选择是用来选择打包的模式，选项有两个值，分别为：development、production，开发环境、生产环境。不配置默使用的是production，可是不写参数会有此警告。因此尽量的写上mode参数！

在运行命令以前，观察dist/main.js文件的变化，便可知道参数值不一样的打包效果。

如今咱们再次运行一下webpack命令：

npx webpack --mode development

Hash: 44b171184298522aaf01
Version: webpack 4.30.0
Time: 128ms
Built at: 2019-04-21 11:04:20
  Asset     Size  Chunks             Chunk Names
main.js  3.8 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.js] 28 bytes {main} [built]
复制代码

如今已经解决警告的问题。

完成

如今，在浏览器打开目录下index.html就看到控制台打印 “Hello World！” 字样，这就是零配置！！！！

项目地址

源码地址点击这GitHub