11 2021 档案

配置只第一次加载需要引入的第三方包 提升打包性能
摘要：配置只第一次加载需要引入的第三方包 提升打包性能 npm install add-asset-html-webpack-plugin --save const addAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin') / 阅读全文
posted @ 2021-11-29 15:42 13522679763-任国强 阅读(48) 评论(0) 推荐(0)
webpack 配置 typescript
摘要：npm install webpack-cli@3.1.2 webpack@4.25.1 --save-dev npm install ts-loader@5.3.2 typescript@3.2.2 --save-dev 根目录下 创建 tsconfig.json { "compilerOptio 阅读全文
posted @ 2021-11-29 09:57 13522679763-任国强 阅读(42) 评论(0) 推荐(0)
环境变量env的使用
摘要：环境变量的使用 "scripts": { "dev-build": "webpack --config ./build/webpack.common.js", "dev": "webpack-dev-server --config ./build/webpack.common.js", "build 阅读全文
posted @ 2021-11-26 15:54 13522679763-任国强 阅读(617) 评论(0) 推荐(0)
shimming 改变 this 指向 指向 window
摘要：shimming plugins:[ new htmlWebpackPligin({ template:`./src/index.html` }), new cleanWebpackPligin(['dist'],{ root: path.resolve(__dirname,'../') }), / 阅读全文
posted @ 2021-11-26 15:39 13522679763-任国强 阅读(35) 评论(0) 推荐(0)
contenthash 配置解决js缓存的问题
摘要：contenthash 配置解决js缓存的问题 optimization:{ runtimeChunk:{ name: 'runtime' }, usedExports:true, splitChunks:{ chunks:"all" , cacheGroups:{ vendors: { test: 阅读全文
posted @ 2021-11-26 15:04 13522679763-任国强 阅读(168) 评论(0) 推荐(0)
css 代码分割 合并 压缩
摘要：css 代码分割 "sideEffects": ["*.css"], npm install --save-dev mini-css-extract-plugin@0.5.0 const miniCssExtractPlugin = require('mini-css-extract-plugin' 阅读全文
posted @ 2021-11-26 14:31 13522679763-任国强 阅读(56) 评论(0) 推荐(0)
配置 js 代码分割
摘要：// 配置 js 代码分割 // 第一种 entry:{ // lodash:'./src/lodash.js' , main:'./src/index.js' }, // 第二种 optimization:{ splitChunks:{ chunks:"all" } }, plugins:[] / 阅读全文
posted @ 2021-11-26 11:09 13522679763-任国强 阅读(86) 评论(0) 推荐(0)
合并开发 环境 配置区分打包 development || production
摘要：// 合并开发 环境 配置区分打包 npm install webpack-merge@4.1.5 -D package.json "scripts": { "dev": "webpack-dev-server --config ./build/webpack.dev.js", "build": " 阅读全文
posted @ 2021-11-26 10:15 13522679763-任国强 阅读(45) 评论(0) 推荐(0)
配置 tree shaking
摘要：配置 tree shaking plugins:[ ], // 增加这个 （开发环境下 增加， 线上环境不用增加） // optimization:{ // usedExports: true // }, devServer:{ } package.json "name": "webpack4", 阅读全文
posted @ 2021-11-26 09:36 13522679763-任国强 阅读(150) 评论(0) 推荐(0)
配置 babel es6 语法转成 es5
摘要：// 配置 babel es6 语法转成 es5 npm install --save-dev babel-loader @babel/core npm install @babel/preset-env --save-dev npm install --save @babel/polyfill n 阅读全文
posted @ 2021-11-25 17:40 13522679763-任国强 阅读(130) 评论(0) 推荐(0)
配置 source-map 快速定位js代码错误位置
摘要：// 配置 source-map 快速定位js代码错误位置 // 开发配置 // mode:'development', // development || production // source-map->会生成单独的 .map 文件 // inline-source-map 不会生成单独的 . 阅读全文
posted @ 2021-11-25 14:50 13522679763-任国强 阅读(301) 评论(0) 推荐(0)
配置 entry 和 output
摘要：// 配置 entry 和 output entry:{ main:'./src/index.js', // sub:'./src/index.js' }, output:{ // filename: 'dist.js', // publicPath:'http:///www.cdn.com', / 阅读全文
posted @ 2021-11-25 13:53 13522679763-任国强 阅读(38) 评论(0) 推荐(0)
自动生成 html 文件html-webpack-plugin, clean-webpack-plugin打包之前 自动删除 dist 目录里的文件
摘要：// 自动生成 html 文件 npm install html-webpack-plugin@3.2.0 -D const htmlWebpackPligun = require('html-webpack-plugin') plugins:[ new htmlWebpackPligun({ te 阅读全文
posted @ 2021-11-25 12:23 13522679763-任国强 阅读(91) 评论(0) 推荐(0)
打包字体文件
摘要：// 打包字体文件 { test:/\.(woff2|woff|ttf)$/, use:{ loader:'file-loader' } } , 阅读全文
posted @ 2021-11-25 11:47 13522679763-任国强 阅读(54) 评论(0) 推荐(0)
css配置打包
摘要：// { // test:/\.css$/, // use:['style-loader','css-loader'] // } , { test:/\.scss$/, use:[ 'style-loader', // 'css-loader', { loader:'css-loader', opt 阅读全文
posted @ 2021-11-25 11:29 13522679763-任国强 阅读(29) 评论(0) 推荐(0)
打包文件图片url-loader
摘要：// 打包文件图片url-loader // url-loader 可以配置是否生成 base64 格式图片 npm install url-loader -D rules:[ { test:/\.(jpg|png|gif)$/, use:{ loader: 'url-loader', option 阅读全文
posted @ 2021-11-25 10:03 13522679763-任国强 阅读(41) 评论(0) 推荐(0)
js复制文本到剪贴板
摘要：// 复制文本 function copyText(text){ // 数字没有 .length 不能执行selectText 需要转化成字符串 const textString = text.toString(); let input = document.querySelector('#copy 阅读全文
posted @ 2021-11-16 09:36 13522679763-任国强 阅读(38) 评论(0) 推荐(0)