Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许 多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还 可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加 载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、 Coffeescript、 LESS 等。###核
一、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评论
在webpack.config.js添加如下配置。const path = require('path')module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'd...
原创
2022-11-23 00:08:55
587阅读
一、babel支持 Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-pres
转载
2018-03-26 21:07:00
267阅读
2评论
思路：注册webpack插件 打包后执行 指定的函数webpack插件组成：一个具名 JavaScript 函数；在它的原型上定义 apply 方法；指定一个触及到 Webpack 本身的事件钩子；操作 Webpack 内部的实例特定数据；在实现功能后调用 Webpack 提供的 callback。插件由一个构造函数实例化出来。构造函数定义 apply 方法，在安装插件时，apply 方法会被 W
原创
2023-07-19 11:41:17
1071阅读
vue cil4 nginx 打包优化项目介绍最近项目结束，项目是vue的，vue版本是2.6.10，cil版本是4，webpack4,要部署在服务器上,用的是nginx，但是出现了一个严重的问题，首页加载需要40多秒！需要优化1 关闭productionSourceMapmodule.exports = {
productionSourceMap: false
}2 开启gzip因为本项
vue项目webpack打包后修改配置文件
从webpack打包结构中我们知道，vue中有一个存放外部资源的文件夹static，它里面的文件是不会被打包编译的，所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js文件的方式引入，然后就可以全局使用。具体的方法如下：1.在项目中找到static文件夹，在里面创建一个配置文件，起名为config
转载
2021-05-10 22:36:24
2957阅读
2评论
2018年typescript发展的非常好，js是一门非常灵活的语言，所以一个功能，怎么写都能够写出来，但是这也会导致一个问题，不同人写js的方式不同，那么会导致同一个功能出现的代码风格会迥然不同。这样的话，如果是一个团队在做编程的过程中，每个人都按自己的语法去写代码的话，那么维护性就难以得到保证。
转载
2019-05-16 07:03:00
120阅读
2评论
在我们公司，和后台接接口时，公共的请求路径我们是单独抽出来的，放在一个独立的public.js中，在public.js中存入那个公共变量公共变量是这样在其他地方使用ajax时，我们就这样使用这种用法在平时的项目中是没有问题的。但是因为公司最近的项目都是用react来用，然后用webpack来打包。webpack打包后，public这个js也被打包进了每个组件中去。如果需要修改的话，要么就在reac
原创
2017-04-19 18:03:59
1558阅读
最近在接手一个项目中发现每次打包的时候都要去修改接口请求地址，如果是发测试我们打包的时候就要把axios.defaults.baseURL赋值为测试地址，手动改太不方便了，不如配置打包命令，改变手动频繁操作首先我们先看下vue-cli官网对于环境变量的解释和说明：vue-cli官网接下来开始我的配置流程：第一步：我们在项目根目录创建四个文件，如下图所示：简单说明一下为什么要创建者四个文件：首先我们
单页面应用：整个应用里面只有一个html文件。现在主流的框架，vue，react都是单页面应用。 所以webpack绝大部分都是对单页面打包。那么webpack如何对多页面进行打包 index.html <!DOCTYPE html> <html lang="en"> <head> <meta ch
转载
2019-05-23 06:56:00
482阅读
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阅读
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阅读
点赞
最近 @大高个 在折腾nginx，一时性起我就在深夜里写下了这篇博文，以记下了我曾经折腾nginx的那些不悔青春，这里以centos为例：目录约定首先约定下一些常用的目录，如：# 根目录挂载
/home/
# 安装包目录，存放一些常用的安装包
./src/
./nginx-1.11.1.tar
./node-6.2.2.tar
./zlib-1.2.8.tar.gz
...
# 程序目录，存放一些
转载
2024-08-16 18:05:00
236阅读
这个漏洞严格上说并不是 Nginx 和 PHP 本身的漏洞造成的，而是由配置造成的。在我之前写的许多配置中，都普遍存在这个漏洞。简易检测方法：打开 Nginx + PHP 服务器上的任意一张图片，如：http://hily.me/test.png如果在图片链接后加一串 /xxx.php （xxx为任意字符）后，如：http://hily.me/test.png/xxx.php图片还能访问的话，说明
复习一张图复习一下webpack的机制：webpack4.0与webpack3.0 有很大差别，本博客使用4.0版本。
原创
2022-12-30 17:45:35
238阅读
webpack概念：现代javaScript应用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包城一个或多个bundle。 1.入口：入口起点指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。单 ...
转载
2021-09-09 00:15:00
378阅读
2评论
...
转载
2021-08-17 11:10:00
129阅读
2评论
