WebPack
伍什kay
猿,妙不可言
展开
-
React Hooks项目 require()使用动态(变量)路径引入文件
需求描述:根据后台返回的图片名称,加载静态资源中所对应名称的图标为了方便,项目期初并没有将静态资源放到类似于 OSS 这样的静态服务器上面,而是放到了项目中问题描述:组件渲染过程中需要动态渲染img元素,于是使用了node的require模块,再使用es6模板字符串动态拼接src路径:<img className="w-16" src={require(`assets/images/weatherIcons/${weatherInfo?.icon}.png`)} alt="" />原创 2021-07-16 17:35:06 · 2411 阅读 · 1 评论 -
React Ts项目 react-hot-loader 热更新,类型“NodeModule”上不存在属性“hot”
配置热更新会报:类型“NodeModule”上不存在属性“hot”。由于使用了ts,在类型检查过程中对于不存在的属性就会抛此种格式的提示,解决方法也很简单,使用as关键字将 module 断言成 any 类型:if ((module as any).hot) { (module as any).hot.accept('./App', () => { const NextApp = require('./App').default; render(NextApp); })}原创 2021-07-16 16:13:44 · 1024 阅读 · 0 评论 -
crypto报错:“crypto“: require.resolve(“crypto-browser“)
报错详细“Module not found: Error: Can’t resolve ‘crypto’ in ‘D:\Projects\webpack-basic\webpack-ie-test\node_modules\crypto-js’BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify i原创 2021-05-27 16:29:28 · 5968 阅读 · 2 评论 -
webpack(六)code split
code split概念:将一个文件打包生成多个文件,这样做可以将一个大的文件分割成多个小的文件同时并行加载。同时分割成多个文件还可以实现按需加载的功能,按需加载在项目中也是很重要的,比如开发单页面应用,其体积相对来说本身就是庞大的,所以就需要按需将不同的资源加载进来这时就需要webpack的代码分割技术了。第一种方式创建demo1webpack最基础配置const { resolve } = require('path');const HtmlWebpackPlugin = requir原创 2021-03-26 14:22:44 · 668 阅读 · 0 评论 -
webpack(五)tree shaking
tree_shaking概念把应用程序想象成一棵树,把引入的第三方库或者源代码可以理解为绿色的树叶,而没有引入的库和无用的源代码可以理解为灰色的恶枯萎的树叶,tree_shaking 这一操作就是为了去除这些灰色的无用的树叶(代码),这样会使我们的代码体积更小,请求速度更快,加载速度也更快。tree_shaking前提条件必须使用ES6模块化;开启production环境:mode: ‘production’,简单实现创建demo项目中新建名为test的js文件,定义两个方法,将两个方法原创 2021-03-26 10:50:51 · 208 阅读 · 0 评论 -
webpack(五)性能优化之缓存
随着前端项目日益增大,code splitting盛行,通过缓存资源文件、实现增量更新来优化用户体验是非常重要的。一般来说,对于静态资源,我们都希望浏览器能够进行缓存,那样以后进入页面就可以直接使用缓存资源,页面直接直逼火箭速度打开,既提高了用户的体验也节省了宽带资源。当然浏览器缓存方法有很多种,这里只简单讨论下 webpack 利用 hash 方式修改文件名,以达到缓存目的。webpack hashwebpack 内置了多种可使用 hash,官网解释分别如下:hash:the hash of .原创 2021-03-26 09:53:28 · 361 阅读 · 0 评论 -
webpack(四)devtool
devtool可以理解为一种代码调试工具,其配置如下module.exports = {devtool: ‘source-map’}devtool大概有以下几个值,下面是对各个值的作用说明和有无生成外部文件。source-map:外部错误代码的准确信息和源代码的错误位置inline-source-map:内联只生成一个内联source-map错误代码准确信息和源代码的错误位置hidden-source-map:外部提示错误代码的错误原因,但是没有错误位置不能追踪源代码错误,只原创 2021-03-24 17:55:11 · 727 阅读 · 0 评论 -
webpack(三)生产环境基本配置
所用插件:mini-css-extract-pluginoptimize-css-assets-webpack-pluginhtml-webpack-plugin配置代码及说明注释如下:const { resolve } = require('path');// 将css提取到单独的文件const MiniCssExtractPlugin = require('mini-css-extract-plugin');// 压缩cssconst OptimizeCssAssetsWebpac.原创 2021-03-24 14:22:43 · 98 阅读 · 0 评论 -
webpack(二)开发环境基本配置
const { resolve } = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: './src/js/index.js', output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, module: { rules: [原创 2021-03-24 14:17:26 · 103 阅读 · 0 评论 -
webpack:Unknown option: .useBuiltIns,Maybe you meant to use
由于webpack版本的不同各个配置的写法令人头疼,在使用core-js过程中报了如下错误(此时我用的4.0版本)Unknown option: .useBuiltIns. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options. Maybe you meant to use以下是具体报错信息在配置core-js的时候少写了一层use所以会报这个错,加上就可以了。{.原创 2021-03-23 16:52:53 · 2186 阅读 · 2 评论 -
webpack(一)概念及模块化
WebPack一、WebPack是什么概念(来自官方)为什么要打包二、模块化一、WebPack是什么概念(来自官方)webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)原创 2021-01-25 23:10:34 · 110 阅读 · 0 评论