随心的博客 - 博客园

2020年11月4日

webpack 使用webpack-merge 分成 prod、dev、common模块

摘要： 1、安装项目需要使用的npm包 yarn add webpack-merge cross-env html-webpack-plugin clean-webpack-plugin babel-loader @babel/core //cross-env设置打包env 2、在项目根目录下新建build 阅读全文

posted @ 2020-11-04 22:04 随心的博客阅读(580) 评论(0) 推荐(0)

webpack实现react打包

摘要： 1、安装配置babel yarn add babel-loader @babel/core @babel/preset-env 2、webpack.config.js配置module module: { rules: [ { test: /\.js$/, exclude: /node_modules 阅读全文

posted @ 2020-11-04 21:56 随心的博客阅读(836) 评论(0) 推荐(1)

js函数柯里化，自定义实现及使用lodash实现函数柯里化

摘要： 1、安装lodash yarn add lodash 2、使用es5实现函数柯里化 function add(a, b) { return function (c, d) { // console.log(a + b + c + d) return a + b + c + d } } let num 阅读全文

posted @ 2020-11-04 11:37 随心的博客阅读(242) 评论(0) 推荐(0)

2020年11月3日

webpack 配置es6转es5

摘要： 1、安装 yarn add @babel/core @babel/polyfill @babel/preset-env babel-loader 2、项目根目录webpack.config.js中配置rules { test: /\.js$/, exclude: /node_modules/, lo 阅读全文

posted @ 2020-11-03 23:04 随心的博客阅读(798) 评论(0) 推荐(0)

webpack 模块热更新配置

摘要： 1、配置webpack不需要安装什么，只需要原先安装的webpack即可配置 const path = require('path') const webpack = require('webpack') module.exports = { mode: 'production', entry: { 阅读全文

posted @ 2020-11-03 22:29 随心的博客阅读(665) 评论(0) 推荐(0)

2020年11月2日

webpack sourcemap文件生成配置，及项目dist目录自动清理

摘要： 1、安装项目需要文件 yarn add webpack webpack-cli html-webpack-plugin clean-webpack-plugin 2、项目配置如下 const HtmlWebpackPlugin = require('html-webpack-plugin') con 阅读全文

posted @ 2020-11-02 22:17 随心的博客阅读(632) 评论(0) 推荐(0)

webpack 结合express启动本地项目

摘要： 1、安装项目需要文件 yarn add webpack webpack-cli webpack-dev-middleware express html-webpack-plugin 2、项目配置如下 const HtmlWebpackPlugin=require('html-webpack-plug 阅读全文

posted @ 2020-11-02 21:53 随心的博客阅读(443) 评论(0) 推荐(0)

webpack 使用devserver启动本地项目

摘要： //使用webpack-dev-server，可以用http启动本地项目，方便发起http请求，file本地不能发请求 1、安装webpack、webpack-cli@3.3.12、webpack-dev-server yarn add webpack webpack-cli@3.3.12 webp 阅读全文

posted @ 2020-11-02 21:37 随心的博客阅读(1084) 评论(0) 推荐(0)

webpack使用url-loader打包图片,提升项目请求速度

摘要： 1、url-loader的作用是将图片打包成base64字符串，不用在服务器单独请求图片，从而提升项目请求速度 //commonjs const path = require('path'); module.exports = { mode: 'production', devtool:'sourc 阅读全文

posted @ 2020-11-02 16:02 随心的博客阅读(258) 评论(0) 推荐(0)

图片懒加载的实现

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文

posted @ 2020-11-02 14:50 随心的博客阅读(96) 评论(0) 推荐(0)