一、webpack基本安装 1、创建webpack项目目录如webpackDemo，并进入webpackDemo; 2、 在node已经安装的前提下，打开命令行控制器，输入如下命令： npm init -y npm install webpack webpack-cli --save-dev //安 ...
转载
2020-10-25 13:45:00
321阅读
2评论
在它的entry入口设置多文件入口即可，例：entry: { core: './src/core.js', design: './src/design.js'},单一出口输出：output: { ...
转载
2018-12-26 09:26:00
509阅读
2评论
1 .安装node 去官网上安装node2.创建package.json文件命令npm init3.安装webpack本地安装：npm install webpack webpack-cli --save-dev下面是package.json里面 script的东西"dev": "webpack --mode development","build":...
原创
2021-09-03 14:55:57
146阅读
单页面应用：整个应用里面只有一个html文件。现在主流的框架，vue，react都是单页面应用。 所以webpack绝大部分都是对单页面打包。那么webpack如何对多页面进行打包 index.html <!DOCTYPE html> <html lang="en"> <head> <meta ch
转载
2019-05-23 06:56:00
482阅读
2评论
1 .安装node 去官网上安装node2.创建package.json文件命令npm init3.安装webpack本地安装：npm install webpack webpack-cli --save-dev下面是package.json里面 script的东西"dev": "webpack --mode development","build":...
原创
2022-01-16 10:34:49
166阅读
使用webpack打包ts代码 具体步骤如下： 1.新一个项目文件夹 2.执行npm init -y生成package.json 3.执行npm i -D webpack webpack-cli typescript ts-loader 4.编写webpack文件，新建一个webpack.confi ...
转载
2021-08-23 17:10:00
216阅读
点赞
什么是CDN？ CDN称为内容分发网络(Content Delivery Network) 他是指通过相互连接的网络系统，利用最靠近每个用户的服务器； 更快，更可靠的将音乐，图片，视频，应用程序以及其他文件发送给用户； 来提供高性能，可扩展性以及低成本的网络内容传递给用户 在开发中，使用CDN主要有 ...
转载
2021-07-24 10:40:00
524阅读
2评论
We can separate our custom application code from the common libraries we leverage, such as React and ReactDOM. In this lesson we'll configure webpack
转载
2019-03-18 20:35:00
94阅读
2评论
一. 概述 什么是webpack 模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 为什么使用webpack 现在是网络时代，在我们的生活中网络成为了必不
原创
2022-05-04 09:54:45
584阅读
开发环境： webpack ./src/index.js -o ./build/built.js --mode=development
含义：webpack会以./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
整体打包环境，就是开发环境。
生产环境： webpack ./src/index.js -o ./buil
原创
2021-04-22 09:19:48
401阅读
image.png 一. 概述 什么是webpack 模块打包机：它做的事情是
原创
2022-06-20 22:38:36
149阅读
2018年typescript发展的非常好，js是一门非常灵活的语言，所以一个功能，怎么写都能够写出来，但是这也会导致一个问题，不同人写js的方式不同，那么会导致同一个功能出现的代码风格会迥然不同。这样的话，如果是一个团队在做编程的过程中，每个人都按自己的语法去写代码的话，那么维护性就难以得到保证。
转载
2019-05-16 07:03:00
120阅读
2评论
复习一张图复习一下webpack的机制：webpack4.0与webpack3.0 有很大差别，本博客使用4.0版本。
原创
2022-12-30 17:45:35
238阅读
文章目录方式一：使用html-webpack-externals-plugin 方式二：直接配置externals如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用
原创
2022-01-30 15:13:55
822阅读
react+webpack+cdn如何配置PWA(Service workers)
文章目录方式一：使用html-webpack-externals-plugin 方式二：直接配置externals如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals。这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包，不被打入bundle中，从而减少打包时间，但又不影响运用第三方库的方式，例如import
原创
2021-05-20 19:04:14
2050阅读
原因Webpack5已经废弃了url-loader、file-loader，使用后资源无法正常加载，图片无法正常显示参考文档：https://webpack.docschina.org/migrate/5/#clean-up-configuration解决方案1.在use后添加typerules: [{
test: /\.less$/,
转载
2021-10-31 15:39:00
119阅读
以下内容均以webpack配置中的output.library.type: 'umd'为基础 使用webpack将文件打包为library后，打包好的文件被script标签引用时，library的名字会被放在全局变量中等待使用，至于库名下的内容，则与webpack配置中的output.library.export属性值相关。
转载
2021-10-28 23:15:00
194阅读
...
转载
2021-08-17 11:10:00
129阅读
2评论
目标是实现webpack打包零配置（配置在内部已默认设置，可重写覆盖）创建脚手架cli包括创建项目、本地运行项目、打包线上项目基本功能SPA/MPA 单选Router、Vuex 多选eslint 默认安装自动安装依赖，无需npm i默认别名'@' 指向'./src' 如：import home from "@/pages/home"创建命令新建一个项目如: tes
推荐
原创
2022-12-09 15:17:21
415阅读
