开发者社区> 叶秋学长> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

奶爸级教学---webpack详细教学

简介: ​ 作者是名退役复学在校大学生,对jdk、spring、springboot、springcloud、mybatis等开源框架源码有一定研究,欢迎关注,和我一起交流。 今天手把手教学webpack,奶爸级教学,一键三连收藏起来吧。 一、webpack webpack 中文文档 | webpack 中文网 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bu
+关注继续查看

 作者是名退役复学在校大学生,对jdk、spring、springboot、springcloud、mybatis等开源框架源码有一定研究,欢迎关注,和我一起交流。

今天手把手教学webpack,奶爸级教学,一键三连收藏起来吧。

一、webpack

webpack 中文文档 | webpack 中文网

    • 概念

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

    imageimage.gif编辑

    二、前端模块化

    1、传统的开发模式

      • 场景:有一个复杂的页面,需要小明和小红分别开发其中的部分模块。小明和小红分别写了各自的js文件,最后合并引入,小明的js文件为a.js和c.js;小红的文件为b.js。

      imageimage.gif编辑

      imageimage.gif编辑

        • 存在的问题:小明的a.js中的age >= 18 为true,c.js中的 age>=18为false,小明百思不得其解???
          • 原因:变量命名冲突/js加载顺序问题(如果先加载c.js再加载b.js也可以解决问题)
          • 解决方案:匿名函数,声明函数立马调用函数,函数具有作用域变量就隔离了,使用return返回需要给别人访问的成员
              • (function() {})()
              • (function(){}())

              // a.js

              const moduleA = (function() {

                  var name = '张三'

                  var age = 20


                  if(age >= 18) {

                      console.log('成年人');

                  }


                  return {

                      name,

                      age

                  }

              })()

              // b.js

              const moduleB = (function() {

                  var age = 10


                  return {

                      age

                  }

              })()

              // c.js

              console.log(moduleA.age);

              if(moduleA.age >= 18) {

                  console.log('成年人');

              }

              2、使用ES6模块化

              imageimage.gif编辑

                • 给script标签添加type属性等于module

                <script src="./js/a.js" type="module"></script>

                <script src="./js/b.js" type="module"></script>

                <script src="./js/c.js" type="module"></script>

                  • 会报错

                  imageimage.gif编辑

                  原因:只支持协议http, data, chrome, chrome-extension, https,这边直接使用file文件打开,属于file协议

                  解决:

                  第一种:

                  1、安装【anywhere】插件,搭建一个服务器。使用命令【npm i anywhere -g】,需要node环境支持。

                  2、打开终端,切换到当前项目目录下

                  3、使用命令【anywhere】启动

                  4、根据终端输出的地址去访问html,后面跟上html所在的路径

                  第二种:

                  商店搜索【Live Server】安装,安装完之后,再html文件里面右键,选择【Open With live server】

                  仍然报错

                  imageimage.gif编辑

                  原因:使用ES6模块化操作,使用type="module"引入js文件,js文件就是一个单独的模块,外部无法访问

                  解决:每个js模块需要导出给外部访问的成员

                    • export和import
                        • export导出
                        • import导入
                          imageimage.gif编辑
                        • 也可以分别导出
                          imageimage.gif编辑
                        • 导入起别名,使用as
                          imageimage.gif编辑
                        • 导入所有,使用*号,必须起别名方便后续调用

                        imageimage.gif编辑

                          • 导出默认,对于*不管你有没有defalut
                            imageimage.gif编辑

                          3、使用CommonJS规范

                          CommonJS规范 - 简书

                          imageimage.gif编辑

                            • 报错,js没有module和require这两个关键字,这是commonJS设计的关键字,无法被js识别
                              imageimage.gif编辑
                            • 使用webpack
                                • 常见main.js作用程序入口,引入html需要的js
                                • 下载webpack,打开终端,使用命令【npm i webpack@3 webpack-cli -g】
                                • 使用终端进入项目【cd 项目路径】
                                • 使用打包命令【webpack 要打包的文件 打包生成的位置】,【webpack main.js ./dist/bundle.js】
                                • 修改html引入的js地址为打包生成的js文件

                                三、webpack配置文件

                                每次都要输入打包的文件和生成后的地址,比较麻烦,可以使用webpack的配置文件

                                  1. 新建文件【webpack.config.js】
                                  2. 配置文件

                                  require('path'),node自带的一个模块,用来处理路径

                                  entry:入口函数,要处理文件

                                  output:出口,输出文件的位置

                                  resolve()拼接路径

                                  __dirname:node环境全局变量,当前文件的绝对路径

                                    1. 使用终端进入项目根目录,输入命令【webpack】,webpack会自动查找目录下的webpack.config.js文件,读取里面的配置进行打包

                                    ######

                                    四、项目管理文件

                                    前面的命令默认去全局配置的找运行依赖,但是一个项目应该有属于自己项目的依赖,而且项目使用了哪些依赖应该记录下来

                                    使用命令初始化【npm init】package.json文件

                                      • dependencies:生产环境下,项目运行所需依赖。
                                      • devDependencies:开发环境下,项目所需依赖。
                                      • scripts:执行 npm 脚本命令简写,比如"start": "xxx xx", 执行 npm start 就是运行 "xxx xx"。

                                      五、webpack的loader

                                      我们使用webpack来处理我们写的js代码,并且webpack会自动处理js之间相关的依赖

                                      在实际项目中不仅仅有js文件,还有css、图片,ES6转化ES5,TypeScript转化ES5代码,将less,scss转化css,将jsx,vue文件转化js文件等

                                      对于webpack本身来说是不具备这些转化功能的,这时候必须使用对应的loader进行处理

                                      大部分的loader都可以在webpack的官网中找到,并且学习相应的用法

                                      如何使用???

                                        • 通过npm安装需要使用的loader
                                        • 在webpack.config.js的modules关键字下进行配置

                                        1、处理CSS

                                        css-loader | webpack 中文网

                                          • 安装对应的loader,使用命令【npm install --save-dev css-loader@3】
                                          • 在webpack.config.js配置【module】
                                            imageimage.gif编辑
                                          • 在main.js中引入css文件,进行打包,这时候会报错,css-loader需要style-loader支持
                                            imageimage.gif编辑
                                            imageimage.gif编辑
                                          • 安装style-loader,使用命令【npm install --save-dev style-loader】
                                          • 重新打包成功

                                          2、处理图片

                                            • 使用css设置背景图片,直接打包,会报错,打包文件需要loader来处理
                                            • 安装【npm install --save-dev file-loader@5】
                                            • 在webpack.config.js配置【module】

                                            imageimage.gif编辑

                                              • 打包成功,但是打开html发现没有背景图片,通过开发者工具发现是背景地址有误

                                              imageimage.gif编辑

                                                • 配置file-loader的options中的publicPath

                                                imageimage.gif编辑

                                                3、ES6转ES5

                                                检查打包后的文件有es6代码,有的浏览器还不支持es6,所以有时候我们需要将es6的代码转化成es5

                                                  • 安装loader,【npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env】
                                                  • 在webpack.config.js配置【module】

                                                  imageimage.gif编辑

                                                  如果你不行的话试一下这个版本号  

                                                  imageimage.gif编辑

                                                    • 打包,已经没有ES6代码了

                                                    4、打包Vue

                                                      • 下载vue,【npm i vue】
                                                      • 使用Vue
                                                        imageimage.gif编辑
                                                      • 打包,打开html,没有效果控制台报错,需要指定使用Vue的版本。这边Vue的写法是compiler(模板写法),默认使用的是runtime(运行时)模式,需要修改默认模式

                                                      imageimage.gif编辑

                                                        • webpack.config.js配置resolve,重新打包,Vue代码生效
                                                          imageimage.gif编辑
                                                        • el与template
                                                          我们如果要修改页面内容,必须修改html文件,使用组件也是直接写在html里面,现在准备把内容分离出来
                                                          el属性,用于与#app进行绑定,让Vue实例可以管理其他内容
                                                          template属性,Vue会把#app替换成template里面的内容
                                                          我们可以把#app的内容删除,写到template属性

                                                        imageimage.gif编辑

                                                          • 现在的内容都写在Vue实例里面,现在剥离出来,通过注册组件的方式实现
                                                            imageimage.gif编辑
                                                          • 把变量App分离到单独的文件
                                                            imageimage.gif编辑
                                                          • 使用.vue文件
                                                            imageimage.gif编辑
                                                          • 打包会报错,没有loader处理.vue这种文件类型,安装vue-loader【npm i vue-loader@14】【npm i vue-template-compiler】
                                                          • 配置modle


                                                          {
                                                               test: /\.vue$/,
                                                                use: ['vue-loader'],
                                                                },
                                                          image.gif
                                                          • 打包成功
                                                          • 现在要开发一个组件就很容易了,进行了模块化,一个组件就是一个单独的文件
                                                            imageimage.gif编辑

                                                          六、plugin

                                                            • plugin是什么?
                                                                • plugin是插件的意思,用于对现有框架进行的扩展
                                                                • webpack中的插件就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等
                                                                • loader与plugin的区别
                                                                    • loader主要用于转换某些类型的模块,是一个转换器
                                                                    • plugin是插件,是对webpack本身的扩展,是一个扩展器
                                                                    • plugin 的使用过程
                                                                        • 通过npm安装需要的plugins(webpack内置已经有的就不需要)
                                                                        • 在webpack.config.js中的plugins中配置插件

                                                                        1、添加版权的plugin

                                                                        imageimage.gif编辑

                                                                        2、打包html的plugin

                                                                        打包后的dist文件夹没有html文件,不完整

                                                                        安装【npm i html-webpack-plugin@3】

                                                                        imageimage.gif编辑

                                                                        现在dist已经有html文件了,但是我们要在添加#app的div上去,默认只是一个基本的html文件

                                                                        加上配置

                                                                        imageimage.gif编辑

                                                                        这时候打包出来的html是我们设计好的html文件,自动加上了js的引用

                                                                        3、压缩js的plugin

                                                                        打包出来js文件比较大,需要压缩

                                                                        安装【npm i uglifyjs-webpack-plugin@1】

                                                                        配置

                                                                        const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

                                                                        new uglifyjsWebpackPlugin(),

                                                                        七、搭建本地服务

                                                                        现在预览效果需要每次打包,比较麻烦

                                                                        webpack提供了一个可选的本地开发服务器,可以实现浏览器自动刷新显示修改后的结果

                                                                        安装【npm install webpack-dev-server】

                                                                        终端输入【webpack-dev-server】,报错默认去全局找,所以需要局部配置

                                                                        终端输入【npm init】生成项目管理文件package.json

                                                                        配置script

                                                                        imageimage.gif编辑

                                                                        使用命令【npm run dev】启动

                                                                        修改配置

                                                                        imageimage.gif编辑

                                                                        自动打开浏览器

                                                                        imageimage.gif编辑


                                                                        版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

                                                                        相关文章
                                                                        js: webpack插件的使用
                                                                        js: webpack插件的使用
                                                                        12 0
                                                                        js: webpack插件的使用
                                                                        js: webpack插件的使用
                                                                        60 0
                                                                        webpack学习
                                                                        学习网站https://github.com/webpack-china/awesome-webpack-cnhttp://blog.guowenfh.com/2016/03/24/vue-webpack-01-base/
                                                                        1320 0
                                                                        webpack初识!
                                                                        最近在使用webpack 感觉棒棒哒 下面这个简单的教程可以让你走入webpack的世界 欢迎使用webpack 这个小教程通过简单的例子来引导大家使用webpack 通过这些这篇文章你可以学到 如何安装webpack 如何使用webpack 如何使用加载器 如何使用开发服务器 安装webpack  你的电脑上需要先安装node.
                                                                        797 0
                                                                        +关注
                                                                        叶秋学长
                                                                        全栈JAVA领域创作者
                                                                        62
                                                                        文章
                                                                        0
                                                                        问答
                                                                        文章排行榜
                                                                        最热
                                                                        最新
                                                                        相关电子书
                                                                        更多
                                                                        低代码开发师(初级)实战教程
                                                                        立即下载
                                                                        阿里巴巴DevOps 最佳实践手册
                                                                        立即下载
                                                                        冬季实战营第三期:MySQL数据库进阶实战
                                                                        立即下载