从零开始学webpack「v5.0」

最新推荐文章于 2024-12-19 10:41:11 发布
原创 最新推荐文章于 2024-12-19 10:41:11 发布 · 1.1k 阅读 · 26 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
收录于
react

当前文章被收录于：

react
2 篇文章 0 人学习

react使用

订阅专栏 查看详情

webpack
webpack是一个现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图(dependency [/dɪˈpendənsi/] graph [/ɡræf/])，此依赖图会映射项目所需的每个模块，并生成一个或多个bundle /ˈbʌndl/ 包！

为啥要学webpack？

之前我们在讲前端性能优化的时候，我们可以从以下几个方面，去提高页面第一次渲染的速度，以及运行时的性能：

 

/* 
第一类：明显改善页面第一次加载的速度，减少白屏等待的时间
    @1 使用骨架屏技术
     + 服务器骨架屏：页面首屏内容是基于服务器渲染的
     + 前端骨架屏：在真实内容渲染出来之前，我们给予相关位置用“色框”占位！
    @2 减少HTTP请求的次数和大小
     + CSS/JS都要做合并压缩「尽可能合并为一个CSS和一个JS」
     + 图片的合并压缩，例如：雪碧图(CSS Sprit)
     + 使用图片BASE64来加快图片的渲染！
     + 图片一定要做延迟加载
     + 使用字体图片和矢量图，来代替位图！！
     + 音视频资源也要设置延迟加载「preload='none'」
     + 数据的异步加载
     + 开启服务器端的GZIP压缩，可以让访问的资源压缩60%+
    @3 渲染页面中的优化
     + 因为<script>会阻碍GUI渲染，所以：把其放在页面末尾，或者设置async/defer！
     + 因为<link>是异步加载CSS资源，所以建议放在页面开始，尽快获取样式资源！！
     + 不要使用import导入CSS，因为其会阻碍GUI的渲染！
     + 样式代码较少的情况下，使用<style>内嵌式，尤其是移动端开发！
    @4 在网络传输中的优化
     + 减少cookie的内容大小「因为只要向服务器发送请求，不论服务器是否需要，总会在请求头中把cookie传递给服务器，如果cookie比较大，会让所有的请求都变慢」
     + 资源分服务器部署「例如：web服务器、图片服务器、数据服务器」，这样可以降低服务器压力，提高服务器的并发，让资源能更加合理的被利用；但是也会导致DNS解析次数增加，此时可以基于DNS Prefetch来优化DNS解析！！
     + 基于HTTP/2.0来代替HTTP/1.1
       + 基于新的二进制格式，让传输的内容更加丰富健壮
       + header压缩，让传输速度更快
       + 服务端推送，可以减少HTTP请求次数
       + 多路复用，让传输速度更快，避免线头阻塞
     + 基于Connection:keep-alive保持TCP通道长链接「HTTP/1.1版本会自动开启」
     + 开启CDN「地域分布式服务器部署」
     + 对于静态资源文件采取“强缓存和协商缓存”，对于不经常更新的数据请求，设置数据缓存！
     + 
第二类：提高页面运行时候的性能
    @1 减少循环嵌套，降低时间复杂度；避免出现死循环/死递归；
    @2 使用事件委托来优化事件绑定，性能可以提高40%+
    @3 减少DOM的回流(重排)和重绘
     + 样式分离读写「渲染队列机制」
     + 批量新增元素「字符串拼接、文档碎片」
     + 基于transform/opacity等方式操作样式
     + 把需要频繁修改样式的元素(例如：JS实现动画)脱离文档流
     + ...
    @4 使用函数的防抖和节流处理高频触发操作
    @5 合理使用闭包，避免内存泄漏，以及手动释放无用的内存！
    @6 减少页面冗余代码，提高代码的重复使用率「也就是尽可能的做封装处理」
    @7 尽可能不要使用for/in循环，因为其消耗性能
    @8 避免使用eval/with等消耗性能的代码
    @9 能用CSS3处理的动画坚决不用JS「JS动画尽可能基于requestAnimationFrame来代替定时器」
    @10 避免使用CSS表达式，因为其非常消耗性能
    @11 CSS选择器的前缀不要过长「因为CSS选择器渲染是从右到左」
    @12 减少table布局「table的渲染是比较消耗性能的」
......
*/

我们平时开发的时候，一般会使用less/sass/stylus等CSS预编译器「需要基于vscode插件把其编译为CSS」；会直接使用ES6的语法「需要基于babel把其转换为ES5，以此兼容IE」；会给CSS3样式加很多的前缀，以此来处理兼容问题……
我们还会基于vscode中的liveserver插件，创建一个本地web服务器，来预览我们的项目…..
我们还要基于各种方案，来解决跨域访问的问题……

以上所有内容，如果都需要开发者手动去处理，那么…..也就没有那么了！！

 

webpack可以帮我们干的事情：

  • 代码转换：TypeScript编译成JavaScript、LESS/SCSS编译成CSS、ES6/7编译为ES5、虚拟DOM编译为真实的DOM等等…

  • 文件优化：压缩JS、CSS、HTML代码，压缩合并图片，图片BASE64等

  • 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码等

  • 模块合并：把模块分类合并成一个文件

  • 自动刷新：创建本地Web服务器，监听本地源代码的变化，自动重新构建，刷新浏览器

  • 代码校验：Eslint代码规范校验和检测、单元测试等

  • 自动发布：自动构建出线上发布代码并传输给发布系统

  • 跨域处理

  • ……

除了webpack外，它们也可以做这些事情：

  • grunt

  • gulp

  • Parcel

  • vite

  • rollup

  • Turbopack

  • ......

1. CommonJS规范 & ES6Module规范

未来的项目一定是 模块化/组件化 开发！！

模块化编程进化历史

  • 单例设计模式

  • AMD「require.js」

  • CommonJS

  • CMD「sea.js」

  • ES6Module

单例设计模式
解决问题：模块间相互冲突的问题「闭包」 ; 模块间相互引用的问题;
不足之处：需要手动分析模块之间的依赖关系，按顺序依次导入相关模块；所有模块都是基于script一个个导入的，这样页面HTTP请求变多！

let xxxModule = (function () {
   let time = new Date();
   const query = function query() {
       // ...
   };
   const handle = function handle() {
       // ...
   };

   // 把供其它板块调用的方法，暴露到全局对象上
   //「局限：暴露的内容比较多，则还会引发全局变量冲突」
   // window.query = query;

   return {
       query,
       handle
   };
})();

 AMD「require.js」 RequireJS
优势：在保证模块之间独立和可以相互访问的基础上，HTML中无需再导入各个模块了「不存在顺序问题」，也不需要自己去分析相互间的依赖关系！
不足：依赖模块的导入是“前置导入”，只有把依赖模块动态导入完毕，才会触发回调函数执行「阻碍代码执行速度」；代码书写的顺序也不是很方便；可能存在重复导入；

//main.js
require.config({
    //全局配置
    baseUrl: 'js/lib',
});

require(['moduleB', 'moduleA'], function (moduleB, moduleA) {
    console.log(moduleB.average(10, 20, 30, 40, 50));
});

//moduleA.js
define(function () {
    return {
        sum(...args) {
            let len = args.length,
                firstItem = args[0];
            if (len === 0) return 0;
            if (len === 1) return firstItem;
            return args.reduce((total, item) => {
                return total + item;
            });
        }
    };
});

//moduleB.js
define(['moduleA'], function (moudleA) {
    return {
        // 求平均数（去掉最大最小值）
        average(...args) {
            let len = args.length,
                firstItem = args[0];
            if (len === 0) return 0;
            if (len === 1) return firstItem;
            args.sort((a, b) => a - b);
            args.pop();
            args.shift();
            return (moudleA.sum(...args) / args.length).toFixed(2);
        }
    };
});

AMD「require.js」 RequireJS
优势：在保证模块之间独立和可以相互访问的基础上，HTML中无需再导入各个模块了「不存在顺序问题」，也不需要自己去分析相互间的依赖关系！
不足：依赖模块的导入是“前置导入”，只有把依赖模块动态导入完毕，才会触发回调函数执行「阻碍代码执行速度」；代码书写的顺序也不是很方便；可能存在重复导入；

//main.js
require.config({
    //全局配置
    baseUrl: 'js/lib',
});

require(['moduleB', 'moduleA'], function (moduleB, moduleA) {
    console.log(moduleB.average(10, 20, 30, 40, 50));
});

//moduleA.js
define(function () {
    return {
        sum(...args) {
            let len = args.length,
                firstItem = args[0];
            if (len === 0) return 0;
            if (len === 1) return firstItem;
            return args.reduce((total, item) => {
                return total + item;
            });
        }
    };
});

//moduleB.js
define(['moduleA'], function (moudleA) {
    return {
        // 求平均数（去掉最大最小值）
        average(...args) {
            let len = args.length,
                firstItem = args[0];
            if (len === 0) return 0;
            if (len === 1) return firstItem;
            args.sort((a, b) => a - b);
            args.pop();
            args.shift();
            return (moudleA.sum(...args) / args.length).toFixed(2);
        }
    };
});

CommonJS模块化规范
唯一的问题：浏览器端不支持CommonJS规范
淘宝“玉伯”仿照CommonJS规范，研发了一款插件 sea.js ，旨在把CommonJS规范搬到浏览器端运行「这种模块思想被称之为CMD」

/* ---A.js--- */
const sum = function sum(...params) {
    return params.reduce((result, item) => {
        return result + item;
    });
};
// 暴露一些API
module.exports = {
    sum
};

/* ---B.js--- */
let name = '哈哈';
let A = require('./A');
const average = function average(...params) {
    return (A.sum(...params) / params.length).toFixed(2);
};
module.exports = {
    average
};

/* ---main.js--- */
let A = require('./A');
console.log(A.sum(10, 20, 30, 40));
let B = require('./B');
console.log(B.average(10, 20, 30, 40));

ES6Module模块规范
ES6 入门教程
可以直接运行在浏览器端；不支持IE；

/* 
模块的导入导出:
  整体来讲，每个模块导出的是一个Module对象，我们可以基于 export/export default 为对象中加入导出的内容
    @1 export default xxx;
      + xxx可以是任意类型值
      + 给Module对象新增一个 “default” 属性，属性值就是导出的值
      + 在一个模块中，export default只允许出现一次
    @2 export 创建值的表达式（声明变量 = 值）;
      let num = 10;
      export num; //这样写是错误的
      export let num = 10; //这样写是正确的
      ---
      let num = 10;
      export {
        num, //这样写是可以的
        x:100 //这样写是错误的
      };
      ---
      + export可以出现多次，导出多个内容
      + 声明的变量叫啥名字，最后给Module对象加入的是同名的属性名，属性值就是变量的值

  我们会基于 import 方法导入模块「导入模块导出的内容」
    @1 import N from '模块地址(在浏览器端不能忽略.js后缀名)';
     + N获取的不是整个导出的Module对象，仅仅获取的是Module中default这一项的值
     + 不能在import期间，直接对N解构赋值，因为涉及解构赋值就会变为另外一种情况
    @2 import {x,y} from '模块地址';
     + 直接对导出的Module对象中(排除default属性)，导出的内容进行解构赋值
    @3 import * as M from '模块地址';
     + 先导入所有导出的内容，赋值给M变量
*/
2.webpack的基础操作

安装

// 为防止全局安装webpack导致版本冲突，真实项目中以本地安装为主 
$ npm init -y
$ npm install webpack webpack-cli --save-dev
OR
$ yarn add webpack webpack-cli -D

零配置使用

/*
 * 默认会打包SRC目录中的JS文件（入口默认index.js）
 * 打包完成的目录默认是DIST/MAIN.JS
 * webpack默认支持CommonJS和ES6 Module的模块规范，依此进行依赖打包
 */
$ npx webpack

自定义基础配置

webpack.config.js

// Node内置的路径处理模块
const path = require('path');

// 导出自定义配置项
module.exports = {
    // 环境模式「生产环境：production   开发环境：development」
    mode: 'production',
    // 打包入口「相对路径」
    entry: './src/index.js',
    // 打包出口
    output: {
        // 生成的文件名. [hash]创建随机哈希值
        filename: 'bundle.[hash].js',
        // 打包地址「绝对路径」
        path: path.resolve(__dirname, 'dist')
    }
};

 html-webpack-plugin

HtmlWebpackPlugin | webpack 中文文档 | webpack中文文档 | webpack中文网
$ yarn add html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    ...
    plugins: [
        new HtmlWebpackPlugin({
            // 指定视图模板
            template: './public/index.html',
            // 编译后视图的名字
            filename: 'index.html',
            // 是否压缩
            minify: true
        })
    ]
}

 多入口 & 多出口

const HtmlWebpackPlugin = require('html-webpack-plugin');
// HtmlWebpackPlugin需要配置多套
const htmlPlugins = ['index', 'login'].map(chunk => {
    return new HtmlWebpackPlugin({
        template: `./public/${chunk}.html`,
        filename: `${chunk}.html`,
        // 指定导入的JS
        chunks: [chunk],
        minify: true
    });
});
module.exports = {
    mode: 'production',
    // 配置多入口
    entry: {
        index: "./src/index.js",
        login: "./src/login.js",
    },
    // 出口采用相同的规则
    output: {
        filename: "[name].[hash].js",
        path: path.resolve(__dirname, "dist")
    },
    plugins: [
        ...htmlPlugins
    ]
};

clean-webpack-plugin

$ yarn add clean-webpack-plugin -D

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    ...
    plugins: [
        new CleanWebpackPlugin()
    ]
};

 webpack-dev-server

DevServer | webpack
$ yarn add webpack-dev-server -D

/* paclage.json */
"scripts": {
   "start": "webpack server",
   "build": "webpack"
}

/* webpack.config.js */
module.exports = {
    ... 
    devServer: {
        // 域名
        host: '127.0.0.1',
        // 断口号
        port: 3000,
        // GZIP压缩
        compress: true,
        // 自动打开浏览器
        open: true,
        // 热更新
        hot: true,
        // 跨域代理
        proxy: {
            "/jian": {
                target: "https://www.jianshu.com/asimov",
                changeOrigin: true,
                ws: true,
                pathRewrite: { "^/jian": "" }
            },
            "/zhi": {
                target: "https://news-at.zhihu.com/api/4",
                changeOrigin: true,
                ws: true,
                pathRewrite: { "^/zhi": "" }
            }
        }
    }
};
/* 
测试接口 
  简书：
  https://www.jianshu.com/asimov/subscriptions/recommended_collections
  知乎：
  https://news-at.zhihu.com/api/4/news/latest
*/

 处理样式的loader「加载器」

$ yarn add css-loader style-loader less less-loader autoprefixer postcss-loader -D

module.exports = {
    ...
    /* 配置模块加载器LOADER，执行顺序：从右向左、从下向上 */
    module: {
        rules: [{
            test: /\.(css|less)$/, // 基于正则匹配哪些模块需要处理
            use: [
                "style-loader", // 把CSS插入到HEAD中
                "css-loader", // 编译解析@import/URL()这种语法
                "postcss-loader", // 设置前缀
                "less-loader" // 把LESS编译为CSS
            ]
        }]
    }
};

 postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
};

// 或者在配置项中直接处理
{
    loader: "postcss-loader",
    options: {
        postcssOptions: {
            plugins: [
                require('autoprefixer')
            ]
        }
    }
},

package.json OR .browserslistrc

// https://github.com/browserslist/browserslist
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not dead"
]

mini-css-extract-plugin 抽离CSS样式 /ˈekstrækt/

https://www.npmjs.com/package/mini-css-extract-plugin
$ yarn add mini-css-extract-plugin -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    ...
    plugins: [
        ...
        new MiniCssExtractPlugin({
            // 设置编译后的文件名字
            filename: 'main.[hash].css'
        })
    ],
    ...
    module: {
        rules: [{
            test: /\.(css|less)$/,
            use: [
                // 使用插件中的LOADER代替STYLE方式
                MiniCssExtractPlugin.loader,
                ...
            ]
        }]
    }
};

 基于babel实现ES6的转换

$ yarn add babel babel-loader @babel/preset-env @babel/core -D

$ yarn add @babel/polyfill

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.js$/,
            use: ['babel-loader'],
            // 设置编译时忽略的文件和指定编译目录
            include: path.resolve(__dirname, 'src'),
            exclude: /node_modules/
        }]
    }
};

 babel.config.js

module.exports = {
    presets: [
        "@babel/preset-env"
    ]
};

index.js

import '@babel/polyfill';

设置优化项：压缩CSS/JS

$ yarn add css-minimizer-webpack-plugin terser-webpack-plugin -D 

const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
    optimization: {
        // 设置压缩方式
        minimizer: [
            new CssMinimizerWebpackPlugin(),
            new TerserPlugin()
        ]
    }
};

设置解析器：配置别名

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    }
};

图片的处理

$ yarn add file-loader url-loader -D

module.exports = {
    ...
    module: {
        rules: [
        ...
        {
            test: /\.(png|jpe?g|gif)$/i,
            type: 'javascript/auto',
            use: [{
                // 把指定大小内的图片BASE64
                loader: 'url-loader',
                options: {
                    limit: 200 * 1024,
                    esModule: false,
                    name: 'images/[name].[hash].[ext]'
                }
            }]
        }]
    },
    // 设置打包的最大资源大小
    performance: {
        maxAssetSize: 100 * 1024 * 1024 * 1024,
        maxEntrypointSize: 100 * 1024 * 1024 * 1024
    }
};

 

标签
#webpack #前端 #node.js
webpack4+加vue2+从零开始搭设vue项目
王一诺Eno
06-12 2552
webpack4+加vue2+从零开始搭设vue项目起步1.初始化项目2.安装依赖3.目录文件配置4.配置index.html及webpack.config.js5.vue的起步解决方案 一解决方案 二(常规操作)解决方案 三引入css和scss 本地环境 node -v // v9.1.0 npm -v // 6.5.0 webpack -v // 4.32.2 webpack-c...
点云图的学习
ff_xun的博客
12-28 1万+
一。点云地图拼接 1.1 配置运行环境 首先配置安装opencv3,安装完成后如下图： 然后配置点云图工具pcl,直接使用apt即可安装，安装后如下图： 最后使用点云工具观察点云图： 1.2 原理解析 总的来说由多角度拍摄图片拼接为点云3D图，是通过相机的内参，将像素坐标转化为相机坐标，再通过外参将相机坐标转化为世界坐标系，然后将每张图片的像素绘制填充于同一个世界坐标系下面，形成点云3D图。...
webpack5.0基础配置（全面）
weixin_40756663的博客
03-01 4760
前言 朋友们好我是跑不快的猪，新的一年，新的开始，先预祝各位都有华丽丽的变身。 本篇文章主要进行webpack5.0+版本的配置，在这个脚手架横行的时代，最终还是需要掌握一些基础的配置，对工作、面试、以及各脚手架中webpack的调试都有不小的作用。接下来会一步步的分享我学习配置中的一些坑和心得，需要代码的朋友请直接滑到页面底部。 概念预热 在学习webpack的过程中，有如下几个概念贯穿始终，在开始之前先列出来。掌握了它们虽然不至于事半功倍，但是对一些配置的理解可能会更简单一点。 module（模块）
信息隐藏 数字图像空域隐写与分析技术的实现
最新发布
Yungoal的博客
12-19 435
【代码】信息隐藏 数字图像空域隐写与分析技术的实现。
WebPack5.0 快速入门
Java.慈祥
07-15 2365
Webpack是一个强大的静态模块打包工具🧰主要用于现代JavaScript应用程序，它从一个或多个入口点开始，构建一个依赖图，然后将项目中所需的每个模块打包成一个或多个bundle，这些bundle是静态资源，用于展示你的内容；指的是编写代码过程中，htmlcssjs图片、文件🖺等固定内容的资源；把静态模块内容，压缩，整合，转译等…🧊前端工程化；WebPack支持多种模块标准语法把less/sass转成css代码把ES6+降级成ES5Webpack是一个强大的静态模块打包工具🧰主要用于现代。
值得你学习的构建工具-Webpack5.0简化版--五大核心概念
qq_56352725的博客
10-19 302
webpack 简化了解
使用webpack5，手动搭建vue开发环境
qq_44900902的博客
06-14 1222
在vue3.x 项目中需要设置两个变量，以更好地进行 tree-shaking修改以上操作是webpack5搭建vue项目环境全过程了，在实际操作的过程中再次熟悉webpack的配置。Webpack 5.0 从零开始搭建 Vue 开发环境手写webpack创建vue3项目的流程。
webpack-dev-server5.0+ 版本问题
gaodda的博客
03-12 962
在使用webpack-dev-server搭建新项目时，需要依赖node 和webpack以及webpack-cli。这是需要注意各个应用之间的版本问题。
从零开始学webpack（v4.0）
m0_46403734的博客
05-24 275
1.什么是webpack？ webpack是一个现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图(dependency graph），此依赖图会映射项目所需的每个模块，并生成一个或多个bundle包！webpack本身是基于node.js开发的！ 官网：https://webpack.docschina.org/ 2.为啥要使用webpack？ 代码转换：TypeScript编译成JavaScript、LESS/SCSS编译成CSS、E
Webpack安装及简易webpack项目配置（4.0以上版本）
qq_35776434的博客
12-06 1447
一开始照着书上的敲，怎么也run不起来，说缺少webpack-cli。就从网上找“补救方法”，然，在我这里都不管用，索性还是看中文官方文档，瞬间run起来了，舒服。毕竟第一次跑通，记录一下过程。 1.安装最新版node.js和NPM node.js：https://nodejs.org/en/ npm：https://www.runoob.com/nodejs/nodejs-install-...
手把手教你搭建 Webpack 5 + React 项目
小柒的前端之旅
05-03 3950
在平时工作中，为减少开发成本，一般都会使用脚手架来进行开发，比如。脚手架都会帮我们配置好了 webpack，但如果想自己搭建 webpack 项目要怎么做呢？
webpack5 + webpack-chain 构建一个大型应用系列 2（附 vscode 跟 prettier 配置）
qq_36696468的博客
12-17 1874
上一篇：一步步从零开始用 webpack 搭建一个大型项目笔者使用了 webpack5 将项目进行了重构，并全程使用的 webpack-chain 来配置 webpack，每个功能也都是...
从零开始搭建webpack4.X + Vue开发环境
qq_39075021的博客
03-22 1089
为了学习和理解webpack解决了前端的哪些痛点，还是有必要从零开始自己搭建一个简单的开发环境， 此教程适合刚接触webpack的新手学习。 1. 安装node依赖环境 2. 初始化项目 3. 安装webpack 4. 创建webpack.config.js 5. 配置webpack.config.js 1. 安装node依赖环境 首先webpack基于node环境运行，所以事先请自行安装no...
webpack 打包ts项目_从零搭建基于 Webpack5.x 的 Vue 项目
weixin_42502419的博客
12-30 1806
概述webpack5.x 发布至今已经将近两个月了, v5 版本内置了一些常用的插件, 较 v4 版本有很大的变化. 本项目基于 webpack5.x 以及 vue2.x, 从零搭建一个基础模板:项目地址: https://github.com/ddzy/vue2-webpack5-template也可以通过脚手架工具, 快捷安装:脚手架地址: https://github.com/ddzy/vu...
web3.0 升级到webpack5.0 以及兼容IE处理
zhxh0376的专栏
07-06 3355
如果你的事vue-cli 或者其他cli 关于IE 兼容不具有什么参考价值。如果是react 项目，你看看就行。webpack3的打包速度已成为诟病，所以我们将原来的webpack3升级至webpack5首先就是原来的项目结构，主要在于build目录下面，存在基础配置，开发配置，生产配置build。
npm install报错：webpack@“^5 .0 .@“fromnode-loader2.0.0冲突
weixin_39845185的博客
04-23 352
执行命令：npm i --legacy-peer-deps。
一文搞定webpak5.0 基础环境搭建（一）
weixin_44022064的博客
11-09 249
webpak5.0 基础环境搭建 1、搭建webpack 基础编译环境的第一步首先要安装webpack 和webpack-cli 脚手架 npm install webpack webpack-cli --save-dev 2、脚手架安装完成后，我们要初始化一个webpack 项目 首先要建一个文件夹，这个文件夹不能命名为webpack npm init -y 3、我们需要在文件夹中创建几个文件i...
Webpack 5 正式发布
热门推荐
xiangzhihong8的专栏
10-13 1万+
Webpack简介 随着前端发展如日冲天，前端项目也越来越复杂，得益于Nodejs的发展，前端模块化、组件化、工程化也大势所趋。伴随着前端的模块化和工程化，Grunt、Gulp到Webpack等项目构建和打包工具也随之出现。 前端工程化的早期，主要是解决重复任务的问题。Grunt、Gulp就是其中代表，他们的主要功能是完成文件压缩、编译less、sass、地址添加hash、替换等。不过，随着前端工程化的发展，Webpack出现了，与其说是一个工程构建工具，Webpack更像是一套前端工程化解决方案。 根据官
webpack5.0最新安装
qq_61541602的博客
05-03 2451
1.首先应该先安装node.js 网址：https://nodejs.org/zh-cn/ 最好选择如图所圈出来的长期维护版，它比较稳定。 在你安装好了后，可通过命令提示符来检测。 打开命令提示符之后，输入：node -v 出现如图所示的版本号（可能版本号不一样），就是安装成功了： 接下来就是配置环境 在node.js所在的文件夹中创建两个文件夹分别为： node_global node_cache 然后在命令提示符中分别输入： npm config set pr.
m ERR! peer webpack@“^5.0.0“ from sass-loader@13.3.3
weixin_46171048的博客
12-29 2006
npm ERR! Could not resolve dependency: npm ERR! peer webpack@"^5.0.0" from sass-loader@13.3.3 npm ERR! node_modules/sass-loader npm ERR! dev sass-loader@"^13.3.3" from the root project
中国人民大学中关村校区我的世界地图存档Obj模型文件_基于MinecraftJava版1193平台由学生独立开发历时一年完成的中关村校园完整复原项目包含详细建筑模型与.zip
中国人民大学中关村校区我的世界地图存档Obj模型文件_基于MinecraftJava版1193平台由学生独立开发历时一年完成的中关村校园完整复原项目包含详细建筑模型与.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Brilliant Nemo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值