提供了编程的基础技术教程

zl程序教程

webpack高级配置

  • webpack高级配置

    webpack高级配置

    摇树（tree shaking）我主要是想说摇树失败的原因（tree shaking 失败的原因），先讲下摇树本身效果什么是摇树？举个例子首先 webpack.config.js配置const webpack = require("webpack"); /** * @type {webpack.Configuration} */ module.exports = {

    日期 2023-06-12 10:48:40     
  • webpack高级配置_2023-03-01

    webpack高级配置_2023-03-01

    摇树（tree shaking）我主要是想说摇树失败的原因（tree shaking 失败的原因），先讲下摇树本身效果什么是摇树？举个例子首先 webpack.config.js配置const webpack = require("webpack"); /** * @type {webpack.Configuration} */ module.exports = {

    日期 2023-06-12 10:48:40     
  • Webpack高级配置实战

    Webpack高级配置实战

    前言本篇将从实践出发，搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。一、基础配置接下来一起配置一个基础的 Webpack。将支持以下功能：分离开发环境、生产环境配置；模块化开发；sourceMap 定位警告和错误；动态生成引入 bundle.js 的 HTML5 文件；实时编译；封装编译、打包命令。1. 新建

    日期 2023-06-12 10:48:40     
  • webpack高级概念，Dllplugin打包性能配置（系列十八)

    webpack高级概念，Dllplugin打包性能配置（系列十八)

      为什么要使用Dll 通常来说，我们的代码都可以至少简单区分成业务代码和第三方库。如果不做处理，每次构建时都需要把所有的代码重新构建一次，耗费大量的时间。然后大部分情况下，很多第三方库的代码并不会发生变更（除非是版本升级），这时就可以用到dll：把复用性较高的第三方模块打包到动态链接库中，在不升级这些库的情况下，动态库不需要重新打包，每次构建只重新打包业务代码。   使用d

    日期 2023-06-12 10:48:40     
  • webpack高级概念，resolve配置(配置文件格式以及文件路径变量)（系列十七)

    webpack高级概念，resolve配置(配置文件格式以及文件路径变量)（系列十七)

    weppack.config.js配置，该文件在根目录下的build文件夹里头 module.exports = { entry: { main: './src/index.js', }, resolve: { extensions: ['.js', '.jsx'，'.vue','.ts'], alias: {

    日期 2023-06-12 10:48:40     
  • webpack高级概念，eslint配置（系列十六)

    webpack高级概念，eslint配置（系列十六)

    ESLint（https://eslint.bootcss.com/） 能对 JS 基本语法错误/隐患进行提前检查，使用步骤 安装loader npm install eslint-loader eslint --save-dev eslint 是语法检查的包 eslint-loader 是 eslint 在 webpack 中的 loader 包 webpack.config.j

    日期 2023-06-12 10:48:40     
  • webpack高级概念，typeScript的打包配置（系列十三)

    webpack高级概念，typeScript的打包配置（系列十三)

    使用webpack打包ts文件，就需要安装 ts-loader 安装： npm i ts-loader typescript -D webpack.config.js 文件中添加解析 typescript 代码的 loader const HtmlWebpackPlugin = require('html-webpack-plugin

    日期 2023-06-12 10:48:40     
  • webpack高级概念，PWA的打包配置(系列十二)

    webpack高级概念，PWA的打包配置(系列十二)

    http-server 安装 workbox-webpack-plugin 安装 相信很多朋友都有耳闻过 PWA 这门技术, PWA 是 Progressive Web App 的英文缩写， 翻译过来就是渐进式增强WEB应用， 是Google 在2016年提出的概念，2017年落地的web技术。目的就是在移动端利用提供的标准化框架，在网

    日期 2023-06-12 10:48:40     
  • webpack高级概念Develoment 和 Production 不同环境的配置 (系列四)

    webpack高级概念Develoment 和 Production 不同环境的配置 (系列四)

      因为在不同的环境下，webpack的配置稍微有点区别，如果我们需要在不同的换将下切换，就得重复修改webpack.config.js配置，这是很麻烦而且还容易改错，所以我们需要把配置文件进行拆分。 在项目根目录下新建build文件夹，然后在build文件夹中新建 webpack.dev.js 、 webpack.prod.js 和 

    日期 2023-06-12 10:48:40