Evengod

2022年9月8日

摘要：打包时，使用 MiniCssExtractPlugin 插件，把提取 CSS 成单独文件。 1.文件结构： 2.安装 MiniCssExtractPlugin (根据自己的环境，安装合适的版本，这里用的是wenpack 4.x) $ npm i mini-css-extract-plugin@0.9 阅读全文

posted @ 2022-09-08 11:31 Evengod 阅读(209) 评论(0) 推荐(0)

Webpack 打包 - 7.webpack 开发环境配置

摘要： 1.文件结构 2. iconfont.css @font-face {font-family: "iconfont"; src: url('../media/iconfont.eot?t=1581833245354'); /* IE9 */ src: url('../media/iconfont.e 阅读全文

posted @ 2022-09-08 11:04 Evengod 阅读(94) 评论(0) 推荐(0)

Webpack 打包 - 6. 配置 devServer 用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）

摘要：配置devServer只需要在 webpack.config.js 中添加如下配置即可： // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~） // 特点：只会在内存中编译打包，不会有任何输出 // 启动devServer指令为：npx webpack-d 阅读全文

posted @ 2022-09-08 10:23 Evengod 阅读(319) 评论(0) 推荐(0)

2022年8月16日

Webpack 打包 - 5.webpack 打包其它资源

摘要： 1.素材准备: 首先准备一些矢量图图标，如，阿里矢量图等。(阿里矢量官网: https://www.iconfont.cn/) 随便找一些 icon 下载到本地解压出来是这样的 2.文件结构 3. 安装 wenpack、webpack-cli $ npm init $ npm i webpack@ 阅读全文

posted @ 2022-08-16 17:58 Evengod 阅读(104) 评论(0) 推荐(0)

Webpack 打包 - 4.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 阅读全文

posted @ 2022-08-16 17:39 Evengod 阅读(163) 评论(0) 推荐(0)

Webpack 打包 - 3.webpack Html 资源打包

摘要： 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 阅读全文

posted @ 2022-08-16 17:22 Evengod 阅读(108) 评论(0) 推荐(0)

Webpack 打包 - 2.webpack 样式资源打包(CSS/LESS...)

摘要： 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 //(开发环境) 安装阅读全文

posted @ 2022-08-16 12:00 Evengod 阅读(79) 评论(0) 推荐(0)

Webpack 打包 - 1.webpack 基本打包(JS、JSON)。

摘要： 1.文件结构 2.初始化，生成 package.json 文件 $ npm init 2.1安装 webpack 和 webpack-cli. (这里使用的是 webpack5 以下的版本) $ npm i webpack@4.41.6 webpack-cli@3.3.11 -g //(全局) $ 阅读全文

posted @ 2022-08-16 11:30 Evengod 阅读(936) 评论(0) 推荐(0)

2022年8月11日

JS模块化5 - ES6-Babel-Browserify

摘要：文件结构： Banel 官网：https://www.babeljs.cn/ 1. 定义 package.json 文件 $ npm init 2. 安装 babel-cli, babel-preset-es2015 和 browserify $ npm install babel-cli brow 阅读全文

posted @ 2022-08-11 17:26 Evengod 阅读(66) 评论(0) 推荐(0)

JS模块化4 - CMD-SeaJS

posted @ 2022-08-11 14:51 Evengod 阅读(33) 评论(0) 推荐(0)

公告