Webpack基础及打包应用
一. Webpack是什么?
Webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler).前端的所有资源文件都会被作为模块处理. Webpack将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundler)
二. 五个核心概念
二.1 Entry
入口(Entry) 指示 Webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图
二.2 Output
输出(Output) 指示 Webpack 打包后的资源 bundles 输出到哪里去,以及如何命名
二.3 Loader
Loader 让 Webpack 能够去处理那些非 JavaScript 文件(Webpack 自身只理解 JavaScript)
二.4 Plugins
插件(Plugins) 可以用于执行范围更广的任务,插件的范围包括 : 从打包优化和压缩, 一直到重新定义环境中的变量等.
二.5 Mode
模式(mode)指示 Webpack 使用相应模式的配置
选项 | 描述 | 特点 |
---|---|---|
development | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 启用 NamedChunksPlugin 和NamedModulesPlugin. | 能让代码本地调试运行的环境 |
production | 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置 为 production. 启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin,ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin. | 能让代码优化上线运行的环境 |
三. 安装
1. 安装node.js
因为 Webpack 是基于 node.js 命令的,所以我们要先下载 node.js.
安装配置node.js 转载于 : https://www.runoob.com/nodejs/nodejs-install-setup.html
2. 项目初始化配置
初始化 package.json 输入指令 : npm init
会出现一个package name:(你的文件夹名称) ; 我们随便定义一个就好 ,例如 webpack_test. 后面一直回车就好
3. 安装Webpack
这两个指令都可以安装一遍,大写G是当前项目局部安装,小写g是局部安装,每个文件都可以使用
输入指令 :
npm install webpack webpack-cli -g
npm install webpack webpack-cli -D
四. 编译打包应用
四.1. 创建文件
由于我们前面进行了项目配置,然后我们这个时候打开vscode,创建 src、build文件夹. src 里面再创建一个 index.js 文件为你项目的入口文件,build为打包的文件夹,里面不需要创建什么文件,后期打包回自动创建.
四.2. 运行环境指令
开发环境:
指令:webpack ./src/index.js -o build --mode=development
功能:webpack 能够编译打包 js 和 json 文件,并且能将 es6 的模块化语法转换成 浏览器能识别的语法.
生产环境:
指令:webpack ./src/index.js -o build --mode=production
功能:在开发配置功能上多一个功能,压缩代码.
四.3. 打包js文件
四.3.1 我们先在src下的index.js文件写入js内容
四.3.2 开发环境命打包 我用 vscode 终端执行命令时会报错,后来发现会报错.你可以用cmd进入指定文件夹在使用生产环境的命令就可以了 webpack ./src/index.js -o build --mode=development 会看到 build 文件里面生成了 main.js 文件,打包完之后文件会打一点,因为生产环境会写入一些弄西,我们不用看上辺,文件下面才是我们想看的.会发现 index.js 文件已经被打包成功
四.3.3 生产环境命打包 同样用cmd命令窗口执行生产环境的命令就可以了 webpack ./src/index.js -o build --mode=production 会看到 build 文件里面生成了 main.js 文件, 它与开发环境不同的是,生产环境是因为要上线的,为了提高性能,打包的文件会以压缩版的形式打包
四.3.4 执行js 我们在build文件夹下创建一个index.html文件,然后script引入main.js文件,打开浏览器,就可以看到控制台上输出了3
四.4. json文件
四.4.1 我们在src目录下创建data.json文件写入json内容
四.4.2 我们在index.js中模块化语法引入data.json,然后控制台打印. 之所以在这个文件中继续使用是因为打包文件夹已经引入打包文件,这样省的再去引入,方便
四.4.3 这里一定要切记,每次更改项目之后,必须重新执行打包命令(至于打包什么环境看你自己)打包一次,更新内容,这里就不在演示了.
四.4.4 我们刷新刚才打开的浏览器,点击刷新,就可以看到控制台输出的 json 对象
四.5. Sass文件
四.5.1 如果你不了解 sass 怎么使用,你可以去我的主页学习 sass 是怎么使用的,因为第一次使用 sass,涉及到了保存配置路径的问题. 我的 Sass 博客地址 : https://blog.csdn.net/L_u_c_k_y_m_a_n/article/details/117319220
四.5.2 我们在src目录下创建a.scss文件写入scss内容
四.5.3 我们在 index.js 中引入 import ‘./a.scss’;
四.5.4 我们会发现打包出错,抛出异常.这是因为 Webpack 本身不能打包 scss文件,但是后期我们会学习配置 Webpack,从而就可以打包 scss.
四.6. Webpack打包应用优点
1. webpack 能够编译打包 js 和 json 文件。
2. 能将 es6 的模块化语法转换成浏览器能识别的语法。
3. 能压缩代码
四.7. Webpack打包应用缺点
1. 不能编译打包 css、img 等文件。
2. 不能将 js 的 es6 基本语法转化为 es5 以下语法。
五. 总结
今天学习了 Webpack 打包工具,收获也蛮多的,当然期间也遇到过一些问题,比如在 vscode 编译器中 由于权限不够,会导致出现一些问题,后来用的 cmd 命令窗口.然后 webpack打包工具也是基于 nodejs 命令来执行的.最后看了一眼明天继续要学的 webpack配置,大概就是配置完后,下次再 打包时不用那么长的命令来打包,只需一个 webpack 就可以了,也可以配置你想打包的环境. 好了,今天的 webpack 基础就到这里啦,明天见!