11 2020 档案

33-module
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { // 阅读全文
posted @ 2020-11-30 02:43 阿jin 阅读(54) 评论(0) 推荐(0)
33-webpack详细配置output
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { // 阅读全文
posted @ 2020-11-30 02:34 阿jin 阅读(74) 评论(0) 推荐(0)
32-webpack详细配置-entry
摘要：const HtmlWebpackPlugin = require('html-webpack-plugin') const {resolve} = require('path') /** * entry：入口起点 * 1. string --> './src/index.js' * 单入口 * 打 阅读全文
posted @ 2020-11-30 01:56 阿jin 阅读(64) 评论(0) 推荐(0)
31-dll
摘要：webpack.dll.js /** * 使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包 * 当你运行 webpack 时，默认查找 webpack.config.js 配置文件 * 需求：需要运行 webpack.dll.js 文件 * --> webpa 阅读全文
posted @ 2020-11-30 00:50 阿jin 阅读(73) 评论(0) 推荐(0)
30-externals（拒绝某些包被打包进来）
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: resolve(__dirname, 'src/js/inde 阅读全文
posted @ 2020-11-29 01:15 阿jin 阅读(50) 评论(0) 推荐(0)
29-多进程打包
摘要：const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsWebpackPlugin = require(' 阅读全文
posted @ 2020-11-29 01:02 阿jin 阅读(61) 评论(0) 推荐(0)
28-PWA
摘要：const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsWebpackPlugin = require(' 阅读全文
posted @ 2020-11-29 00:50 阿jin 阅读(222) 评论(0) 推荐(0)
27-lazy loading（懒加载和预加载）
摘要：懒加载 document.getElementById('btn').onclick = function () { // 懒加载：当文件需要使用时才加载 import(/* webpackChunkName: 'test' */ './test').then(({mul})=>{ console. 阅读全文
posted @ 2020-11-28 23:50 阿jin 阅读(249) 评论(0) 推荐(0)
26-code split
摘要：第一种：多入口 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // 单入口 // entry: './src/js/i 阅读全文
posted @ 2020-11-28 06:47 阿jin 阅读(65) 评论(0) 推荐(0)
25-tree shaking(树摇)
摘要：const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsWebpackPlugin = require(' 阅读全文
posted @ 2020-11-28 05:45 阿jin 阅读(381) 评论(0) 推荐(0)
24-缓存
摘要：const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsWebpackPlugin = require(' 阅读全文
posted @ 2020-11-28 05:41 阿jin 阅读(48) 评论(0) 推荐(0)
23.oneOf
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') // 提取css为单独文件 const MiniCssExtractPlugin = require('mini- 阅读全文
posted @ 2020-11-28 04:45 阿jin 阅读(63) 评论(0) 推荐(0)
22-source-map
摘要：const { resolve } = require('path') const htmlWebpackPlugins = require('html-webpack-plugin') module.exports = { entry: ['./src/js/index.js', './src/i 阅读全文
posted @ 2020-11-28 04:38 阿jin 阅读(129) 评论(0) 推荐(0)
21-HMR
摘要：/* HMR：hot module replacement 热模块替换 / 模块热替换 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） 极大提升构建速度 样式文件：可以使用HMR功能：因为style-loader内部实现了~ JS文件：默认不能使用HMR功能 --> 需要修改j 阅读全文
posted @ 2020-11-28 03:47 阿jin 阅读(70) 评论(0) 推荐(0)
20-优化配置介绍、HMR
摘要：webpack性能优化 开发环境性能优化 生产环境性能优化 开发环境性能优化 优化打包构建速度 HMR 优化代码调试 source-map 生产环境性能优化 优化打包构建速度 oneOf babel缓存 多进程打包 externals dll 优化代码运行的性能 缓存(hash-chunkhash- 阅读全文
posted @ 2020-11-28 02:42 阿jin 阅读(75) 评论(0) 推荐(0)
19-生产环境基本配置
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') // 提取css为单独文件 const MiniCssExtractPlugin = require('mini- 阅读全文
posted @ 2020-11-28 02:27 阿jin 阅读(73) 评论(0) 推荐(0)
18-html压缩
摘要：const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: 阅读全文
posted @ 2020-11-27 22:11 阿jin 阅读(132) 评论(0) 推荐(0)
17-js代码压缩
摘要：const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: 阅读全文
posted @ 2020-11-27 21:57 阿jin 阅读(126) 评论(0) 推荐(0)
16-js兼容性处理
摘要：const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: 阅读全文
posted @ 2020-11-27 05:18 阿jin 阅读(58) 评论(0) 推荐(0)
15-js语法检查eslint
摘要：const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: 阅读全文
posted @ 2020-11-27 04:47 阿jin 阅读(91) 评论(0) 推荐(0)
14-压缩css
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-pl 阅读全文
posted @ 2020-11-27 04:31 阿jin 阅读(48) 评论(0) 推荐(0)
13-css兼容性处理（添加前缀）
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-pl 阅读全文
posted @ 2020-11-27 04:27 阿jin 阅读(151) 评论(0) 推荐(0)
12-提取css成单独文件
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-pl 阅读全文
posted @ 2020-11-27 03:56 阿jin 阅读(154) 评论(0) 推荐(0)
11.生产环境介绍
摘要： 阅读全文
posted @ 2020-11-27 03:26 阿jin 阅读(75) 评论(0) 推荐(0)
10-开发环境配置（复习）
摘要：/* 开发环境配置：能让代码运行 运行项目指令： webpack 会将打包结果输出出去 npx webpack-dev-server 只会在内存中编译打包，没有输出 */ const { resolve } = require('path') const htmlWebpackPlugins = r 阅读全文
posted @ 2020-11-27 03:14 阿jin 阅读(76) 评论(0) 推荐(0)
09-devserver
摘要：const {resolve} = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry:'./src/index.js', output:{ filenam 阅读全文
posted @ 2020-11-26 04:59 阿jin 阅读(70) 评论(0) 推荐(0)
08-打包其他资源
摘要：const {resolve} = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry:'./src/index.js', output:{ filenam 阅读全文
posted @ 2020-11-26 03:49 阿jin 阅读(44) 评论(0) 推荐(0)
07-打包图片资源
摘要：const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: resolve(__dirname, 'src/index.j 阅读全文
posted @ 2020-11-26 03:05 阿jin 阅读(59) 评论(0) 推荐(0)
06-打包html资源
摘要：/** * loader：1. 下载 2. 使用（配置loader） * plugins：1. 下载 2. 引入 3. 使用 */ const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack- 阅读全文
posted @ 2020-11-26 02:05 阿jin 阅读(82) 评论(0) 推荐(0)
05-打包样式资源（编写webpack配置文件）
摘要：/** * webpack.config.js webpack的配置文件 * 作用：指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置） * * 所有构件工具都是基于nodejs平台运行的~模块化默认采用commonjs */ const { resolve } = 阅读全文
posted @ 2020-11-26 01:28 阿jin 阅读(65) 评论(0) 推荐(0)
04-webpack初体验
摘要：/** * index.js: webpack入口起点文件 * * 1.运行指令： * 开发环境：webpack ./src/index.js -o ./build --mode=development * webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./bu 阅读全文
posted @ 2020-11-26 00:41 阿jin 阅读(46) 评论(0) 推荐(0)
03-webpack五个概念
摘要： 阅读全文
posted @ 2020-11-26 00:04 阿jin 阅读(49) 评论(0) 推荐(0)
数组去重、字符串去重....
摘要：// 数组去重 var arr = [0, 0, 1, 1, 1, 2, 2, 2, 3, 3, 3, 'a', 'a'] Array.prototype.unique = function () { let temp = {}, newArr = [] for (let i = 0; i < th 阅读全文
posted @ 2020-11-24 17:40 阿jin 阅读(156) 评论(0) 推荐(0)