摘要：
嵌入JS表达式 在jsx语法中，要把JS代码写到{ }中，所有标签必须要闭合。 let num = 100 let bool = false; // JSX 语法 var myh1 = ( <div> {/* 我是注释 */} {num} <hr /> {/* 三目运算 */} {true ? "条 阅读全文
posted @ 2021-02-25 18:49
Tsunami黄嵩粟
阅读(84)
评论(0)
推荐(0)
摘要：
由于通过React.createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。 React使用 JSX 来替代常规的JavaScript，JSX 可以理解为的JavaScript语法扩展，它里面的标签申明要符合X 阅读全文
posted @ 2021-02-25 17:48
Tsunami黄嵩粟
阅读(77)
评论(0)
推荐(0)
摘要：
官网：https://react.docschina.org/ React 起源于 Facebook(脸书) 的内部项目，它是一个用于构建用户界面的 javascript 库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。 React 拥有较高的性能，代码逻辑非常简 阅读全文
posted @ 2021-02-25 15:59
Tsunami黄嵩粟
阅读(278)
评论(0)
推荐(0)
摘要：
网址：https://vue-loader.vuejs.org/zh/ Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件的格式撰写 Vue 组件 安装loader npm i -S vue npm i -D vue-loader vue-template- 阅读全文
posted @ 2021-02-25 15:28
Tsunami黄嵩粟
阅读(83)
评论(0)
推荐(0)
摘要：
// 解析模块的规则 resolve: { // 配置解析模块路径别名：优点简写路径，缺点路径没有提示 alias: { // 定义一个@变量，可在import引入时使用 '@': path.resolve(__dirname, '../src') }, // 配置省略文件路径的后缀名称 impor 阅读全文
posted @ 2021-02-25 15:17
Tsunami黄嵩粟
阅读(333)
评论(0)
推荐(0)
摘要：
例如项目中使用从 CDN 引入 jQuery，而不是把它打包进来使用 import $ from 'jquery' webpack.config.js externals: { jquery: 'jQuery' } 阅读全文
posted @ 2021-02-25 15:15
Tsunami黄嵩粟
阅读(287)
评论(0)
推荐(0)
摘要：
在做一些单页应用中，若不做任何处理，所有项目文件会打包为一个文件，这个文件非常的大，造成网页在首次进入时比较缓慢。做了代码分割后，会将代码分离到不同的chunk中，然后进行按需加载这些文件，能够提高页面首次进入的速度，网站性能也能够得到提升。 实现方案： entry多入口实现分割 optimizat 阅读全文
posted @ 2021-02-25 15:07
Tsunami黄嵩粟
阅读(218)
评论(0)
推荐(0)
摘要：
tree-shaking是webpack中自带的功能，其作用是去除项目中无用代码(一般只的都是自己所写代码)，减少代码体积(涉及到第三方类库,往往不一定有效。) 前提： 必须使用es6模块 开启production环境 在package.json文件中添加了 "sideEffects": false 阅读全文
posted @ 2021-02-25 14:48
Tsunami黄嵩粟
阅读(63)
评论(0)
推荐(0)
摘要：
webpack在不需要引入任何loader可以对于js进行打包处理，但是它不会对于js兼容性进行任务的处理，而我们编写的项目是需要在不同的浏览器中运行的，此时就需要对于js的兼容性在打包过程中进行对应的处理。使用babel来完成对应的js兼容处理 # 早期使用 @babel/polyfill 来完成 阅读全文
posted @ 2021-02-25 14:45
Tsunami黄嵩粟
阅读(167)
评论(0)
推荐(0)
摘要：
像项目中字体资源是不需要进行打包处理的，可以直接的通过复制方式给打包到目标目录中 # 安装 npm i -D copy-webpack-plugin # 引入 const CopyPlugin = require('copy-webpack-plugin') # plugins配置 plugins: 阅读全文
posted @ 2021-02-25 14:38
Tsunami黄嵩粟
阅读(165)
评论(0)
推荐(0)
摘要：
# 安装 npm i -D url-loader html-loader file-loader # loader配置 module: { rules: [ // 图片处理 { test: /\.(png|jpeg|jpg|gif)$/, use: [ { loader: 'url-loader', 阅读全文
posted @ 2021-02-25 14:29
Tsunami黄嵩粟
阅读(114)
评论(0)
推荐(0)
摘要：
name就是前面的数据 num就是次数 for (const k in speakerss[index]) { this.therrUserListss.push({ name: k, num: speakerss[index][k] }) } this.fourUserListss = this. 阅读全文
posted @ 2021-02-25 11:41
Tsunami黄嵩粟
阅读(51)
评论(0)
推荐(0)
摘要：
webpack默认只支持js的打包，不支持其它类型，为了让它支持样式的打包就需要加载一些loader 打包css文件 在webpack中配置对应的loader 在入口js文件中通过import导入样式 sass处理 # 安装css预处理loader npm i -D style-loader css 阅读全文
posted @ 2021-02-25 11:12
Tsunami黄嵩粟
阅读(119)
评论(0)
推荐(0)
浙公网安备 33010602011771号