webpack配置

webpack启程

历史介绍

• 2009年，commonjs规范还未出来，此时前端开发人员编写的代码都是非模块化的，

  • 那个时候开发人员经常需要十分留意文件加载顺序所带来的依赖问题

• 与此同时 nodejs开启了js全栈大门，而requirejs在国外也带动着前端逐步实现模块化

  • 同时国内seajs也进行了大力推广

  • AMD 异步模块定义 requirejs

  • CMD common module define seajs和nodejs非常相似

    • commonjs包含模块定义，和CMD比较相似
    • commonjs规范是定义后台语言的，其中包括Module1.1(模块定义)、定义能够支持服务器、操作文件等等等。。。

  • UMD 通用模块定义

    • 为的就是能让模块代码更兼容各个模块加载器
    • 代码参见一下代码段

• npm/bower集中包管理的方式备受青睐，12年browserify/webpack诞生、2015年systemjs

  • 此时爆发大量前端工具 webpack也在其中，其是一款模块打包工具
  • 打包:压缩 合并 混淆等…非常大而全，智能化(自动化)

(function (root, factory) {  
    if (typeof exports === 'object') {
        // Commonjs  
        module.exports = factory();  
    } else if (typeof define === 'function' && define.amd) {  
        // AMD
        define(factory);  
    } else {  
        //  没有使用模块加载器的方式
        window.eventUtil = factory();  
    }  
})(this, function() {  
    // module  
    return {  
        addEvent: function(el, type, handle) {  
            //...  
        },  
        removeEvent: function(el, type, handle) {  
        },  
    };  
});  

webpack优点

• 模块来源广泛，支持包括npm/bower等等的各种主流模块安装／依赖解决方案
• 模块规范支持全面，amd/cmd以及shimming等一应具全
• 浏览器端足迹小，移动端友好，却对热加载乃至热替换有很好的支持
• 插件机制完善，实现同样模块化，容易扩展

webpack基本操作

• 安装全局命令行工具

  • 1:在命令行，进入到你项目的src目录下（开发环境的代码），然后给出webpack …..commond命令

  • 2:生成我们想要的最终线上的代码文件到dist目录下（生产环境需要使用的代码）

  • 3:如果需要通过命令行webpack能有效果，需要全局安装webpack

    • 3.1: 安装之后能够在命令行被调用，原因在于环境变量中的path(用户、系统)

• 命令: npm i -g webpack

  • 参数 webpack 入口文件 出口文件

• 运行方式通过指定命令

使用webpack打包解决文件依赖关系

• 文件依赖顺序

• 全局变量命名冲突

• 从入口文件开始分析,遇到认为是加载模块的标识符(require)，就将其作为模块依赖加载

  • 首先读取main.js -> 根据依赖关系加载cal.js
  • 最终生成build.js

使用webpack配置文件

• 在当前的目录下创建webpack.config.js文件
• 使用webpack命令即可

 module.exports = {
    //入口
    entry:{
        //如果只有一个入口，可以走默认的main入口
        main:'./main.js'
    },
    output:{//产出文件
        filename:'./build.js'
    }
 }

引入css问题

• 调错的方式

  • [1] ./index.css 283 bytes {0} built [1 error]
  • 在控制台输出的内容中找到是哪一个文件出现的异常

• You may need an appropriate loader to handle this file type.

• 你没有合适的loader加载器，需要在webpack.config.js中声明加载器来帮助加载

• style css 相关操作的包

  • npm i style-loader -D
  • npm i css-loader -D

• 相关命令简写

  • --save-dev -> -D
  • --save -> -S

• 在配置文件中使用对应的loader

node中模块查找机制

• 任何非核心模块、也非./之类的模块-> 直接写名称的模块引用
• 从当前目录开始，逐级向上级查找node_modules文件夹下有没有包名的文件夹

autoprefixer自动补充css前缀

• 测试 transform: translate(0px);
• 1: 下载 npm i autoprefixer-loader -D
• 2: 在webpack.config.js配置文件中 loader:'style-loader!css-loader!autoprefix-loader'

less的使用

• less-loader (下载并写入到配置文件loader中)
• less-loader依赖于less (保证在项目中node_modules下有less即可，供less-loader使用)

module:{
     loaders:[{
        test:/.less$/,
        loader:'style-loader!css-loader!autoprefixer-loader!less-loader'
     }]
}

处理图片

• file-loader

• url-loader

• url-loader依赖于file-loader

  • 读取文件，将文件生成一个url

base64编码

• base64组成 a-zA-z0-9+/

• 将文件编码成base64字符串，会增大大概三分之一的大小

• 应用场景，在多次使用，且图片较小的情况下，能减少那一次请求,

• 数字签名:文件的唯一标识，通过一定算法，获取到文件相关信息，计算出的字符串

  • 一旦文件发生改变，该标识则发生改变

处理字体图标

• 大小比图片小
• 比较灵活改变颜色、大小
• 在处理图片的loader中加入ttf的处理，原因在于mui.css内部引入了ttf

生成html文件插件

• 下载插件npm i html-webpack-plugin -D
• webpack全局命令行安装是为了在任意目录cmd中webpack能启动该命令行工具
• webpack项目安装的作用是因为html-webpack-plugin在代码中依赖了webpack/lib/node/NodeTemplatePlugin里面的代码

 plugins:[
    //添加操作html的插件
    new htmlWebpackPlugin({
        //操作哪一个html
        template:'./src/index.html'
        //生成的路径是output.path
    })
]

web-dev-server

• 1:安装到项目中

  • 这个工具也可以做全局安装,但是1:该包最好跟项目走，2:全局安装有时候会有问题，项目安装更为稳定

• 安装 npm i webpack-dev-server -D

• 大坑: 在你的项目及项目的上级，包含N次上级，一直到根目录中文件夹不要存在特殊符号

  • 比如: {} ()

• 通过../node_modules/.bin/webpack-dev-server 来启动一个express的服务器

• 注意，保证当前所开启的目录位置存在webpack.config.js文件，因为启动的时候需要

• windows默认的cmd不能识别../ 可以使用加强版cmd，powershell

• webpack-dev-server相关命令

  • 自动刷新 –inline
  • 热替换 –hot
  • 自动打开浏览器 –open
  • 指定端口作为服务器的端口 –port 端口号

• 启动命令 ..\node_modules.bin\webpack-dev-server --inline --hot --open

总结

• ../ windows不能识别.. 换个工具

• 启动的是express的服务器。其代码内部包含服务器和webpack编辑工具

  • 需要命令行当前目录下存在配置文件

• package.json文件可以帮助我们简化命令行的参数长度

es6

ES6中的模块

• vue 对ES6的模块加载方式支持更好,require默认模块加载方式是懒加载

• 使用vue单文件方式的时候，内部使用基于静态编译,加载前置

• 默认导入模块 import cal from './cal.js';

• 默认导出模块 export default 任意对象

• 声明式导入模块 import {a,b} from './cal.js'

• 声明式导出模块 export var a = '我是a'

  • export var b = '我是b'

import代码

• 默认导入导出 import cal from './cal.js'; | export default cal;

• 声明式导入导出

  • import { name,age} from './cal.js'; | export var name='jack'; export {age}

• 全部导入导出

  • import * as person from './cal.js; |
  • 导出的person对象具备 name、age、defualt属性是cal

• 注意事项

  • import’ and ‘export’ may only appear at the top level
  • 不能放在函数内部,必须最外层
  • import * as xx from ‘./cal.js’;

ES6中的代码变化

• 关于对象属性的简写方式

var name = 'jack';

该对象的key是name，值是Name变量的值，由于名称一致，可以简写

return {name}

var cal = {
    //声明一个函数，等同于 add: function(num)
    add(num){ 
        return num;
    }
}

babel是什么

• 下载babel-loader 依赖 babel-core

• 语法转换器，可以转换react/es7/es6的代码-> ES5

• 分为两个部分: 需要你告诉其预设 presets -> 将什么代码转换成ES5

  • 下载，ES6 下载一个包 babel-preset-es2015 -> 默认只转换关键字

• 设置插件，转换ES6的函数plugins

  • 下载, ES6 babel-plugin-transform-runtime -> 转换ES6函数

webpack-ES6的处理

• 4个包:babel-loader/babel-core/babel-preset-es2015/babel-plugin-transform-runtime

    {
        test:/.js$/,
        exclude:/node_modules/,
        loader:'babel-loader',
        options:{
            presets:['es2015'],
            plugins:['transform-runtime']
        }
    }

vue开发方式

• 运行时构建 -> 结合webpack编译工具,解析xxx.vue文件的方式
• 独立构建 -> 引包的方式
• 运行时构建，企业项目中使用比较多

vue文件

• 以.vue结尾的文件
• 其文件内部包含
• template : 在其内部vue2.x之后只能包含一个根节点
• script : 需要来上一个默认导出,导出的是相关当前需要显示的内容的一些设置
• style : 设置当前的样式只在该template中生效

vue单文件方式

• 1:在main.js中，引入Vue对象
• 2:new Vue对象的实例 （一般来讲，一个单页应用，只有一个Vue对象的实例）
• 3:指定显示的内容,render属性
• 4:render 接受一个函数，该函数返回一堆DOM数据(虚拟DOM)

以单文件的方式启动

• 需要安装包

  • vue-loader 依赖于 vue-template-compiler

• 配置进webpack.config.js中的loaders

总结

• webpack模块加载原理 -> 不重要(工具只在乎你用得好，除非你去该公司)

• 解析文件相关的loader的配置方式 ->

  • 掌握配置文件中的属性

    • 对象 entry 入口

      • main 默认入口文件 ‘./main.js’

    • 对象 output 出口

      • path 资源产出目录,编译后
      • filename 页面引入的js,编译后

    • 对象 module

      • 数组 loaders

        • { test->loader的匹配条件,loader:声明使用什么加载器}

    • 数组plugins

      • new htmlWebpackPlugin(options)
      • { template:’./index.html’} template-> 参照模板路径

• webpack-dev-server -> 会用即可 -> 照着我的方式来用

  • 关于./ 和 ../的时候要思考
  • 建议使用powershell

• ES6模块

  • import 和 require的区别

  • import 静态编译,先加载文件,require是懒加载

  • import只能在顶级作用域中

  • 默认导出和导入

    • import 随便写 from ‘./xxx.js’;
    • export default 对象;

• vue写法

  • 1:index.html -> div id=”app”

  • 2:main.js -> 引入Vue,new Vue(options)

    • 2.1: options属性
    • 2.2: 目的地 -> el:’#el’
    • 2.3: DOM -> render :function(creater){ return creater(App) }
    • 2.4: import App from ‘./app.vue’

  • 3:app.vue

    • <template>只能有一个根节点</template>
    • <script></script>
    • <style></style>

感谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕💕💕
😊~~~

专栏推荐

推荐一下自己的专栏，欢迎大家收藏关注😊~

• 面试集
• 原生js集
• vue集
• 可视化集
• css集

原文链接：https://juejin.cn/post/7338346304173228042 作者：vaelcy