WEBPACK - 技术教程文章

webpack【代码】

什么是webpackwebpack是一个模块打包器,包(bundle)就是一个js文件,它把一堆资源合并在一起,以便在同一个文件请求中发回给客户端,webpack还能处理一些浏览器不能直接运行的拓展语言,如Scss,typeScript等。webpack是基于配置型的构建工具,它把整个项目作为一个整体,通过一个给定的主文件(如index.js),从这个主文件开始找到项目所有的依赖文件,使用loaders处理它们,最终打包为一个或多个浏览器可识别的js文件。 webpack和...

gulp webpack 区别

一、gulp是工具链、构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作1.构建工具2.自动化3.提高效率用二、webpack是文件打包工具,可以把项目的各种js文、css文件等打包合并成一个或多个文件,主要用于模块化方案,预编译模块的方案 1.打包工具2.模块化识别3.编译模块代码方案用原文:https://www.cnblogs.com/vhen/p/8663100.html

webpack创建页面的过程【代码】

1、项目文件夹中创建各类型文件放置的文件夹,如:iTestingWeb文件夹下创建src dist文件夹,用途:src为源码 dist为生成后的文件放置位置,然后在源码文件夹中进一步按文件类型增加文件夹:css、js、images等文件夹2、在src文件夹中创建一个入口index.html文件,vscode编译器使用快捷键:!+Tab方式快速创建html页面,并快捷创建一个测试代码:ul>li*10{这是第$个li},实现10行测试数据快速生成3、继续在src中创建js的入口文件:main....

webpack的loader【代码】【图】

1.webpack默认只处理js文件中的内容,处理不了其他后缀的文件 //使用ES6导入 import $ from ‘jquery‘ // 在webpack中一切皆模块 import ‘./css/index.css‘2.此时js中含有了css的文件,微博pack处理不了,他回去查找webpack.config.js这个配置文件,查看module.rules这个数组中有没有此后缀名相对应的loader加载器。 // 配置模块module: {rules: [{test: /\.css$/,use: [‘style-loader‘, ‘css-loader‘]}]} 3.看到了有,web...

webpack4:基本使用【代码】【图】

webpack是基于Node构建,所以wepack支持所有Node API和语法。即:Chrome浏览器能支持的ECMAScript语法(排除DOM、BOM),wbpack都能支持。Chrome不支持ES6,所以webpack也不支持。创建基本的webpack4.x项目:创建后的目录:其中:package.json:{"name": "wp4-1","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","lice...

webpack官网demo起步中遇到的问题【图】

在webpack官网demo一开始搭建中 原文:http://www.cnblogs.com/ryans/p/7367431.html

构建 webpack 和 vue 的环境

前端真是日新月异了,前不久的教程就很多不一样了。搭环境搭了几小时,终于搭好了。首先奉上别人的老版教程,可以先按这个来:点击查看老版可以先跟这个来,按照教程开始打包后会报错。现在好好说说其中跟现在不一样的坑。 报错一:现在webpack已不支持自定义属性了,故 webpack.config.js 中的 Favlist 的键值对要删掉。报错二:config.resolve.extensions[0] 不能为空,故要删去相对应的数组中第一项的空字符串,只留 ‘.js‘ 和...

用gulp+webpack构建多页应用——记一次Node多页应用的构建过程【代码】【图】

通过参考网上的一些构建方法,当然也在开发过程中进行了一番实践,最终搭建了一套适用于当前多页应用的构建方案,当然该方案还处于draft版本,会在后续的演进过程中不断的优化。个人觉得该方案的演进过程相对于成果而言更值得记录。但在此之前,我们先简单介绍下项目的整体架构,这样大家会更明白为什么要采用这样的构建方式。下图列出了用户在浏览器中输入url到页面ready的过程,可以看出这是一个典型的服务端直出架构,其中作为前...

webpack【代码】【图】

目录结构 一:如何安装和配置我的项目目录结构是:文件名叫webpack,里面只有一个main.html,代码如下:<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="src/react.min.js"></script></head><body><div id="content"></div><script src="build/build.js"></script></body></html>还有一个文件夹src,该文件夹存放了二个js文件;react.min.js源文件和main.js文件,main.js源码如...

Uncaught (in promise) TypeError: Cannot read property 'error' of undefined at __webpack_exports__.a【图】

是因为在 axios 请求拦截的时候做了 state 的判断 去掉判断就好了 ' of undefined at __webpack_exports__.a' ref='nofollow'>Uncaught (in promise) TypeError: Cannot read property 'error' of undefined at __webpack_exports__.a原文:https://www.cnblogs.com/qlb-7/p/13365288.html

webpack can't resolve modules

1、要检查 项目内有没有这个文件,如果是插件,是否安装上 自己定义的文件,有可能是引用路径写错,或者没有定义;如果是插件,可能因为网络问题没安装成功,或者路径问题,没有安装在指定目录下 2、如果存在此文件,而且路径正确,可以排查一下 是不是项目解析问题参考 webpack官网https://www.webpackjs.com/configuration/resolve/https://www.webpackjs.com/concepts/module-resolution/ ' ref='nofollow'>webpack can't re...

前端小白webpack学习(三)【代码】【图】

不写不知道,一写发现自己真是罗里吧嗦,尽量改进之前写了webpack的主要概念和一些使用,今天再记一下webpack的plugins和loaders的使用7.webpack plugins使用例:html-webpack-plugin ,这个插件的作用主要有两点? 1.自动在内存中根据指定页面生成一个内存的页面? 2.自动把打包好的 bundle.js 追加到页面中去安装插件,终端输入npm i html-webpack-plugin -D插件使用前需引入,在webpack.config.js文件中const HtmlWebpackPlugin =...

webpack学习_使用source map【代码】【图】

追踪错误和警告,JS提供sourcemap功能,将编译后的代码映射回原始代码(简单来说就是即使打包后,也可以检测知道该错误来自哪个JS文件).如果一个错误来自与b.js,那么source map回明确告诉你在这里只使用inline-source-map选项(source map有很多选项,其他的请详细阅读webpack指南)webpack.config.js module.exports = { ....+ devtool: ‘inline-source-map‘,...};print.js,调试 export defaultfunction printMe() {cosnole.error(...

Webpack编译速度优化实战【代码】【图】

当你的应用的规模还很小时,你可能不会在乎Webpack的编译速度,无论使用3.X还是4.X版本,它都足够快,或者说至少没让你等得不耐烦。但随着业务的增多,嗖嗖嗖一下项目就有上百个组件了,也是件很简单的事情。这时候当你再独立编前端模块的生产包时,或者CI工具中编整个项目的包时,如果Webpackp配置没经过优化,那编译速度都会慢得一塌糊涂。编译耗时10多秒钟的和编译耗时一两分钟的体验是迥然不同的。出于开发时的心情的考虑,加上...

webpack4.0各个击破(5)—— Module篇【代码】【图】

webpack4.0各个击破(5)—— Module篇webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法。(本篇中的参数配置及使用方式均基于webpack4.0版本)使用webpack对脚本进行合并是非常方便的,因为webpack实现了对各种不同模块规范的兼容处理,对前端开发者来...

webpack 中,loader、plugin 的区别

loader 和 plugin 的主要区别:loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件,对于其他资源例如 css,图片,或者其他的语法集,比如 jsx, coffee,是没有办法加载的。 这就需要对应的loader将资源转化,加载进来。从字面意思也能看出,loader是用于加载的,它作用于一个个文件上。plugin 用于扩展webpack的功能。 它直接作用于 webpack,扩展了它的功能。当然loader也是变相的扩展了 webpack ,但...

webpack入坑之旅(二)loader入门

这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack 在本人有了新的理解与认识之后,会对文章有不定时的更正与更新。下面是目前完成的列表:webpack入坑之旅(一)不是开始的开始webpack入坑之旅(二)loader入门webpack入坑之旅(三)webpack.config入门webpack入坑之旅(四)扬帆起航webpack入坑之旅(五)加载vue单文件组件webpack入坑之旅(六)配合vue-router实现SPA引子在上一篇博客中我们已经成功的把简单...

'webpack' 不是内部或外部命令解决办法以及npm配置

‘webpack‘ 不是内部或外部命令解决办法以及npm配置:https://www.cnblogs.com/fengchaoran/p/8461317.html 安装配置webpack webpack不是内部或外部命令:https://blog.csdn.net/Tina_xubin/article/details/90024686' 不是内部或外部命令解决办法以及npm配置' ref='nofollow'>'webpack' 不是内部或外部命令解决办法以及npm配置原文:https://www.cnblogs.com/bydzhangxiaowei/p/12381378.html

Webpack 傻瓜式指南(一)

modules with dependencies webpack module bundler static assetss .js .js .png Webpack傻瓜式指南npm install -g webpack定义 MODULE BUNDLER 把有依赖关系的各种文件打包成一系列的静态资源简单来说就是一个配置文件, 在这一个文件中产生的。三大块entry 入口文件 让webpack 用哪个文件作为项目的入口output 出口 让webpack 把处理完成的文件放在哪里module 模块 要有什么不同的模块来处理各种类型的文件建一个文...

webpack-dev-server启动后, localhost:8080返回index.html的原理【图】

webpack-dev-server是一个采用Node.js Express实现的微型服务器, 内部使用webpack-dev-middleware来响应发送到服务器监听单口的HTTP请求。webpack-dev-server主要用于前端项目的本地开发和调试。具体使用,只需要在package.json的devDependencies里添加它的依赖即可。同样在package.json里定义dev script,执行该webpack-dev-server, 这样用命令行npm run dev就可启动webpack-dev-server.其原理是,npm install后,webpack-dev-ser...

webpack 兼容低版本浏览器,转换ES6 ES7语法【代码】

ES6,ES7真的太棒了,async +await+Promise,让我阅读代码的时候不用再从左拉到右了(异步太多,一层套一层真的太头痛)但是有个问题,打包后低版本浏览器运行不了,还有我用了一些混淆插件,不能解析es6的语法,导致混淆打包报错。进入正题:ES6转ES51.安装依赖模块npm install babel-polyfill --save-dev npm install babel-preset-es2015-ie --save-dev npm install babel-preset-env --save-dev npm install babel-preset-stage...

webpack指定文件不被打包vue【图】

1:在public文件夹新建config.js 2在vue.config.js 3:在index.html中通过script标签引入 4在项目中使用import gConf from ‘gConf‘原文:https://www.cnblogs.com/binglove/p/11669642.html

React+Webpack+Webstorm开发环境搭建【代码】【图】

需要安装的软件node.jsnpm包管理Webstorm由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npmnodejs(包含npm)安装在默认路径C:\Program Files\nodejs比较好,也不是很大Webstrom安装完成后,在打开的 License Activation 窗口中选择 License server。在输入框输入网址:http://idea.iteblog.com/key.php最后点击 Activate 构建项目和安装依赖包使用webstorm新建一个空白项目打开控制台,在控制台里输入npm init 命令来初始...

webpack的proxytable的配置【图】

这个一定不能忘记了/rest/后面的/,否则就是404找不到接口这样的实现效果是this.axios.post(‘/api/delShare‘, qs.stringify({‘Id‘:Number(id)})).then(res=>{ if(res.data.status=="success"){ alert(res.data.msg); _this.getData(); }}).catch(err=>{console.log(err);}); 请求效果:localhost:7086/api/delShare => http://test.weioutech.com/rest/delShare 请求效果:localhost:7086/api/d...

webpack-dev-server工具【图】

webpack-dev-server来实现自动打包编译功能// 1.npm install webpack-dev-server -D//2.和webpakc命令用法一样// 3.是本地安装的,无法把它当做命令执行// 4.本地项目必须安装webpack// 5.webpack-dev-server 帮我们打包生成main.js文件,并没有存放到实际的物理磁盘上,而是直接托管到电脑的内存中,所以项目根目录找不到main.js// 自动打包完成后自动打开浏览器// 在package.json修改命令开启dev-server原文:https://www.cnblog...

webpack4 css modules【代码】

demo 代码点此,webpack4 中通过 css-loader 开启 css 模块化, 开始前先做点准备工作。不了解 css 模块化的,可以前往查看github_css_modules.## 准备工作安装 webpack:npm init -y npm i -D webpack webpack-cli css-loader创建 webpack.config.js 进行配置:const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');module...

webpack打包性能优化【代码】

1. 使用 gzip 压缩打包后的 js 文件这个方法优化浏览器下载时的文件大小(打包后的文件大小没有改变) webpack.config.prod.js 中var CompressionWebpackPlugin =require(‘compression-webpack-plugin‘);// 在 pligins 中添加newCompressionWebpackPlugin({//gzip 压缩asset:‘\[path\].gz\[query\]‘,algorithm:‘gzip‘,test:newRegExp(‘\\\.(js|css)$‘//压缩 js 与 css),threshold:10240,minRatio:0.8})这样打包出的 css ...

webpack4.0学习记录【图】

1.本质上,webpack基于node node跟webpack为最新稳定版,才能更好,更快的打包2.卸载node 直接在控制面板 卸载 3.安装 从官网下载 然后自定义安装在非C盘中 需要配置环境变量 (高级系统配置 -》环境变量 ) 然后保存 就可以 全局 node -v 查看版本了 原文:https://www.cnblogs.com/tansitong/p/10787284.html

webpack-dev-server不是内部或外部命令

参考:https://segmentfault.com/q/1010000006939078错误报告:webpack-dev-server不是内部或外部命令错误原因:当执行命令: npm run dev 实际执行的是 package.json 配置:"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",相当于:npm run webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 可能原因:没有安装 webpack-dev-server 全局安装:npm install web...

CleanWebpackPlugin最新版本使用问题【代码】【图】

如果在webpack 安装 CleanWebpackPlugin最新版本报错如果是报下面的错误的话 然后在控制台向上翻会发现  TypeError: CleanWebpackPlugin is not a constructor 错误?如图 ========= 解决办法 ===========清理 /dist 文件夹你可能已经注意到,由于过去的指南和代码示例遗留下来,导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件,然后将这些文件放置在 /dist 文件夹中,但是 webpack 无法追踪到哪些文件是实际在项目中用...