随笔分类 - JS
摘要：1.文件结构 2.代码 index.js function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } /* * 通过js代码，让某个文件被单独打包成一个chunk * import 动态导入语法: 能将某个文件单独打包 * */ /
阅读全文
摘要：1.文件结构 2.代码 import $ from 'jquery' function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console.log(sum(1, 2, 3
阅读全文
摘要：HMR: hot module replacement 热模块替换 / 模块热替换 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） 极大提升构建速度 1.文件结构 2.代码 iconfont.css @font-face {font-family: "iconfont"; sr
阅读全文
摘要：这里综上所述，多种文件处理打包 1.文件结构 2.代码 a.css #box1 { width: 100px; height: 100px; background-color: pink; display: flex; backface-visibility: hidden; } b.css #bo
阅读全文
摘要：这里使用 html-webpack-plugin 插件压缩 html 文件。 1.文件结构 2.代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> </
阅读全文
摘要：压缩 JS 文件: 这里把 mode 设置为 生产模式，就会自动压缩 JS 代码。 1.文件结构 2.代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title>
阅读全文
摘要：这里使用 babel 处理 js 兼容性问题 1.文件结构 2.安装 babel core-js $ npm i babel@6.23.0 @babel/core@7.8.4 @babel/polyfill@7.8.3 babel-loader@8.0.6 @babel/preset-env -D
阅读全文
摘要：使用 eslint 对 js 进行语法检查 1.文件结构 2.安装 eslint 相关插件 $ npm i eslint@6.8.0 eslint-loader@3.0.3 eslint-plugin-import@2.20.1 eslint-config-airbnb-base@14.0.0 -D
阅读全文
摘要：打包时，使用 MiniCssExtractPlugin 插件，把提取 CSS 成单独文件。 1.文件结构： 2.安装 MiniCssExtractPlugin (根据自己的环境，安装合适的版本，这里用的是wenpack 4.x) $ npm i mini-css-extract-plugin@0.9
阅读全文
摘要：1.素材准备: 首先准备一些矢量图图标，如，阿里矢量图等。(阿里矢量官网: https://www.iconfont.cn/) 随便找一些 icon 下载到本地 解压出来是这样的 2.文件结构 3. 安装 wenpack、webpack-cli $ npm init $ npm i webpack@
阅读全文
摘要：1.文件结构 2.安装 webpack、webpack-cli $ npm init $ npm i webpack@4.41.6 webpack-cli@3.3.11 -g //(全局) $ npm i webpack@4.41.6 webpack-cli@3.3.11 -D //(开发环境) 2
阅读全文
摘要：1.文件结构 2.安装 webpack、webpack-cli $ npm init $ npm i webpack@4.41.6 webpack-cli@3.3.11 -g //(全局) $ npm i webpack@4.41.6 webpack-cli@3.3.11 -D //(开发环境) 2
阅读全文
摘要：1.文件结构 2.安装 webpack、webpack-cli $ npm init$ npm i webpack@4.41.6 webpack-cli@3.3.11 -g //(全局) $ npm i webpack@4.41.6 webpack-cli@3.3.11 -D //(开发环境) 安装
阅读全文
摘要：1.文件结构 2.初始化，生成 package.json 文件 $ npm init 2.1安装 webpack 和 webpack-cli. (这里使用的是 webpack5 以下的版本) $ npm i webpack@4.41.6 webpack-cli@3.3.11 -g //(全局) $
阅读全文
摘要：文件结构： Banel 官网：https://www.babeljs.cn/ 1. 定义 package.json 文件 $ npm init 2. 安装 babel-cli, babel-preset-es2015 和 browserify $ npm install babel-cli brow
阅读全文
摘要：1.下载sea.js, 并引入(快过时了，不知还能不能下载到) 2. 创建项目结构 |-js |-libs |-sea.js |-modules |-module1.js |-module2.js |-module3.js |-module4.js |-main.js |-index.html 3.
阅读全文
摘要：1. 下载require.js, 并引入 官网: https://requirejs.org/ GitHub: https://github.com/requirejs/requirejs 将require.js导入项目: js/libs/require.js 2. 创建项目结构 |-js |-li
阅读全文
摘要：1.下载安装 node.js 2.创建项目结构 ``` |-modules |-module1.js |-module2.js |-module3.js |-app.js |-package.json ``` 3.下载第三方模块 $ npm install uniq --save 4.模块化编码 m
阅读全文
摘要：1. 创建项目结构 ``` |-js |-dist //打包生成文件的目录 |-src //源码所在的目录 |-module1.js |-module2.js |-module3.js |-app.js //应用主源文件 |-index.html |-package.json { "name": "
阅读全文
