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.youkuaiyun.com/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 基础就到这里啦,明天见!