内容简介：本人才疏学浅，如有描述不对，或者理解错误的地方欢迎指出。会及时改正！此教程基于windows 64位操作系统本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
本人才疏学浅，如有描述不对，或者理解错误的地方欢迎指出。会及时改正！
此教程基于windows 64位操作系统
- Nodejs 版本：v10.15.1
- npm : 6.4.1
- webpack : 4.30.0
概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
从 webpack v4.0.0 开始，可以不用引入一个配置文件也能完成简陋的打包效果。
在开始之前，请确保安装了Node.js的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。
本地安装
webpack v4+ 开始需要与webpack-cli（此 工具 用于在命令行中运行 webpack）一起安装：
mkdir webpack-demo && cd webpack-demo npm init -y npm i webpack webpack-cli -D 复制代码
注意点
当安装完成webpack、webpack-cli后，运行时：
webpack -v 'webpack' 不是内部或外部命令，也不是可运行的程序 或批处理文件。 复制代码
发现webpack不是内部指令，其实是没有全局webpack变量的原因，但是 官方不推荐全局安装 webpack ，因为这样这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
解决办法
我们在安装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]
复制代码
现在已经解决警告的问题。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
