WEBPACK - 技术教程文章

深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)【代码】【图】

深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境。首先我们来设想下我们的项目的目录结构如下:### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包 | |--- app | |...

webpack 4 打包原理

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。打包过程可以拆分为四步:利用babel完成代码转换,并生成单个文件的依赖从入口开始递归分析,并生成依赖图谱将各个引用模块打包为一个立即执行函数将最终的bundle文件写入bundle.js中以...

WebPack常用功能介绍【代码】

WebPack常用功能介绍概述Webpack是一款用户打包前端模块的工具。主要是用来打包在浏览器端使用的javascript的。同时也能转换、捆绑、打包其他的静态资源,包括css、image、font file、template等。个人认为它的优点就是易用,而且常用功能基本都有,另外可以通过自己开发loader和plugin来满足自己的需求。这里就尽量详细的来介绍下一些基本功能的使用。安装npm install webpack 运行webpackwebpack需要编写一个config文件,然后根据...

手撕vue-cli配置——webpack.base.conf.js篇【代码】

在开始写webpack.base.conf.js(简称base)之前,我们先来看一下vue-loader.conf.js这个文件,毕竟在base中我们还会用到:‘use strict‘//引入前一篇文章的utils文件 const utils = require(‘./utils‘) //引入config文件 const config = require(‘../config‘) //判断当前是否为生产环境,如果是则返回true const isProduction = process.env.NODE_ENV === ‘production‘ //是否使用sourceMap,如果是生产环境就使用config文件...

webpack超详细配置, 使用教程(图文)【代码】【图】

webpack超详细配置, 使用教程(图文) 版权声明:本文为博主原创文章,未经博主允许不得转载。博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目;流程webpack安装Step 1: 首先安装Node.js, 可以去Node.js官网下载.Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中npm install webpack -gStep3: ...

在webpack自定义配置antd的按需加载和修改主题色【代码】

最近使用antd来做react项目的UI。从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下:(1)添加模块 react-app-rewired, babel-plugin-import, react-app-rewire-less(2)根目录添加config-overrides.js(3)修改npm script即可, 一切正常参考官网 这里主要说的是自建的react项目中如何配置及其容易出现的坑一、按需加载  (1)在.babelrc中添加plugins (这里也可以在babel-loader的options中添加)1 [‘import‘,...

webpack的四大核心概念【代码】

webpack中文文档:https://doc.webpack-china.org/concepts/一、Entry(入口)1、单个入口(简写)语法// 语法 entry: string|Array<string>// 用法module.exports={entry:‘./index.js‘}module.exports={entry: [‘./index.js‘,‘app.js‘] }2、多个入口(对象语法)// 语法 entry:{[entryChunkName: string]: string|Array<string>}// 用法module.exports={entry:{index: [‘./index.js‘,‘./app.js‘],vendor:‘./vendor.js‘...

webpack学习02--打包样式资源【代码】【图】

1.使用npm下载loadernpm i style-loader -D npm i css-loader -D npm i less -D npm i less-loader -D 2.配置webpack.config.js文件/*webpack配置文件,作用:指示webpack怎么干活,干哪些活当你运行webpack指令的时候,会加载其中的配置所有的构建工具都是基于Node.js来运行的,模块化使用的CommonJS*/const {resolve} = require(‘path‘)module.exports = {// webpack配置// 入口起点entry : ‘./src/index.js‘,// 输出 out...

vue中webpack的配置理解【代码】

当我们需要和后台分离部署的时候,必须配置config/index.js:用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置)var path = require(‘path‘)module.exports = {build: {index: path.resolve(__dirname, ‘dist/index.html‘),assetsRoot: path.resolve(__dirname, ‘dist‘),assetsSubDirectory: ‘static‘,assetsPublicPath: ‘/‘,productionSourceMap: true},dev: {port: 8080,proxyTable: {}} }在‘build‘部分,...

webpack打包css样式出错

有两个组件home和search两个组件中都有class为footer的元素但是search的footer比home的多一条background的样式本地开发的时候没问题,但是打包之后,home也被打包上了background的样式暂时处理方法是home和search的footer元素使用不同的class原文:https://www.cnblogs.com/chenzeyongjsj/p/8414207.html

webpack自学文档 -- 1【图】

铭文真义  一种前端资源构建工具,一个静态模块打包器。它会根据模块的依赖关系进行静态分析,打包生成对应的静态资源。 五大神将  1、entry:打包入口    入口指示webpack以哪个文件为入口起点开始打包,分析构建内部依赖图  2、output:打包出口    输出(output)指示webpack打包后的资源bundles输出到哪里去,以及如何命名  3、loader:    loader让webpack能够去处理那些非JS文件(webpack自身只能解析js/js...

Vue+Webpack之 代码及打包优化【代码】

本文重点介绍Vue单页面应用的优化手段:异步加载面切换时加loading特效点击延迟inline manifest逻辑代码优化依赖包体积优化cdn引用Vue代码优化异步加载所谓的异步加载组件,其实就是组件懒加载。可以理解为:当我需要使用组件的时候才进行加载。主要包含两部分:路由配置和子组件的调用。所以在router文件夹下 index.js 做如下配置组件优化由于是后台项目,所以选择element-ui框架进行后台系统搭建,所以对这个进行优化也可以减小体...

webpack打包

webpack创建compiler实例,如果options是数组,则创建多个compiler;初始化compiler,为compiler添加上下文context和options,初始化基本插件;compiler调用run,run内调用compile方法,开始编译;compile内创建compilation对象,并将this传入,compilation就包含了对compiler的引用;compiler调用addEntry,addEntry调用_addModuleChain();_addModuleChain查询合适的工厂函数开始创建模板,并将其加入module链当中,调用buildModule()...

16.如何做到webpack打包vue项目后,可以修改配置文件【代码】【图】

问题描述:前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api服务器的ip修改了,改动只是更新下这个url,但是却需要会到前端源码,url后,在重新npm run build,然后再把整个dist再重新传到前端服务器,才可以。解决方法:用了generate-asset-webpack-plugin 这个插件,在webpack.prod.conf.js中去生成configServer.js...

webpack的学习使用二【图】

Loaders是webpack中最核心的功能。通过使用不同的loader,webpack通过调用外部的脚本和工具可以对各种各样的格式文件进行处理。比如说分析JSON文件并把它转换为javascript文件,或者说把新的JS文件如ES6,ES7转换为现代浏览器可以识别的JS文件。或者说对React的开发而言,合适的Loaders可以把React的JSX文件转换为JS文件。 其实一句话就是打包编译不同的文件使用不同的loder文件就可以了。在webpack.config.js的模块modules下进行配...

webpack的学习使用七【图】

现在介绍一个webpack需要下载的插件 HtmlWebpackPlugin这插件的作用是依据一个简单的模版,帮你生成最终的HTML5文件,这个文件中自动引用了你打包后的JS文件,每次编译都在文件名中插入一个不同的哈希值。安装命令:npm install --save-dev html-webpack-plugin这个插件自动完成了我买之前手动做的一些事情,在正式使用之前需要对一直依赖的项目结构做一些改变:移除public文件夹,利用此插件,HTML5文件会自动生成,此外CSS已经通...

webpack学习笔记,前方有坑,请注意!!!!!【图】

拖了好久,终于决定系统学习一下webpack(其实是自己懒,哈哈哈),学习任何东西都要亲自动手才行,learn by doing 才是最高效的学习方法,以下是我在学习webpack的心得和踩得的坑,希望看到的同行,可以少踩坑,文章写得烂,不要介意,哈哈哈,下面开始表演。什么是webpack就不用介绍了,我主要列举遇到的问题。使用步骤:新建一个文件夹,然后npm init初始化一下,然后非全局安装webpack1.打包时记得全局安装webpack,否则命令会报...

从零配置webpack(react+less+typescript+mobx)【代码】

本文目标从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y yarn add webpack webpack-cli -D 根目录下新建webpack.config.js文件,内容如下 const path = require(‘path‘);module.exports = {mode: ‘development‘,// 入口 这里应用程序开始执行entry: path.resolve(__dirname, ‘src/index.tsx‘),// 出口 output: {// 输出文件的目标路径...

install Webpack【图】

去年安装过webpack,很顺利。但是作为一个安装失败体质,今儿安装又变得复杂了,==》最近webpack更新了。。。在确保安装好node & npm后,我们开始安装webpack1. 以admin身份进入cmd2. 可以看到很多warning,感觉为以后留下了隐患,因为是最新版本,其他的依赖包还没有很好的支持,晕倒,为什么受伤的总是我。先试试吧,路加,加油! 3. 开心了一下,vue-cli 直接可以用webpack, ps: must run in admin cmd 原文:https://www.cnbl...

webpack入门二 使用核心概念【代码】

WebPack使用核心概念参考文档webpack v4.44.1中文文档https://www.webpackjs.com/concepts/webpack v5.0.0-beta.24https://webpack.js.org/concepts/四个核心组成入口 Entry输出 Output加载解释 Loaders插件 Plugins加上- 模式 Mode - 浏览器兼容性Browser Compatibility 示例目录结构src|- index.js // 入口文件 引入了a.js a.less index.css|- a.js // 示例js文件|- a.less // less文件|- index.css ...

webpack-ts-vue 配置 浏览器插件开发【代码】

配置webpacknpm i init --y npm i webpack -D npm i webpack-cli -D npm i @types/firefox-webext-browser @types/chrome -D // 浏览器扩展API提示 支持 Typescripttsc --init npm i typescript ts-loader -D 设置tsconfig.json配置文件{"compilerOptions": {"target": "ES2016","module": "commonjs", // ts-node 不支持 commonjs 以外的任何模块语法"allowJs": true,"outDir": "./dist","rootDir": "./src","strict": true,"...

00-认识webpack - 为什么要模块化 -webpack打包过程【图】

webpack在不进行任何配置的情况下,他只认识js。为什么要打包?因为一个个小文件,我们合成一个,这样请求就只请求一次。webpack除了打包之外,还具有翻译官的功能?loader把浏览器看不懂的代码翻译成浏览器看的懂的代码。 Plugin?对文件做点别的事情不管是loader 还是 plugin 都是可插拔,意思就是你什么时候想用,你就装进来,不想用,删掉。所以说webpack不仅强大,而且灵活。 为什么要模块化?模块化的好处? 如上图,传统的...

ES6+React+Webpack初步构建项目流程【代码】【图】

当我们打算使用Webpack构建工具,React和ES6来开发项目的时候,构建这么一套自动化的项目的流程见下: 第一步:webpack是一个基于node的项目,我们使用命令行对webpack进行全局的安装npm install webpack –g。可以通过webpack –h来查看安装的版本信息。然后我们新建一个文件夹用来存放整个项目文件。为了可以在项目中使用webpack,我们需要将webpack安装到当前的项目依赖中,在新建的文件夹下输入:npm init(安装webpack依赖,...

webpack 配置流程记录【代码】

vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json "scripts": {"dev": "node build/dev-server.js", //npm run dev ,执行这里"build": "node build/build.js"}, build文件下的dev-server.js文件var config = require(‘../config‘)//引入的一个配置文件,运行时和开发时的一个配置文件 var webpack = require(‘webpack‘) var op...

在webpack搭建的vue项目中如何管理好后台接口地址【代码】

在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包,来回很是麻烦,今天网上翻看到一个很好的方法可以解决这个问题,也是由于对webpack工具不是很了解,其实这个工具已经提供了解决方案.参考网站:http://blog.csdn.net/gebitan505/article/details/58166055;在config文件夹里面有三个js文件...

webpack学习--配置loader报错(TypeError:this.getResolve is not a function)【图】

学习webpack的loader时,命令行安装的css-loader无法正常运行,并报错:(node:20500) UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function原因:应该是webpack版本过低,而直接npm install默认安装的css-loader等版本过高的原因。其他loader也有相关警告:解决方案1. package.json里手动降loader的版本,顺手把其他几个也都改成和老师一样的版本吧。(学习阶段,跑起来为上)2. 删除node_module后重新...

webpack编译es6【图】

1 安装已安装npm前提下,先全局后在使用的文件夹下安装局部,npm init 初始化package.jsonnpm install webpack --save-dev2 测试 运行后生成b.js运行除了直接webpack命令,还可以修改package.json里面,在scripts里添加 "start":"webpack",然后npm start就可以了,npm run start一样,跟vue-cli全家桶的npm run dev一样的报错详细,可以用webpack --display-error-details3 配置webpack.config.js更详细参见:http://webp...

vue-cli Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT【图】

整了两天才发现是前段时间创建修改HOSTS文件导致的找到目录C:\Windows\System32\drivers\etc 删除 HOSTS文件注意:删除的不是hosts.ics 删除的是HOSTS原文:https://www.cnblogs.com/ITwj-115/p/14775816.html

webpack2.X、Vue学习以及将两者相结合【代码】

在家的闲暇时间来完善自己的前端知识。经过两三天的学习,按照webpack文档学习,vue文档学习,最后实现了两者结合的目标。webpack按照网站上guide的流程依次学习1、使用npm安装webpack2、设置输入文件,比如怎样引入css,images,fonts,data3、设置输出文件,比如可以根据自己的设置来决定输出脚本的名称,生成新的页面,在每次生成新页面之前先把旧的页面进行清理4、开发过程中,使用source maps来显示提示信息,方便开发者定位错...

webpack02【代码】

学了一段时间的webpack,总觉得插件太多,麻烦。在学习过程中得知了vue-cli脚手架工具。为啥我学vue的时候没有听说过这个。。好了,来说一下vue-cli吧。它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。看了webpack四五天之后就去试了一下这个脚手架,很好用的。之前webpack就想偷偷懒了。直接找了一下别人学习webpack的笔记。嘿嘿。虽然脚手架很方便,但是...