lessonSam
lessonSam

webpack 我的笔记

webpack快速入门教程

测试文档见github 记得star 哦

1、了解Webpack相关

  • 什么是webpack
    • Webpack是一个模块打包器(bundler)。
    • 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理
    • 它将根据模块的依赖关系进行静态分析，生成对应的静态资源
  • 五个核心概念
    • Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
    • Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
    • Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能解析 JavaScript）。
    • Plugins：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
    • Mode：模式，有生产模式production和开发模式development
  • 理解Loader
    • Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
    • Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
    • 它本身是一个函数，接受源文件作为参数，返回转换的结果
    • loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。
  • 理解Plugins
    • 插件可以完成一些loader不能完成的功能。
    • 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
  • 配置文件(默认)
    • webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象

2、开启项目

  • 初始化项目：

    • 生成package.json文件

      {
  "name": "webpack_test",
  "version": "1.0.0"
}

  • 安装webpack

    • npm install webpack webpack-cli -g //全局安装,作为指令使用
    • npm install webpack webpack-cli -D //本地安装,作为本地依赖使用

3、编译打包应用

  • 创建js文件
    • src/js/app.js
    • src/js/module1.js
    • src/js/module2.js
    • src/js/module3.js
  • 创建json文件
    • src/json/data.json
  • 创建主页面:
    • src/index.html
  • 运行指令
    • 开发配置指令：webpack src/js/app.js -o dist/js/app.js --mode=development
      • 功能: webpack能够编译打包js和json文件，并且能将es6的模块化语法转换成浏览器能识别的语法
    • 生产配置指令：webpack src/js/app.js -o dist/js/app.js --mode=production
      • 功能: 在开发配置功能上加上一个压缩代码
  • 结论：
    • webpack能够编译打包js和json文件
    • 能将es6的模块化语法转换成浏览器能识别的语法
    • 能压缩代码
  • 缺点：
    • 不能编译打包css、img等文件
    • 不能将js的es6基本语法转化为es5以下语法
  • 改善：使用webpack配置文件解决，自定义功能

4、使用webpack配置文件

  • 目的：在项目根目录定义配置文件，通过自定义配置文件，还原以上功能

  • 文件名称：webpack.config.js

  • 文件内容：

    const { resolve } = require('path'); //node内置核心模块，用来设置路径。
module.exports = {
  entry: './src/js/app.js',   // 入口文件配置（简写）
  /*完整写法： 
  entry:{
    main:'./src/js/app.js'
  }
  */
  output: {                     // 输出配置
    filename: './js/built.js',      // 输出文件名
    path: resolve(__dirname, 'build')   //输出文件路径配置
  },
  mode: 'development'   //开发环境(二选一)
  mode: 'production'   //生产环境(二选一)
};

  • 运行指令： webpack

5、打包less资源

  • 概述：less文件webpack不能解析，需要借助loader编译解析

  • 创建less文件

    • src/less/test1.less
    • src/less/test2.less

  • 入口app.js文件

    • 引入less资源

  • 安装loader

    • npm install css-loader style-loader less-loader less --save-dev

  • 配置loader

    {
  test: /\.less$/, // 检查文件是否以.less结尾（检查是否是less文件）
  use: [  // 数组中loader执行是从下到上，从右到左顺序执行
    'style-loader', // 创建style标签，添加上js中的css代码
    'css-loader', // 将css以commonjs方式整合到js文件中
    'less-loader'  // 将less文件解析成css文件
  ]
},

  • 运行指令：webpack

6、js语法检查

  • 概述：对js基本语法错误/隐患，进行提前检查

  • 安装loader

    • npm install eslint-loader eslint --save-dev

  • 备注1：在：eslint.org网站 -> userGuide -> Configuring ESLint 查看如何配置

  • 备注2：在：eslint.org网站 -> userGuide -> Rules 查看所有规则

  • 配置loader

    module: {
  rules: [
    {
      test: /\.js$/,  //只检测js文件
      exclude: /node_modules/,  //排除node_modules文件夹
      enforce: "pre",  //提前加载使用
      use: { //使用eslint-loader解析
        loader: "eslint-loader" 
      }
    }        
  ]
}

  • 修改package.json（需要删除注释才能生效）

    "eslintConfig": {
  "parserOptions": {
    "ecmaVersion": 6,         // 支持es6
    "sourceType": "module"    // 使用es6模块化
  },
  "env": { // 设置环境
    "browser": true,   // 支持浏览器环境： 能够使用window上的全局变量
    "node": true       // 支持服务器环境:  能够使用node上global的全局变量
  },
  "globals": {    // 声明使用的全局变量, 这样即使没有定义也不会报错了
    "$": "readonly"   // $ 只读变量
  },
  "rules": {  // eslint检查的规则  0 忽略 1 警告 2 错误
    "no-console": 0,  // 不检查console
    "eqeqeq": 2,  // 用==而不用===就报错
    "no-alert": 2 // 不能使用alert
  },
  "extends": "eslint:recommended" // 使用eslint推荐的默认规则 https://cn.eslint.org/docs/rules/
},

  • 运行指令：webpack

7、js语法转换

  • 概述：将浏览器不能识别的新语法转换成原来识别的旧语法，做浏览器兼容性处理

  • 安装loader

    • npm install babel-loader @babel/core @babel/preset-env --save-dev

  • 配置loader

    module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

  • 运行指令：webpack

8、 js兼容性处理

第一种方法：使用经典的polyfill

  • 安装包

    • npm install @babel/polyfill

  • 使用

    - app.js

  import '@babel/polyfill'; // 包含ES6的高级语法的转换

  • 优点：解决babel只能转换部分低级语法的问题(如：let/const/解构赋值...)，引入polyfill可以转换高级语法(如:Promise...)

  • 缺点：将所有高级语法都进行了转换，但实际上可能只使用一部分（无论开发使用了几个新语法,全部转换成低级语法,不推荐使用）

  • 解决：需要按需加载（使用了什么高级语法，就转换什么，而其他的不转换）

第二种方法：借助按需引入core-js按需引入

  • 安装包

    • npm install core-js

  • 配置loader

    {
  test: /\.js$/,
  exclude: /(node_modules)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'usage',  // 按需引入需要使用polyfill
            corejs: { version: 3 }, // 解决warn
            targets: { // 指定兼容性处理哪些浏览器
              "chrome": "58",
              "ie": "9",
            }
          }
        ]
      ],
      cacheDirectory: true, // 开启babel缓存
    }
  }
},

9、打包样式文件中的图片资源

  • 概述：图片文件webpack不能解析，需要借助loader编译解析

  • 添加2张图片:

    • 小图, 小于8kb: src/images/vue.png
    • 大图, 大于8kb: src/images/react.jpg

  • 在less文件中通过背景图的方式引入图片

  • 安装loader

    • npm install file-loader url-loader --save-dev
    • 补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。

  • 配置loader

    {
  test: /\.(png|jpg|gif)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 8192, // 8kb --> 8kb以下的图片会base64处理
      outputPath: 'images', // 决定文件本地输出路径
      publicPath: '../build/images',  // 决定图片的url路径
      name: '[hash:8].[ext]' // 修改文件名称 [hash:8] hash值取8位  [ext] 文件扩展名
    }
  }
},

  • 运行指令：webpack

10、打包html文件

  • 概述：html文件webpack不能解析，需要借助插件编译解析

  • 添加html文件

    • src/index.html
    • 注意不要在html中引入任何css和js文件

  • 安装插件Plugins

    • npm install html-webpack-plugin --save-dev

  • 在webpack.config.js中引入插件（插件都需要手动引入，而loader会自动加载）

    • const HtmlWebpackPlugin = require('html-webpack-plugin')

  • 配置插件Plugins

    plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html', // 以当前文件为模板创建新的HtML(1. 结构和原来一样 2. 会自动引入打包的资源)
  }),
]

  • 运行指令：webpack

11、打包html中图片资源

  • 概述：html中的图片url-loader没法处理，它只能处理js中引入的图片 / 样式中图片，不能处理html中img标签，需要引入其他html-loader处理。

  • 添加图片

    • 在src/index.html添加两个img标签

  • 安装loader

    • npm install html-loader --save-dev

  • 配置loader

    {
  test: /\.(html)$/,
  use: {
    loader: 'html-loader'
  }
}

  • 运行指令：webpack

12、打包其他资源

  • 概述：其他资源webpack不能解析，需要借助loader编译解析

  • 添加字体文件

    • src/media/iconfont.eot
    • src/media/iconfont.svg
    • src/media/iconfont.ttf
    • src/media/iconfont.woff
    • src/media/iconfont.woff2

  • 修改样式

    @font-face {
  font-family: 'iconfont';
  src: url('../media/iconfont.eot');
  src: url('../media/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../media/iconfont.woff2') format('woff2'),
  url('../media/iconfont.woff') format('woff'),
  url('../media/iconfont.ttf') format('truetype'),
  url('../media/iconfont.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

  • 修改html，添加字体

  • 配置loader

    {
  test: /\.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/,  // 处理其他资源
  loader: 'file-loader',
  options: {
    outputPath: 'media',
    name: '[hash:8].[ext]'
  }
}

  • 运行指令：webpack

13、自动编译打包运行

  • 安装loader

    • npm install webpack-dev-server --save-dev

  • 详细配置见官网：指南 -> 开发环境 -> 使用webpack-dev-server

  • 修改webpack配置对象（注意不是loader中）

    devServer: {
  open: true, // 自动打开浏览器
  compress: true, // 启动gzip压缩
  port: 3000, // 端口号
}

  • 修改url-loader部分配置

    • 因为构建工具以build为根目录，不用再找build了
    • publicPath: '../build/images/' --> publicPath: 'images/'

  • 修改package.json中scripts指令

    • "start": "webpack-dev-server",

  • 运行指令：npm run start

    • 注意webpack-dev-server指令才能启动devServer配置，然后配置到package.json中才行

14、热模替换功能

  • 概述：热模块替换（HMR）是webpack提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新（只更新变化的模块，不变的模块不更新）。

  • 详细配置见官网：指南 -> 模块热替换

  • 修改devServer配置

      devServer: {
    contentBase: resolve(__dirname, 'build'), // 运行项目的目录
  open: true, // 自动打开浏览器
  compress: true, // 启动gzip压缩
  port: 3000, // 端口号
  hot: true // 开启热模替换功能 HMR
  }

  • 问题：html文件无法自动更新了，需要增加一个入口

      entry: ['./src/js/app.js','./src/index.html']

15、devtool

  • 概述： 一种将压缩/编译文件中的代码映射回源文件中的原始位置的技术，让我们调试代码不在困难
  • 详细配置见官网：配置 -> devtool
  • 介绍
    • cheap 只保留行, 编译速度快
    • eval webpack生成的代码（每个模块彼此分开，并使用模块名称进行注释）, 编译速度快
    • inline 以base64方式将source-map嵌入到代码中，缺点造成编译后代码体积很大
  • 推荐使用：
    • 开发环境： cheap-module-eval-source-map
    • 生产环境： cheap-module-source-map

以上就是webpack开发环境的配置，可以在内存中自动打包所有类型文件并有自动编译运行、热更新等功能。

16、准备生产环境

  • 创建文件夹config，将webpack.config.js复制两份

    • ./config/webpack.dev.js
    • ./config/webpack.prod.js

  • 修改webpack.prod.js配置，删除webpack-dev-server配置

    // / 代表根路径(等价于这个：http://localhost:5000/)，以后项目上线所有路径都以当前网址为根路径出发
module.exports = {
  output: {
    path: resolve(__dirname, '../build'), // 文件输出目录
    filename: './js/built.js', // 文件输出名称
    publicPath: '/'  // 所有输出资源在引入时的公共路径，若loader中也指定了publicPath，会以loader的为准。
  },
module: {
  rules: [
  {
        test: /\.(png|jpg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 8192, 
            outputPath: 'images', 
            publicPath: '/images',  // 重写publicPath，需要在路径前面加上 /
            name: '[hash:8].[ext]' 
          }
        }
      },  
  ]
},
  mode: 'production',  //修改为生产环境
devtool: 'cheap-module-source-map' // 修改为生产环境的错误提示
// 删除devServer
}

  • 修改package.json的指令

    • "start": "webpack-dev-server --config ./config/webpack.dev.js"
    • "dev": "webpack-dev-server --config ./config/webpack.dev.js"
    • "build": "webpack --config ./config/webpack.prod.js"

  • 开发环境指令

    • npm start
    • npm run dev

  • 生产环境指令

    • npm run build
    • 注意: 生产环境代码需要部署到服务器上才能运行 （serve这个库能帮助我们快速搭建一个静态资源服务器）
      • npm i serve -g
      • serve -s build -p 5000

17、清除打包文件目录

  • 概述：每次打包生成了文件，都需要手动删除，引入插件帮助我们自动删除上一次的文件
  • 安装插件
    • npm install clean-webpack-plugin --save-dev
  • 引入插件
    • const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 注意要解构赋值！！！
  • 配置插件
    • new CleanWebpackPlugin() // 自动清除output.path目录下的文件
  • 运行指令：npm run build

18、提取css成单独文件

  • 安装插件

    • npm install mini-css-extract-plugin --save-dev

  • 引入插件

    • const MiniCssExtractPlugin = require("mini-css-extract-plugin");

  • 配置loader

    {
  test: /\.less$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'less-loader',
  ]
}

  • 配置插件

    new MiniCssExtractPlugin({
  filename: "css/[name].css",
})

  • 运行指令

    • npm run build
    • serve -s build

19、添加css兼容

  • 安装loader

    • npm install postcss-loader postcss-flexbugs-fixes postcss-preset-env postcss-normalize autoprefixer --save-dev

  • 配置loader

    {
  test: /\.less$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          require('postcss-preset-env')({
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
          }),
          require('postcss-normalize')(),
        ],
        sourceMap: true,
      },
    },
    'less-loader',
  ]
}

  • 添加配置文件: .browserslistrc

    last 1 version
> 1%
IE 10 # sorry

  • 运行指令：

    • npm run build
    • serve -s build

20、压缩css

  • 安装插件

    • npm install optimize-css-assets-webpack-plugin --save-dev

  • 引入插件

    • const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

  • 配置插件

    new OptimizeCssAssetsPlugin({
  cssProcessorPluginOptions: {
    preset: ['default', { discardComments: { removeAll: true } }],
  },
  cssProcessorOptions: { // 解决没有source map问题
    map: {
      inline: false,
      annotation: true,
    }
  }
})

  • 运行指令：

    • npm run build
    • serve -s build

21、压缩html

  • 修改插件配置

    new HtmlWebpackPlugin({
  template: './src/index.html',
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeRedundantAttributes: true,
    useShortDoctype: true,
    removeEmptyAttributes: true,
    removeStyleLinkTypeAttributes: true,
    keepClosingSlash: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  }
})

  • 运行指令：

    • npm run build
    • serve -s dist

以上就是webpack生产环境的配置，可以生成打包后的文件。

你可能感兴趣的:(webpack 我的笔记)

  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • react里的index.js是怎么跟index.html结合起来的? SherrinfordL
    image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中，所以你无法直观的看到这些配置。你可以在项目下运行npmruneject，被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是，你执行npmrunstart时，启动的webpack-dev-server，会加载react-script项目conf
  • 深入理解Webpack核心模块Tapable钩子[异步版] weixin_34413802 webpackjavascriptViewUI
    接上一篇文章深入理解Webpack核心模块WTApable钩子(同步版)tapable中三个注册方法1tap(同步)2tapAsync(cb)3tapPromise(注册的是Promise)tapable中对三个触发方法1call2callAsync3promise这一章节我们将分别实现异步的Async版本和Promise版本异步钩子AsyncParallelHookAsyncParallelHo
  • webpack 之 tapable 学习 weixin_34008784 webpackjavascriptViewUI
    前言webpack大家应该都耳熟能详了。个人感觉，webpack的本质就是让一堆的Loader和Plugin在webpack的可支配范围内，有序可控的执行，最终生成一堆可在浏览器中执行的code和一些状态信息。而这些Loader和Plugin，有用户自定义的，也有webpack自己内部定义的。Loader的运行机制，不是这篇文章讲述的内容，有需要的朋友，可以看下我之前的这篇文章：webpack之l
  • webapck由浅入深——（Tapable） weixin_33737134 webpackViewUI
    webpack系列文章webpack由浅入深——（webpack基础配置）webpack由浅入深——（webpack优化配置）webpack由浅入深——（tapable）webpack由浅入深——（webapck简易版）webpack由浅入深——（ast、loader和plugin）Tapable和webpackTapable是基于发布订阅模式实现的一个类库，提供了许多Hook类，可创建许多钩子。
  • webpack插件开发必会Tapable web老猴子 webpack前端javascript
    认识Tapable官方对tapable的定义是钩子，业界很多写tapable的觉得它是发布订阅模式，它确实很像发布订阅模式，但是不完全是，至于官方说的钩子，个人感觉在webpack内部可以称作钩子，因为是官方定义的，所以肯定是按照设计的想法来使用的，如果是你自己使用，操作不当可能就不是钩子了，毕竟只是一个工具，你拿扳手当锤子也没人说你什么，以上是个人见解，下面附上一些验证的思路。不喜欢论证，喜欢看
  • webpack的插件机制(Tapable) 若梦plus 前端工程化webpack前端
    webpack的插件机制(Tapable)在具体介绍webpack内置插件与钩子可视化工具之前，我们先来了解一下webpack中的插件机制。webpack实现插件机制的大体方式是：创建-webpack在其内部对象上创建各种钩子；注册-插件将自己的方法注册到对应钩子上，交给webpack；调用-webpack编译过程中，会适时地触发相应钩子，因此也就触发了插件的方法。Webpack本质上是一种事件流
  • 四、webpack4.0 - tapable Razas WEBPACK4webpack4.0
    一、tapable介绍webpack中插件的时候，需要用到tapable。新建一个项目WEBPACK-Tapable。初始化package.json:npminit-y安装：npminstalltapable--savetapable是一个包。二、tapable三、AsyncParralleHook四、AsyncSeriesHook五、AsyncSeriesWaterfall
  • tapable详解 风火一回 webpacktapablewebpack插件制作
    tapable详解tapable是webpack内部使用的一个流程管理工具，主要用来串联插件，完善事件流执行。1.安装tapableyarnaddtapable2.常用hooksimport{SyncHook,SyncBailHook,SyncWaterfallHook,SyncLoopHook,AsyncParallelHook,AsyncParallelBailHook,AsyncSeries
  • Tapable 信海利世 webpackwebpack前端
    一、Tapable是什么？Tapable是一个类似于Node.js的EventEmitter的库,主要是控制钩子函数的发布与订阅,控制着webpack的插件系统。Tapable库暴露了很多Hook（钩子）类，为插件提供挂载的钩子const{SyncHook,//同步钩子SyncBailHook,//同步熔断钩子即return一个非undefined的值，则不再继续执行后面的监听函数SyncWate
  • Webpack插件核心原理 gogo2027 webpack
    引言围绕Webpack打包流程中最核心的机制就是所谓的Plugin机制。所谓插件即是webpack生态中最关键的部分，它为社区用户提供了一种强有力的方式来直接触及webpack的编译过程(compilationprocess)。今天，我们来聊聊Webpack中必不可少的核心Plugin机制～Plugin本质上在Webpack编译阶段会为各个编译对象初始化不同的Hook，开发者可以在自己编写的Plu
  • webpack怎么配置单页面或者多页面项目？ 镜中的女孩-potato webpack前端node.js
    单页直接在entry中指定单页面的入口文件即可，对于多页面来说，如果页面之间有依赖关系可以考虑将entry的值改成一个数组，数组中的每一项是入口文件的地址，并且通过dependOn配置多个入口的依赖关系，一般的，我们也可以直接在entry中配置多个入口文件的键值对1、单页面举个例子=>你有这样一个项目架构├──config│├──webpack.config.js//webpack配置文件├──s
  • fetch-event-source 如何通过script全局引入 cuiyuchen111 javascript前端
    fetchEventSource源码中导出了两种类型的包cjs和esm。但是有个需求如何在原生是js中通过script标签引呢？需要加上type=module。今天介绍另一种方法下载源码文件：https://github.com/Azure/fetch-event-source.git安装:npminstall--save-devwebpackwebpack-clits-loadertypescr
  • 【Webpack 踩坑】CSS加载缓慢 ①条咸鱼 webpackcssrust
    问题：使用webpack5，单独index.scss在assets/css目录下，但是不管是production还是development环境下，都会出现dom加载完后再渲染样式本意是想要将样式单独打包到一个文件夹，还有压缩css于是用了mini-css-extract-plugin这个loader（前提要先安装）//webpack.config.jsconstMiniCssExtractPlug
  • 从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南 Sam9029 Webpack前端webpack
    **‍‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！**由于文章有一万字左右的，故而内容中部分不免冗余，或许有写了些废话进去，但整体也无伤大雅**‍‍文章是初次实践总结,若有错误或某个内容有更优的解决方案，还望指正！**附录中有脚手架文件夹目录大纲（Vue3+Webpack5）脚手架项目源码:https://github.com/sam9029/s9_webpack_g
  • webpack原理、优势、基本功能和常见问题 伟大的人民艺术家 javascriptes6
    webpack是一个模块打包工具，用它可以管理项目中的模块依赖，并编译出所需的静态文件。打包原理：webpack打包原理是根据文件间的依赖关系对其进行静态分析，将这些模块按指定规则生成静态资源，当webpack处理程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，将所有这些模块打包成一个或多个bundle。webpack构建流程初始化参数—>开始编译---->确定入口---->
  • 前端技能树，面试复习第 29 天—— 简述 Babel 的原理 | Webpack 构建流程 | Webpack 热更新原理 | Git 常用命令 编程轨迹_ 前端面试复习笔记前端面试面经前端工程化WebpackBabel前端面试大厂面试题
    31b3479814f74acbb70b9f63f2e80012.gif"width=“100%”>⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、答疑解惑、面试辅导以及职业发展。。1.Babel的原理是什么?babel的转译过程也分为三个阶段，这三步具体是：解析、转换、生成解析Parse:将代码解析⽣成抽象语法树（AS
  • 前端开发深入了解webpack 史努比的大头 前端
    什么是webpackWebpack是一个现代JavaScript应用程序的模块打包工具。它主要用于将各种资源（如JavaScript、CSS、图片等）打包成一个或多个文件，以优化Web应用的加载性能。Webpack的核心功能包括：模块化：支持将代码拆分为模块，便于管理和重用。打包：将多个模块和资源打包成一个或多个文件，减少HTTP请求。加载器（Loaders）：处理不同类型的文件（如转换ES6到E
  • 【Webpack】了解Webpack Sam9029 Webpackwebpack前端node.js
    Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！*文章若有错误或某个内容有更优的解决方案，还望指正！*Webpack了解webpack指南https://webpack.docschina.org/guides/webpack文档https://webpack.docschina.org/前
  • Webpack 概念速通：从入门到掌握构建工具的精髓 tabzzz 前端webpack前端
    Webpack基本概念这里我们先简单熟悉下Webpack的基本概念，我们在搭建项目的时候都会要用到的！这里我们分享的着重点是基本概念而不是具体配置项和使用方法依赖图(dependencygraph)模式(mode)入口(entry)输出(output)加载器(loader)插件(plugin)源映射(SourceMaps)开发服务器(devServer)依赖图（dependencygraph）依赖
  • 高级 - 总结 怕冷的火焰（~杰） nodejs和webpackwebpack
    高级总结:我们从4个角度对webpack和代码进行了优化:​1.提升开发体验使用SourceMap让开发或上线时代码报错能有更加准确的错误提示2.提升webpack打包构建速度使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而使更新速度更快使用OneOf让资源文件一旦被某个loader处理了,就不会继续遍历了,打包速度更快使用Include
  • webpack 配置 weixin_44101835 webpack前端node.js
    webpack.base.jsconstpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');constMiniCssExtractPlugin=require('mini-css-extract-plugin');modules.export=function(isDev){return{//入口文件
  • 值得你学习的构建工具-Webpack5.0简化版--五大核心概念 双头雄狮 构建工具学习webpack
    一、Webpack是什么简单来说，webpack就是一个用于现代JavaScript应用程序的静态打包工具，打包过程：从入口文件开始，构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些所有模块打包，它们均为静态资源，用于展示你的内容。Webpack5运行于Node.jsv10.13.0+的版本。二、为什么使用Webpack在以前我们开发一个项目的时候，会出现很多.css、.js等类似的
  • Webpack五大核心概念 前路茫茫——何处无香 webpackwebpack
    一、Entry入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。二、Output输出（Output）指示Webpack打包后的资源bundles输出到那里去，以及如何命名。三、LoaderLoader让Webpack能够取处理那些非JavaScript文件（Webpack自身子理解JavaScript）四、Plugins插件（Plugins）可以用于执行范围更广
  • webpack - 五大核心概念和基本配置（打包一个简单HTML页面） 怕冷的火焰（~杰） nodejs和webpackwebpacknode.js
    //五大核心概念1.entry（入口）指示Webpack从哪个文件开始打包2.output（输出）指示Webpack打包完的文件输出到哪里去，如何命名等3.loader（加载器）webpack本身只能处理js，json等资源，其他资源如图片需要借助loader，webpack才能解析4.plugin（插件）扩展Webpack的功能5.mode（模式）主要有两种模式：开发模式（development
  • Webpack和Vite的区别 南辞w 前端面试篇webpack前端node.js
    什么是webpack？webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependencygraph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。Webpack的打包构建流程Webpack会遍历你应用程序中的所有文件，并启动一个开发服务器，
  • CRACO 快速使用 小秀_heo React及其周边生态前端javascript
    GettingStarted|CRACOcraco是专门由于cra配置的重写，扩展配置cra（webpack）。安装依赖npmi-D@craco/craco根目录下创建craco.config.js和配置configure:my-app├──node_modules+├──craco.config.js└──package.jsoncraco.config.jsmodule.exports={de
  • 周末写点东西都是很困难的 焦糖大瓜子
    趁周末，也没有出去玩，回了趟家。看了一下VueCLI，也看了看阮大神写的webpack教程。webpack是一直想详细掌握的工具，需要系统学。学习一门技术，系统学习之后，那些重要和概念、设计的逻辑，也未必完全掌握，掌握的东西，也未必烂熟于心。终归要用于实际项目，反反复复，也就是常说的那个三境界：1.昨夜西风凋碧树，独上高楼，望断天涯路2.衣带渐宽终不悔,为伊消得人憔悴3.众里寻他千百度，蓦然回首，
  • WebAssembly studentliubo
    1、是什么WebAssembly或者wasm是一个可移植、体积小、加载快并且兼容Web的全新格式。其实w9y不是用来一行一行撸的代码，它是一个编译目标。什么是编译目标？当我们编写TypeScript的时候，Webpack最后打包生成的Js文件就是编译目标。2、和JS的关系WebAssembly是被设计成JavaScript的一个完善、补充，而不是一个替代品。WebAssembly将很多编程语言带到
  • 开发者关心的那些事 圣子足道 ios游戏编程apple支付
    我要在app里添加IAP，必须要注册自己的产品标识符（product identifiers）。产品标识符是什么？ 产品标识符（Product Identifiers）是一串字符串，它用来识别你在应用内贩卖的每件商品。App Store用产品标识符来检索产品信息，标识符只能包含大小写字母（A-Z）、数字（0-9）、下划线（-）、以及圆点(.)。你可以任意排列这些元素，但我们建议你创建标识符时使用
  • 负载均衡器技术Nginx和F5的优缺点对比 bijian1013 nginxF5
            对于数据流量过大的网络中，往往单一设备无法承担，需要多台设备进行数据分流，而负载均衡器就是用来将数据分流到多台设备的一个转发器。         目前有许多不同的负载均衡技术用以满足不同的应用需求，如软/硬件负载均衡、本地/全局负载均衡、更高
  • LeetCode[Math] - #9 Palindrome Number Cwind javaAlgorithm题解LeetCodeMath
    原题链接：#9 Palindrome Number   要求： 判断一个整数是否是回文数，不要使用额外的存储空间   难度：简单   分析： 题目限制不允许使用额外的存储空间应指不允许使用O(n)的内存空间，O(1)的内存用于存储中间结果是可以接受的。于是考虑将该整型数反转，然后与原数字进行比较。 注：没有看到有关负数是否可以是回文数的明确结论，例如
  • 画图板的基本实现 15700786134 画图板
     要实现画图板的基本功能，除了在qq登陆界面中用到的组件和方法外，还需要添加鼠标监听器，和接口实现。 首先，需要显示一个JFrame界面： public class DrameFrame extends JFrame {              //显示
  • linux的ps命令 被触发 linux
    Linux中的ps命令是Process Status的缩写。ps命令用来列出系统中当前运行的那些进程。ps命令列出的是当前那些进程的快照，就是执行ps命令的那个时刻的那些进程，如果想要动态的显示进程信息，就可以使用top命令。 要对进程进行监测和控制，首先必须要了解当前进程的情况，也就是需要查看当前进程，而 ps 命令就是最基本同时也是非常强大的进程查看命令。使用该命令可以确定有哪些进程正在运行
  • Android 音乐播放器 下一曲 连续跳几首歌 肆无忌惮_ android
    最近在写安卓音乐播放器的时候遇到个问题。在MediaPlayer播放结束时会回调 player.setOnCompletionListener(new OnCompletionListener() { @Override public void onCompletion(MediaPlayer mp) { mp.reset(); Log.i("H
  • java导出txt文件的例子 知了ing javaservlet
    代码很简单就一个servlet,如下： package com.eastcom.servlet; import java.io.BufferedOutputStream; import java.io.IOException; import java.net.URLEncoder; import java.sql.Connection; import java.sql.Resu
  • Scala stack试玩, 提高第三方依赖下载速度 矮蛋蛋 scalasbt
    原文地址： http://segmentfault.com/a/1190000002894524 sbt下载速度实在是惨不忍睹, 需要做些配置优化 下载typesafe离线包, 保存为ivy本地库 wget http://downloads.typesafe.com/typesafe-activator/1.3.4/typesafe-activator-1.3.4.zip 解压r
  • phantomjs安装(linux，附带环境变量设置) ，以及casperjs安装。 alleni123 linuxspider
    1. 首先从官网 http://phantomjs.org/下载phantomjs压缩包，解压缩到/root/phantomjs文件夹。 2. 安装依赖 sudo yum install fontconfig freetype libfreetype.so.6 libfontconfig.so.1 libstdc++.so.6 3. 配置环境变量 vi /etc/profil
  • JAVA IO FileInputStream和FileOutputStream，字节流的打包输出 百合不是茶 java核心思想JAVA IO操作字节流
    在程序设计语言中，数据的保存是基本，如果某程序语言不能保存数据那么该语言是不可能存在的，JAVA是当今最流行的面向对象设计语言之一，在保存数据中也有自己独特的一面，字节流和字符流 1，字节流是由字节构成的，字符流是由字符构成的 字节流和字符流都是继承的InputStream和OutPutStream ,java中两种最基本的就是字节流和字符流   类 FileInputStream
  • Spring基础实例（依赖注入和控制反转） bijian1013 spring
    前提条件：在http://www.springsource.org/download网站上下载Spring框架，并将spring.jar、log4j-1.2.15.jar、commons-logging.jar加载至工程1.武器接口 package com.bijian.spring.base3; public interface Weapon { void kil
  • HR看重的十大技能 bijian1013 提升能力HR成长
        一个人掌握何种技能取决于他的兴趣、能力和聪明程度，也取决于他所能支配的资源以及制定的事业目标，拥有过硬技能的人有更多的工作机会。但是，由于经济发展前景不确定，掌握对你的事业有所帮助的技能显得尤为重要。以下是最受雇主欢迎的十种技能。 　　一、解决问题的能力 　　每天，我们都要在生活和工作中解决一些综合性的问题。那些能够发现问题、解决问题并迅速作出有效决
  • 【Thrift一】Thrift编译安装 bit1129 thrift
    什么是Thrift The Apache Thrift software framework, for scalable cross-language services development, combines a software stack with a code generation engine to build services that work efficiently and s
  • 【Avro三】Hadoop MapReduce读写Avro文件 bit1129 mapreduce
    Avro是Doug Cutting(此人绝对是神一般的存在）牵头开发的。 开发之初就是围绕着完善Hadoop生态系统的数据处理而开展的（使用Avro作为Hadoop MapReduce需要处理数据序列化和反序列化的场景）,因此Hadoop MapReduce集成Avro也就是自然而然的事情。 这个例子是一个简单的Hadoop MapReduce读取Avro格式的源文件进行计数统计，然后将计算结果
  • nginx定制500，502，503，504页面 ronin47 nginx　错误显示
    server { listen 80; error_page 500/500.html; error_page 502/502.html; error_page 503/503.html; error_page 504/504.html; location /test {return502;}} 配置很简单，和配
  • java-1.二叉查找树转为双向链表 bylijinnan 二叉查找树
    import java.util.ArrayList; import java.util.List; public class BSTreeToLinkedList { /* 把二元查找树转变成排序的双向链表 题目： 输入一棵二元查找树，将该二元查找树转换成一个排序的双向链表。 要求不能创建任何新的结点，只调整指针的指向。 10 / \ 6 14 / \
  • Netty源码学习-HTTP-tunnel bylijinnan javanetty
    Netty关于HTTP tunnel的说明： http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/socket/http/package-summary.html#package_description 这个说明有点太简略了 一个完整的例子在这里： https://github.com/bylijinnan
  • JSONUtil.serialize(map)和JSON.toJSONString(map)的区别 coder_xpf jqueryjsonmapval()
     JSONUtil.serialize(map)和JSON.toJSONString(map)的区别   数据库查询出来的map有一个字段为空   通过System.out.println()输出 JSONUtil.serialize(map)： {"one":"1","two":"nul
  • Hibernate缓存总结 cuishikuan 开源sshjavawebhibernate缓存三大框架
    一、为什么要用Hibernate缓存？ Hibernate是一个持久层框架，经常访问物理数据库。 为了降低应用程序对物理数据源访问的频次，从而提高应用程序的运行性能。 缓存内的数据是对物理数据源中的数据的复制，应用程序在运行时从缓存读写数据，在特定的时刻或事件会同步缓存和物理数据源的数据。   二、Hibernate缓存原理是怎样的？ Hibernate缓存包括两大类：Hib
  • CentOs6 dalan_123 centos
    首先su - 切换到root下面1、首先要先安装GCC GCC-C++ Openssl等以来模块：yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel2、再安装ncurses模块yum -y install ncurses-develyum install ncurses-devel3、下载Erang
  • 10款用 jquery 实现滚动条至页面底端自动加载数据效果 dcj3sjt126com JavaScript
      无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术，它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果，改变了一直以来只能通过点击下一页来翻页这种常规做法。 无限滚动自动翻页技术的鼻祖是微博的先驱：推特(twitter)，后来必应图片搜索、谷歌图片搜索、google reader、箱包批发网等纷纷抄袭了这一项技术，于是靠滚动浏览器滚动条
  • ImageButton去边框&Button或者ImageButton的背景透明 dcj3sjt126com imagebutton
    在ImageButton中载入图片后，很多人会觉得有图片周围的白边会影响到美观，其实解决这个问题有两种方法 一种方法是将ImageButton的背景改为所需要的图片。如：android:background="@drawable/XXX" 第二种方法就是将ImageButton背景改为透明，这个方法更常用 在XML里；    <ImageBut
  • JSP之c:foreach eksliang jspforearch
    原文出自：http://www.cnblogs.com/draem0507/archive/2012/09/24/2699745.html <c:forEach>标签用于通用数据循环，它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的最后一个项目 step 步长 否 1
  • Android实现主动连接蓝牙耳机 gqdy365 android
    在Android程序中可以实现自动扫描蓝牙、配对蓝牙、建立数据通道。蓝牙分不同类型，这篇文字只讨论如何与蓝牙耳机连接。 大致可以分三步： 一、扫描蓝牙设备： 1、注册并监听广播： BluetoothAdapter.ACTION_DISCOVERY_STARTED BluetoothDevice.ACTION_FOUND BluetoothAdapter.ACTION_DIS
  • android学习轨迹之四：org.json.JSONException: No value for hyz301 json
    org.json.JSONException: No value for items  在JSON解析中会遇到一种错误，很常见的错误   06-21 12:19:08.714 2098-2127/com.jikexueyuan.secret I/System.out﹕ Result:{"status":1,"page":1,&
  • 干货分享：从零开始学编程 系列汇总 justjavac 编程
    程序员总爱重新发明轮子，于是做了要给轮子汇总。 从零开始写个编译器吧系列 (知乎专栏) 从零开始写一个简单的操作系统 (伯乐在线) 从零开始写JavaScript框架 (图灵社区) 从零开始写jQuery框架 (蓝色理想 ) 从零开始nodejs系列文章 (粉丝日志) 从零开始编写网络游戏 
  • jquery-autocomplete 使用手册 macroli jqueryAjax脚本
    jquery-autocomplete学习 一、用前必备 官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 当前版本：1.1 需要JQuery版本：1.2.6 二、使用 <script src="./jquery-1.3.2.js" type="text/ja
  • PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改 超声波 oracleplsql
    　　在服务器上将Oracle安装好之后接下来要做的就是通过本地机器来远程连接服务器端的oracle数据库，常用的客户端连接工具就是PLSQL-Developer或者Navicat这些工具了。刚开始也是各种报错，什么TNS:no listener;TNS:lost connection;TNS:target hosts...花了一天的时间终于让PLSQL-Developer和Navicat等这些客户
  • 数据仓库数据模型之：极限存储--历史拉链表 superlxw1234 极限存储数据仓库数据模型拉链历史表
    在数据仓库的数据模型设计过程中，经常会遇到这样的需求： 1. 数据量比较大; 2. 表中的部分字段会被update,如用户的地址，产品的描述信息，订单的状态等等; 3. 需要查看某一个时间点或者时间段的历史快照信息，比如，查看某一个订单在历史某一个时间点的状态，    比如，查看某一个用户在过去某一段时间内，更新过几次等等; 4. 变化的比例和频率不是很大，比如，总共有10
  • 10点睛Spring MVC4.1-全局异常处理 wiselyman spring mvc
    10.1 全局异常处理 使用@ControllerAdvice注解来实现全局异常处理; 使用@ControllerAdvice的属性缩小处理范围 10.2 演示 演示控制器 package com.wisely.web; import org.springframework.stereotype.Controller; import org.spring
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他