7. webpack 将css从js中抽离、css兼容性处理、css压缩
需要的loader/插件style-loadercss-loaderhtml-webpack-pluginmini-css-extract-plugin 将css提取成一个单独的文件postcss-loader css兼容性处理postcss-preset-env 识别postcss所在的环境optimize-css-assets-webpack-plugin 插件，压缩css(一) 将css从js文件中抽离安装mini-css-extract-pluginnpm i mini-
10. webpack压缩html和js
需要的loader和插件html-webpack-plugin 插件中进行配置即可压缩html(一) 压缩js代码只需将 webpack的配置文件webpack.config.js中的mode改为生产环境即可自动压缩js代码....module.exports = { mode: 'production', ...}(二) 压缩html只需将 webpack的配置文件webpack.config.js中的mode改为生产环境即可自动压缩html代码这时可能报一个如下的错
11. webpack生产环境和开发环境中的配置文件
(一) 开发环境webpack.config.js文件const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { mode: 'production', entry: './src/index.js', output: { filename: 'built.js', path: path.r
12.webpack 模块热替换HMR
HMR(hot module replacement) 一个模块发生变化时，只会重新打包这一个模块(而不是打包所有模块)极大的提升构建速度。HMR功能基于devServer。样式文件：可以使用HMR功能：因为style-loder内部已经实现js文件：默认不能使用HMR功能，在js入口文件添加支持HMR功能的代码后，修改非入口文件时可以实现热更新。html文件：默认不能使用HMR功能，同时会导致html文件不能热更新(在单页面开发中不需要做HMR功能)解决方法：修改entry入口，将html文
13. source-map构建后的代码与源码的映射关系
source-map：提供源代码到构建后代码的映射技术(如：构建后代码出错，通过映射关系可以方便的追踪源代码中的错误)[ inline- | hidden- | eval- ][ nosources- ][ cheap- [ module- ]]source-mapsource-map: 会生成一个外部的source-map文件，当文件出错时，能够得到错误代码准确信息和源代码的错误位置。inline-source-map：将source-map内联到js文件中，只生成一个内联的source-map，
14. webpack优化配置-oneOf
转载：https://segmentfault.com/a/1190000022413668优化点: 每个不同类型的文件在loader转换时，都会被命中，遍历module中rules中所有loaderconst { resolve } = require('path');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const HtmlWebpackPlugin = require('html-webpack-plug
15. webpack优化配置-babel缓存和资源缓存配置
开启babel缓存，在第二次打包时，打包构建速度更快在webpack配置文件webpack.config.js中开启babel缓存module.exports = { ... module: { rules: [ ... //js兼容性处理 { test: /\.js$/, exclude: /node_modules/, loader: 'ba..
16. webpack优化配置-tree shaking 剔除无用的代码
tree shaking只需注意下面的前提即可，无需其他配置。前提： 1. 必须使用ES6模块化 2.webpack配置文件中的mode开启production环境注意：package.json文件添加sideEffects配置来实现哪些文件需要进行tree shaking。“sideEffects”:false 所有代码都可以进行tree shaking，css文件可能直接被删除。“sideEffects”:["*.css"] css文件不要进行tree shaking入口文件inde
17.webpack优化配置-code split 代码分割
方式一：通过多入口实现代码分割配置webpack, 将单入口，改为多入口注意：index.js文件不要引入base.js文件const path = require('path');module.exports = { mode: 'production', entry: { index: './src/js/index.js', base: './src/js/base.js' }, output: { filena
19. webpack优化配置-PWA 渐进式网络应用开发程序
渐进式网络应用程序(Progressive Web Application - PWA)，在离线(offline)时应用程序能够继续运行功能。https://www.webpackjs.com/guides/progressive-web-application/serviceWorker代码必须运行在服务器上需要的插件：workbox-webpack-plugin下载插件workbox-webpack-pluginnpm i workbox-webpack-plugin -D在web
20. webpack优化配置-externals 不打包某些库使用CDN代替
当我们希望使用CDN来引入jquery时，就不需要在打包时将jQuery打包。配置webpack配置文件webpack.config.js，添加externals配置const path = require('path');const {CleanWebpackPlugin} = require('clean-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {
21. webpack优化配置-dll方式将第三方库独立打包
对于一些不经常更新的第三方库，比如 jquery，react，lodash，我们希望能和自己的代码分离开，DLLPlugin 能把第三方代码完全分离开，即每次只打包项目自身的代码，而不再打包第三方库。使用到的插件：webpck.DllReferencePlugin（属于webpack）:设置哪些第三方库不参与打包add-asset-html-webpack-plugin：将JavaScript或者CSS文件添加到 HTML中下载插件npm i webpack add-asset-html-
22. webpack resolve配置路径别名
当文件路径比较深时，使用相对路径就不方便。可以通过配置resolve.alias用全局变量名来代替具体路径。(一) 配置路径别名修改webpack配置文件module.exports = { ... resolve:{ alias:{ $base: path.resolve(__dirname,'src/js/base'), } }}在入口文件index.js文件中//引入 /src/js/base/base.js文件
git日常开发/多人开发常用命令
1.本地回滚到某一版本前提是git此时是等待状态查看提交日志在项目中右键选择查看日志点击需要回复的版本，查看sha-1值，复制3. 使用，进行回滚，完成$ git reset --hard 930439e81091e5423afab6c859aa3e849006e5e1...
selectize.js的属性和方法
Selectize是一个可扩展的基于jQuery 的自定义下拉框的UI控件。它对展示标签、联系人列表、国家选择器等比较有用。它的大小在~ 7kb（gzip压缩）左右。提供一个可靠且体验良好的干净和强大的API。文档：https://github.com/selectize/selectize.js用例：https://github.com/selectize/selectize.js/tree/master/examples一、配置selectize属性会添加到原始的<select>
前端JavaScript面试
一、JS基础知识(一) 变量类型和计算[1]. 知识点类型分类引用类型:array、function、object值类型：undefined,string,number,boolean,null强制类型转换字符串拼接var b = 100 +'10' //'10010'==运算符100 == '100' //truenull == undefined //trueif语句var a = 100if(a){ //...}逻辑运算console.l
validate.js 插件表单校验
菜鸟教程： https://www.runoob.com/jquery/jquery-plugin-validate.html(一) 使用步骤导入jquery.js，validate基于jquery导入validate.js页面加载成功后，对表单进行校验，$(“选择器”).validate();<form action="" id="login"> 必填： <input type="text" name="userName" id=""><br /
一、Chrome浏览器调试工具/文档
[1].开调试窗口mac: command+alt+iwindows: F12[2].暂停发生变化中的元素or属性再在添加Break on的元素上取消断点。[3].查看元素最终效果的样式只关心最后的效果是哪些样式控制的可以通过Computed查看[4]. 查看被压缩的css和js代码找到被压缩的css或者js代码点击format，就可以得到展开后的代码，并且可以进行编辑。[5]. 在Chrome中编辑样式并同步到本地文件中将本地文件所在的文件夹添加到Chrome中Chro
今日推荐
周排行