#WebPack

webpack、node、npm之间的关系

webpack能够把.vue后缀名的文件打包成浏览器能够识别的js而这个.vue文件装换需要打包器vue-loader这个vue-loader打包器是可以从npm上面下载(npm上面有很多资源包)npm下载文件之后,webpack打包文件的时需要node环境去运行   ....

vue+webpack静态资源路径引用

  你可能已经注意到,在项目结构中我们有两个静态资产目录:src/assets和static/。他们之间有什么区别?   要回答这个问题,我们首先需要了解Webpack如何处理静态资产。在*.vue组件中,您的所有模板和CSS都会被解析vue-html-loader并c...

webpack遇见的坑:Please install 'webpack-cli' in addition to webpack itself to use the CLI.

webpack-cli没被找到:在webpack4.0之后,需要全局安装webpack-cli,在全局安装webpack之后,cnpmi webpack-cli-g在局部使用webpack时无需再安装了 ...

webpack-dev-server' 不是内部或外部命令,也不是可运行的程序

问题:解决:命令:npminstallwebpack-dev-server--save-dev以上就可以解决了。运行命令:    ....

webpack基础配置

(1)安装webpack  首先创建一个目录,比如demo,然后使用npm初始化配置npminit  接下来填好选项后,完成后会在demo目录下生成一个package.json的文件。输入这个命令后,终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在...
代码星球 ·2020-04-08

前端工程化与webpack

(1)前端工程化 近几年来,前端领域飞速发展,前端的工作早已不再是切几张图,写几个页面那么简单,项目比较大时,很可能会多人协同开发,模块化,组件化,CSS预编译等技术也被广泛的使用。前端自动化(半自动化)工程已经成为现在的主流。前端工程化主要解决一下问题Javascript、CSS代码的合并和压缩CSS预处理...
代码星球 ·2020-04-08

webpack之url-loader

一.用file-loader编译不同后缀的图片1.配置webpeck.config.js文件constpath=require('path');consthtmlWebpackPlugin=require('html-webpack-plugin');module.exports={//node.js语法导出一个对象e...
代码星球 ·2020-04-08

webpack之proxyTable设置跨域

为什么要使用proxyTable很简单,两个字,跨域。在平时项目的开发环境中,经常会遇到跨域的问题,尤其是使用vue-cli这种脚手架工具开发时,由于项目本身启动本地服务是需要占用一个端口的,所以必然会产生跨域的问题。当然跨域有多种解决方式,这里就不一一例举,下次弄篇文章单独讲,在使用webpack做构建工具的项目中使...

webpack的配置文件

1、路径__dirname是一个全局变量,在项目html和js中没有单独定义,直接写就可以得到项目的根目录的路径module.exports={//__dirname是nodejs里的一个全局变量,它指向的是我们项目的根目录entry:__dirname+'/src/script/main.js',//入口文件outp...
代码星球 ·2020-04-06

webpack打包css

1、安装css-loader和style-loader$cnpminstallcss-loaderstyle-loader--save-dev2、引用的时候使用css-loader,让webpack可以打包css文件 require('css-loader!./style.css');3、打包4、引入styl...
代码星球 ·2020-04-06

webpack的使用

$cnpminstall-gwebpack$npminit最后再Ctrl+C跳出$cnpminstallwebpack--save-devfunctionhello(str){alert(str);}$webpackhello.jshello.bundle.js ...
代码星球 ·2020-04-06

实现一个简易版webpack

现实webpack的打包产物大概长这样(只把核心代码留下来):  实现一个简版的webpack依葫芦画瓢,实现思路分2步:1.分析入口文件,把所有的依赖找出来(包括所有后代的依赖)2.拼接出类似上面的立即执行函数找依赖constfs=require('fs');constpath=require('...
代码星球 ·2020-04-06

webpack 优化

一般我们谈的webpack优化,无非就是分为打包时间和打包体积的优化。打包时间  优化打包时间,我们能想到的策略:减少需要读取和解析的文件 和 提高打包性能。  减少需要读取和解析的文件    1.优化loader      以babel-loader为例,如果可以,我们尽量规定includeexc...
代码星球 ·2020-04-06

express起一个代理服务器,webpack-dev-server同时起多个

由于系统业务比较复杂,微前端(多页应用)实现期望用一个app一个webpack的形式,这样可以更好隔离,而且每个app的webpackconfig可以定制。Nginx在前端项目中安装比较麻烦,所以考虑用nodejs来代理,社区比较成熟的node代理显然就是express的http-proxy-middleware了:v...

webpack打包内存溢出的解决方法

由于项目文件越来越多,最终导致在打包时报javaScriptheapoutofmemory错误解决方案:1.增加v8内存使用increase-memory-limit1)安装npmi-gincrease-memory-limit2)在项目目录运行increase-memory-limit它会默认吧v8引擎的内存上限提高...
首页上一页...1415161718...下一页尾页