plugin是什么? plugin是插件的意思,通常是用于对某个现有的架构进行扩展。 webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。 loader和plugin区别 loader主要用于转换某些类型的模块,它是一个转换器。 plugin是插件,它是对webpack本身的扩展,是一
什么是plugin 官方解释： 插件 是 webpack 的 支柱 功能。Webpack 自身也是构建于你在 webpack 配置中用到的 相同的插件系统 之上！ 插件目的在于解决 loader 无法实现的其他事。Webpack 提供很多开箱即用的 插件。 Loader是用于特定的模块类型进行转换； Plugin可以用于执行更
一、安装webpack首先需要安装Node.js, Node.js自带了软件包管理工具npm 二、查看自己的node版本: 三、全局安装webpack(这里我先指定版本号3.6.0,因为vue cli2依赖该版本) 四、局部安装webpack “--save-dev” 是开发时依赖，项目打包后不需要继续使用的 五、
入口和出口文件： 在我们打包一个项目的时候，他们都有默认的出口和入口文件，入口(./src/index.js) 出口(./dist)，那么我如果我的项目，入口比如是./src/main.js，出口是./build，该去如何指定呢？ 1.在命令的后面加选项 如：npx webpack --entry ./src/main.js --output-path ./build 2.在package
在具体使用的过程中，又碰到了些许问题 1. 利用 template 编译时会整体覆盖 el 所标识的div构造器，创建 vue 组件代替 js 文件，（开发标准） main.jsimport Vue from 'vue' import App from './vue/App.vue' const app = new Vue({ el: '#app', template:'<App/>',
前端工程化 模块化 （js模块化，css模块化，其他资源模块化） 组件化 （复用现有的UI结构、样式、行为） 规范化 （目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理） 自动化 （自动化构建、自动部署、自动化测试） webpack 前端项目工程化的具体解决方案 提供友好的前端模块化开
动态构建 也叫动态编译（dynamic compilation） java 的动态编译和前端的不一样，java动态编译最普遍的是即时编译 本地开发服务器动态编译功能目的是为了节省人力，方便调试，本质是监听和触发 webpack-dev-server 是官方提供的用于搭建本地开发环境的一个微型nodejs服务框架 有动态编译
上文介绍了 安装和项目的创建，至于项目的打包，这里不再赘述，后期有空会出篇文章说下 项目的打包方面的优化。 重学笔记，并不适用于刚刚开始学 vue 的朋友，这中间我会在使用的基础上，去解读源码，所以会穿插源码，不过如果有兴趣学源码的朋友，也可以继续往下看。 要看一个项目，第一
vue项目中引用 three 报错 _webpack_require() is not a function 解决方法： import * as THREE from "three"; const OrbitControls = require("three-orbit-controls")(THREE); 修改为 import * as THREE from "three"; import { OrbitContro
一、Module模块 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 1.Module是什么 2.Module的基本用法 3.export default和对应的import 二、Babel与webpack 1.Babel是什么 2.Babel的使用方式 3.使用Babel前的准备工作 4.使用Babel编译ES6代码 5.Webpa
//loader //模块：模块主要是运用各种loader用于对模块的源代码进行转换，将lass、sass、或者es6\TS编译转换为html能识别的css、js等，或者进行一些代码压缩图片等等的处理 //style-loader: 处理css文件中的url()等 npm install style-loader --save-dev@0.23.1 css-loader: 将css插入
【Vue学习笔记】一、前端工程化与Webpack 一、前端工程化与Webpack1)前端工程化2）webpack3）webpack的基本使用1.创建列表隔行变色项目2.在项目中配置webpack4.webpack中的插件①配置webpack-dev-server②解决Cannot GET /问题③配置html-webpack-plugin④devServer节点⑤lode
关于webpack打包的时候“./src”的报错 我出现这错误的主要原因就是未把index.js跟index.html放到src包下， 未创建src包 如下图则成功
步骤： 下载安装webpack "webpack"，"webpack-cli" npm install webpack webpack-cli --save-dev 下载ts-loader和html-webpack-plugin插件，供webpack编译使用 创建webpack.config.js文件，内容如下: // @ts-ignore const HtmlWebpackPlugin = require('html-webpack-p
vue-cli项目运行npm run dev / npm run serve后报错： Error: Rule can only have one resource source (provided resource and test + include + exclude) in { "exclude": [ null ], "use": [ { "loader": "G:\CustomerDa
优化背景： 项目上线后 第一次进入项目要等待接近50s才能进入页面。一开始觉得是电脑配置问题或者网络问题。F12后发现加载资源过慢 其中一个chunk-***js文件有10m 加载了45s 。我们使用的是2m带宽 ，实际下载速度200kb/s上下。 差不多是要50s左右。所以想知道为啥这个js这么大，需要安
webpack 打包 1. 提取项目公共资源。 插件：HtmlWebpackExternalsPlugin。 使用： //1. 配置文件 module.export = { // 省略 plugins: [ new HtmlWebpackExternalsPlugin({ externals: [ { modules: 'react',
使用vue-loader@15版本来处理.vue文件 首先要说明一点，vue-loader的不同版本在处理.vue文件的时候其配置是不同的，所以要分开来处理。 下面是使用webpack来打包一个.vue单文件组件的配置： 安装vue2.+版本 npm i vue@2.6.12 -D 编写一个简单的.vue单文件组件 // App.vue <templat
为什么需要webpack？ 随着前端开发变得越来越复杂，开发一个应用往往会遇到以下问题： 模块化开发是重要的前端开发思想，但是只有现代浏览器仅仅支持ESModule，并且需要在脚本script标签中声明属性type值为module；然而前端开发中有多种模块化方案可供选择，比如CommonJS和AMD、CMD等模块化方
一、webpack默认打包 一般来说，对于安装了webpack和webpack-cli命令行工具的项目，可以直接在根目录的终端输入webpack的命令来对项目进行打包，前面说过这种直接在终端输入webpack命令的方法会导致优先使用的是全局安装的webpack来进行打包的，如果要实现使用局部的webpack打包，目前有三
搭建本地服务器 在没有搭建本地服务器之前，我们为了在浏览器中看到代码成果，一般是这样操作的： 执行npm run build打包命令，将编译后的文件打包到dist目录 借助于Vscode中的live server插件，打开index.html文件查看效果 但是以上这种操作会有一个弊端：那就是在我们每次修改源代码之后，
webpack中mode配置 在使用webpack打包的过程中，如果不设置mode属性，那么每次执行npm run build的时候总会抛出一个警告，用来提示我们设置mode属性： WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode'
认识Plugin webpack中的两个核心内容一个是loader，另外一个就是plugin。 loader用来在webpack打包的过程中用于对特定的模块类型：比如css\less，图片，字体等资源进行转换； plugin用于将loader转化后的资源执行更加广泛和多样化的任务，比如打包体积优化、资源管理、环境变量的注入等。 Cle
一、相对路径和绝对路径 相对路径 相对路径是指以当前的文件作为起点，相较于当前目录的位置而被指向并且加以引用的文件资源。 /表示当前文件所在目录的根目录 ./表示当前文件所在目录 ../表示当前文件所在目录的上一级目录 绝对路径 绝对路径是指在当前文件的电脑硬盘上真正
一、认识PostCSS工具 PostCSS是什么？ PostCSS是一个通过将JavaScript来转化css样式的工具，它可以帮助我们实现css样式的转化和适配，比如自动添加浏览器前缀来让一些css样式在不同版本的浏览器中都可以生效，比如统一原生html标签如button在不同浏览器中的样式差异等。 PostCSS的使用方
