![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack4
文章平均质量分 58
整理一下
进击的义勇
实在记不住,只能写博客记录了,坚持!
展开
-
webpack4.0 基础配置3(css)
1. 安装常见css预处理器的loadernpm install css-loader style-loader less less-loader autoprefixer postcss-loader --save-dev注意:1)autoprefixer postcss-loader 为兼容配置2) 配置sacc的话:sass node-sass sass-loader// 配置webpack加载器(loader) module: { // 设置规则和处理方案 默原创 2021-04-12 22:56:57 · 252 阅读 · 0 评论 -
Webpack4.0 基础配置2
问题:每一次代码更改,重新编译后,都需要手动的去更改HTML也页面导入的JS信息,插件:html-webpack-plugin 帮我们处理的就是对于HTML的编译和导入文件的自动处理。每一次打包的时候都把之前打包的内容清空掉,也就是build下只保留最新打包的文件。是否存在一个插件,可以帮我们创建一个web服务(不再使用 live-server了),服务可以做以下的事:-> 自动监听代码的改变,如果代码改变自动编译。-> 自动帮我们打开浏览器渲染页面。-> 重新编译后自动刷.原创 2021-04-11 23:01:53 · 143 阅读 · 0 评论 -
Webpack 基础原理
0. 准备知识Symbol.toStringTagSymbol.toStringTag 是一个内置 symbol,它通常作为对象的属性键使用,对应的属性值应该为字符串类型,这个字符串用来表示该对象的自定义类型标签,通常只有内置的 Object.prototype.toString()方法会去读取这个标签并把它包含在自己的返回值里。说白了,就是希望自己创建的对象能有自己的标签类型[Object Xxxx]。例如,有许多JS对象类型没有toStringTag属性,但还是能通过toString识别特定返回原创 2020-08-17 00:36:09 · 312 阅读 · 0 评论 -
Webpack4.0 基础描述
1. 认识webpack 是一种自动打包工具。其作用:1)代码的转换:ts —> js ; scss —> css 。2)文件优化:打包和压缩(js,css,图片等文件),提取第三方模块等。3)模块的合并:可以将多个模块合并为一个文件。webpack应用的核心:1)模块转换器:将模块的内容按照需求转换为新的内容,可以加载非js文件。2)扩展插件:webpack构建流程的过程中可以加入新的逻辑来实现你想要的需求。2. 安装cnpm install webpack webpack-原创 2020-08-11 23:39:26 · 202 阅读 · 0 评论 -
Webpack4.0 的相关优化配置
111原创 2020-08-11 12:29:21 · 348 阅读 · 0 评论 -
webpack4.0 (JS)
描述webpack对js的配置是去兼容低版本浏览器而生的,可以理解为 将高级语法转为低级语法,包含es6及一些装饰器等。核心方法是 使用 babel-loader 插件 。注意:babel-loader 只不过是 babel 与 webpack 的桥梁,还有两个核心插件 @babel/core 和@babel/preset-env。@babel/preset-env是一个插件集合,里面包含了许多解析es6语法的插件。babel-loader 会默认调用 @babel/core 转化代码,转化的时候会原创 2020-08-08 13:53:20 · 142 阅读 · 0 评论 -
Webpack4.0 (React)
描述要解析 react 的关键是解析 jsx,所以除了安装 react和react-dom之外还有``原创 2020-08-08 13:52:25 · 122 阅读 · 0 评论