- 博客(13)
- 收藏
- 关注
RSS订阅原创 （12）webpack缓存优化
这里介绍两类 webpack的缓存优化1、babel 缓存将 babel 处理后的资源缓存起来（哪里的 js 改变就更新哪里，其他 js 还是用之前缓存的资源），让第二次打包构建速度更快使用方式在webpack.config.js的babel-loaer，配置options中多加一个属性cacheDirectory: truerules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader
2020-10-30 18:20:12
687
原创 （11）webpack source-map
source-map：一种提供源代码到构建后代码的映射的技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）使用方式很简单在webpack.config.js配置中加上module.exports = {...devtool: 'eval-source-map'}devtool对应值的种类1、source-map：外部，错误代码准确信息 和 源代码的错误位置2、inline-source-map：内联，只生成一个内联 source-map，错误代码准确信息 和 源代码的错误位置3
2020-10-29 17:17:26
287
原创 （10）webpack 生产环境配置总结
webpack.config.jsconst { resolve } = require('path');/** 引入插件 */const HtmlWebpackPlugin = require(require.resolve('html-webpack-plugin'));/** 用于将样式文件单独提取出来 */ const MiniCssExtractPlugin = require('mini-css-extract-plugin');/** 用于管理当前的环境,development
2020-10-29 15:04:03
262
1
原创 （09）webpack 生产环境配置eslint
eslint 自动检验代码是否规范的一种方式，如果有一点不符合代码规范的地方，就会在打包时报错。如果你不喜欢eslint这种粗暴的方式，可以使用prettier这个插件perttier插件介绍webpack使用eslint 需要安装 eslint eslint-loadernpm i eslint eslint-loader -Dairbnb(一个流行的eslint验证代码的风格) --> 需要下载 eslint-config-airbnb-base eslint-plugin-impor
2020-10-29 14:54:21
608
原创 （08）webpack生产环境配置html和js
在webpack生产环境中，对js和html需要有以下基本的处理步骤对js进行兼容性处理和压缩，对html进行压缩（html无法兼容性处理）1、js进行兼容性处理js兼容性处理就是将es6以上版本语法转为es5以下版本语法需要使用到babel-loader @babel/core @babel/preset-env安装基本js兼容(无法解决promise等)npm i babel-loader @babel/core @babel/preset-env -D高级js兼容按需加载（弥补上面
2020-10-29 11:19:52
371
2
转载 html head头部标签
html head头部介绍地址http://fex.baidu.com/blog/2014/10/html-head-tags/
2020-10-28 09:49:12
311
原创 （07）webpack生产环境样式处理
开发环境中，css样式文件与js文件合并再进入html文件。生产环境应该将css文件单独提取出来，避免加载的过程中，因js和css合并后加载的文件过大而产生延迟。生产环境的样式,还需要做进一步的兼容性处理和压缩处理。1、为了将css样式单独提取成文件，需要下载插件 mini-css-extract-pluginnpm i mini-css-extract-plugin -D如何使用 mini-css-extract-plugin先引入const MiniCssExtractPlugin =
2020-10-26 12:55:23
398
原创 （06）webpack 基本开发配置
const { resolve } = require('path');/** 引入插件 */const HtmlWebpackPlugin = require(require.resolve('html-webpack-plugin'));module.exports = { /** 输入 */ entry: './src/index.js', /** 输出 */ output: { /** 将js文件夹放到bundle/js文件夹下 */ filename: '
2020-10-26 00:27:50
237
原创 （05）webpack-dev-server配置
前端代码开发服务器，不需要每次都打包，才能预览最新的代码效果。除了之前的配置以外，需要使用到webpack-dev-server，确认安装cnpm i webpack-dev-server -Dwebpack.config.js配置const { resolve } = require('path');/** 引入插件 */const HtmlWebpackPlugin = require(require.resolve('html-webpack-plugin'));module.exp
2020-10-24 16:35:33
1813
6
原创 （04）webpack 图片配置
webpack图片处理需要下载npm i file-loader html-loader url-loader -D文件目录less文件div { background-color: pink; color:#fff}.div1 { background-image: url(./成都画室1.png); width: 100px; height:100px; background-size: contain;}.div2 { background-imag
2020-10-22 12:15:48
656
1
原创 （03）webpack 配置处理html文件
webpack处理html文件需要使用html-webpack-plugin插件webpack使用插件一般有三个步骤 1安装 2引入 3使用1 安装2 引入和使用引入使用require 语法 .const HtmlWebpackPlugin = require(require.resolve('html-webpack-plugin'));使用 HtmlWebpackPlugin 是一个构造函数，new一个实例对象即可new HtmlWebpackPlugin()const { res
2020-10-21 12:56:53
843
6
原创 （02）webpack（css less sass）配置样式打包
前端开发中常见的样式文件包括 css less sass（scss）如果想用这三种类型的文件，需要在webpack配置文件中进行处理配置样式需要安装npm i css-loader style-loader -D配置less需要额外安装npm i less less-loader -D配置scss需要额外安装npm i node-sass sass-loader -D const { resolve } = require('path');module.exports = {
2020-10-20 13:43:09
478
原创 （01）webpack 之旅
webpack 已经来到了 5.0，前端开发人员，不仅仅需要学习css，js和html，webpackj作为项目的构建工具，是十分重要的，不学习使用构建工具，永远只能活在别人搭建的框架下。让我们开启学习webpack的旅程。学习前置条件，你需要掌握node.js（了解大概就行）es6 会使用npm或者cnpm或者yarn第一步 安装工具安装最新的node node下载地址安装完成后运行 npm -v 检查是否安装成功使用node的npm 全局安装 webpack 和 webpack-cl
2020-10-14 16:11:19
295
2
国家或地区，中文名称与对应的地理坐标
2023-02-23
常用国家或地区 英文简写与地理坐标
2023-02-23
flexible.js 实现响应式布局
2022-11-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人