webpack
马优晨
生活中的打击和挫折远比想象的更多,有时灾难又会让你的一切努力白费,也许明天我们就会死去,但如果我们还活着,在面对着种种不公和无奈过后,“明天的明天的明天,你是否会依然爱着这个世界。” 我想我会.......................
展开
-
vue.config.js多页配置
vue.config.js多页配置,具体看代码:"use strict";const path = require("path");var webpack = require("webpack");function resolve(dir) { return path.join(__dirname, dir);}const port = process.env.port || process.env.npm_config_port || 8080; // dev portmodule.原创 2020-06-12 16:25:05 · 7009 阅读 · 3 评论 -
vue使用@路径引入
vue使用@路径引入,这个在项目中很常见;项目中使用引入文件有时候路径比较深,需要使用"../../../xx.js"这种类似的路劲引入,这种方式比较笨,可以使用webpack的别名alias配置来解决。首先,先确定项目中是否有path模块:如果没有path模块需要先安装pathnpm install path --save(1)vue-cli1,vue-cli2搭建的项目以下为vue.config.js配置const path = require("path");function原创 2020-06-04 20:28:34 · 28646 阅读 · 2 评论 -
webpack常用的三种JS压缩插件
这里 讲解 三种JS 打包插件:(1)UglifyJS支持: babel present2015、webpack3缺点:它使用的是单线程压缩代码,也就是说多个js文件需要被压缩,它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树,再去应用各种规则分析和处理AST,导致这个过程耗时非常大)。优点: 老项...原创 2019-12-16 10:40:20 · 13814 阅读 · 2 评论 -
缩短编译和打包时间
一、升级webpack到4.0二、前端工程化参考上篇文章: 地址三、路由异步加载参考上篇文章: 地址四、优化babel对于Loader来说,影响打包效率首当齐冲必属Babel了。因为babel会将代码转为字符串生成AST,然后对AST继续进行转变最后生成新的代码,项目越大,转化代码越多,效率就越低。当然了,我们是有办法优化的。module.exports={ module:[ ...原创 2019-12-04 10:14:36 · 784 阅读 · 0 评论 -
使用ExtractTextPlugin将css和js分开打包
第一步: 首先你要有对应的样式环境首先需要安装npm install stylus-loader css-loader style-loader --save-dev接下来(1)使用lessnpm install less less-loader --save-dev(2)使用scssnpm install sass sass-loader --save-dev(3)安装Ex...原创 2019-09-06 16:27:33 · 879 阅读 · 0 评论 -
控制台一直报错, [WDS] Disconnected!
控制台一直报错, [WDS] Disconnected! ,别担心,这里我告诉你解决方案:(1)方案:在你的webpack配置文件里面找到devServer,然后配置这个(2)参考地址: https://github.com/webpack/webpack-dev-server/issues/851(3)原因: win10默认设置的ipv6的优先级高于ipv4,所以把localho...原创 2019-05-22 10:05:05 · 30497 阅读 · 6 评论 -
webpack基础webpack-dev-server配置
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server 一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息。(也可以不生成package.json文件,但是package.json是很有用的,所有建议生成) 2.安装webpaack ...转载 2019-04-14 18:53:31 · 5203 阅读 · 0 评论 -
webpack 打包
webpack 中每个模块有一个唯一的 id,是从 0 开始递增的。整个打包后的 bundle.js 是一个匿名函数自执行。参数则为一个数组。数组的每一项都为个 function。function 的内容则为每个模块的内容,并按照 require 的顺序排列。识别入口文件,识别模块依赖,来打包代码。webpack做的就是分析代码,转换代码,编译代码,输出代码Webpack的两个最核心的...原创 2018-12-27 11:17:41 · 1274 阅读 · 0 评论 -
使用webpack或者gulp去除多余CSS
上一篇我有讲过,项目里面冗余的css一般分为两种情况:有过多重复的CSS代码;有写CSS代码没有任何作用;接下来针对,第二种情况我们看一下使用webpack 和 使用 gulp 的两种情况下的处理方案。webpack的完整处理方案:less/sass文件打包和分离自动处理css前缀消除未使用的css完整的webpack.config.js文件一、less...原创 2018-08-02 11:27:29 · 4109 阅读 · 0 评论 -
webpack的简单使用
一、安装webpack全局安装:npm install wabpack –g /*(webpack –h 查看安装是否完成)*/本地的开发环境安装:npm install --save-dev webpack /*(可能会使用到webpack自带的一些工具。所以全局和本地都安装一下!)*/根目录下新建一个webpack.config.js的文件,用来...原创 2018-07-16 09:46:28 · 364 阅读 · 0 评论