随笔分类 -  webpack

3.2.5 webpack代码分离
摘要：为什么需要代码分离？ 为了将代码分成多个bundle，并灵活定制加载策略（按需加载，并行加载），从而大大提升应用的加载速度 如何代码分离？ 1、入口起点：使用entry配置手动的分离代码 2、放置重复：使用SplitChunkPlugin去重和分离chunk 3、动态导入：通过在代码中使用动态加载模 阅读全文
posted @ 2020-11-15 16:19 SlightFly 阅读(83) 评论(0) 推荐(0)
3.2.3 webpack图片等资源的处理 file-loader|url-loader|img-loader
摘要：如果引入除了 js 之外的内容，必须使用 loader 去处理，否则会报错 “Unexpected character ‘口’” 不认识 1、需要用到的 loader file-loader //能够正确引入图片，直接引入图片会报错 url-loader //包含file-loader，在此基础上增 阅读全文
posted @ 2020-03-22 23:29 SlightFly 阅读(824) 评论(0) 推荐(0)
3.2.2 webpack原理解析
摘要：1、webpack是利用什么来打包的？ 1） webpack依赖于Node的环境与文件操作系统 2） webpack的打包过程，其实就是利用Node去读取文件，然后进行一些字符串处理后，再利用Node去写入文件 2、webpack打包流程解析 读取文件配置 --> 注册内部插件与配置插件 --> L 阅读全文
posted @ 2020-02-22 19:53 SlightFly 阅读(217) 评论(0) 推荐(0)
3.2.1 webpack-dev-server的使用
摘要：想要在代码发生变化后自动编译代码，有三种在方式： 文件更新，代码重新编译，不必手动运行整个构建过程，但还需要刷新浏览器 webpack-dev-server 同上，但可以自动刷新页面 webpack-dev-middleware espress的中间件，用来定制化整个watch和刷新的过程，， 1、 阅读全文
posted @ 2020-02-22 00:19 SlightFly 阅读(589) 评论(0) 推荐(0)
2.1.8 webpack的环境
摘要：因为在不同的场景下可能需要不同的配置，使用不同的功能，所以要区分环境 比如： 1、开发模式 会额外的用到一些调试功能，比如webpack-dev-server，但是为了加快调试速度，可能不会去用上压缩，tree-shaking之类的功能 2、生产模式 为了减少文件体积，会使用压缩，tree-shak 阅读全文
posted @ 2020-02-17 23:49 SlightFly 阅读(177) 评论(0) 推荐(0)
2.1.7 html的处理与打包
摘要：webpack可以自动生成HTML，自动引入js和css html生成 需要用到的plugin cnpm install html-webpack-plugin --save-dev 相关配置 filename -- 打包生成的 html 文件的名字 template -- 指定一个 html 文件 阅读全文
posted @ 2020-02-12 00:20 SlightFly 阅读(280) 评论(0) 推荐(0)
2.1.6 css的编译与处理 -2
摘要：less ，sass等预处理语言的编译 --浏览器无法识别，需要编译成css才能被识别 less 1、less 2、less-loader sass 1、sass-loader 2、node-sass 以less为例rules: [ { test:/\.less$/, use:[ //loader的 阅读全文
posted @ 2020-02-11 00:18 SlightFly 阅读(199) 评论(0) 推荐(0)
2.1.6 css的编译与处理 -1
摘要：webpack是以js文件为入口打包的，那么项目的css怎么办？如何引入？ css可以通过js文件引入，但必须使用想用的loader 1、css-loader，让 css 可以被 js 正确的引入 2、style-loader，让 css 被引入后可以被正确的以一个 style 标签插入页面 3、两 阅读全文
posted @ 2020-02-10 23:21 SlightFly 阅读(410) 评论(0) 推荐(0)
2.1.5 javascript 的编译
摘要：1、编译 es6 语法编译：babel-loader npm installl babel-loader @babel/core -save-dev babel-loader //编译es6需要用到的loader，只能编译es6的一些语法，，，对于es6方法，无能为力 @babel/core //b 阅读全文
posted @ 2020-02-09 22:27 SlightFly 阅读(410) 评论(0) 推荐(0)
2.1.4 用webpack开始一次打包-源码
摘要：1、命令行直接打包，不使用配置文件 webpack-cli --entry ./app.js --output bundle.js 项目下生个bundle.js文件（依赖等都被打包进来） 2、利用配置文件打包，命令行 -- webpack webpack.config.js(默认配置文件名，如果为告 阅读全文
posted @ 2020-02-09 17:31 SlightFly 阅读(189) 评论(0) 推荐(0)
webpack核心概念
摘要：配置文件？ 是webpack打包的依据，webpack如何打包，打包成什么样，全都有配置文件指定 对于webpack，我们的主要工作也是编写，配置webpack的配置文件 1、entry module.exports= { /** * entry * 1、代码从这里开始编译 * 2、程序开始的起点 阅读全文
posted @ 2020-01-06 15:17 SlightFly 阅读(130) 评论(0) 推荐(0)
webpack导学
摘要：1、前端工程化？ 工程化是系统化，模块化，规范化的过程 工程化主要解决 “如何提高整个系统生产效率” 的问题 2、前端工程化主要改变在哪些方便？ 工具 - 更多自动化工具，更多脚手架 人员 - 协作人变多，西药一定的机制保障合作的顺畅 写代码的方式 - 大量的预制模板，用组件化的方式写项目 3、we 阅读全文
posted @ 2020-01-06 12:33 SlightFly 阅读(126) 评论(0) 推荐(0)
webpack 入门 - (三)
摘要：基于 webpack 入门 - (二) 实现交互式的工具 ，，即 一问一答 1、寻找合适的询问插件 let inquirer = require('inquirer') 2、index.js代码实现如下： #!/usr/bin/env node //需求 命令行 mycli create -t vu 阅读全文
posted @ 2019-12-27 16:32 SlightFly 阅读(179) 评论(0) 推荐(0)
webpack 入门 - (二)
摘要：开发一个工具 -- 输入命令行 mycli create -t vue -n shop 创造vue模板的项目，项目名称为shop 1、建立模板项目文件夹，用来放置项目模板 project 2、index.js文件，，命令行配置 #!/usr/bin/env node //需求 命令行 mycli c 阅读全文
posted @ 2019-12-27 15:59 SlightFly 阅读(144) 评论(0) 推荐(0)
webpack 入门 - (一)
摘要：1、npm init -y -- 初始化项目 - 生成 package.json 文件2、package.json 添加bin属性 -- "bin": "index.js", { "name": "mycli", //包的最后一个命令 "version": "1.0.0", "main": "ind 阅读全文
posted @ 2019-12-27 11:10 SlightFly 阅读(150) 评论(0) 推荐(0)
webpack入门
摘要：webpack是一个前端资源加载/打包的工具，根据模块的依赖关系进行静态分析，并依据规则生成对应的静态资源。 1、打包文件（index.js 打包到bundle.js） webpack index.js bundle.js 2、多文件打包 (js中引用其他的js) 导出 (str.js)：modul 阅读全文
posted @ 2019-03-23 11:49 SlightFly 阅读(126) 评论(0) 推荐(0)