前言 在项目开发中我们难免碰到需要对webpack配置更改的情况，今天就主要来讲一下在vue.config.js中对一些配置的更改，简单介绍一下loader的使用；用configureWebpack简单的配置；用chainWebpack做高级配置；包括对loader的添加，修改；以及插件的配置 1、首先简单介绍一下webpack中loader的简单使用： loader：是webpack用来预处理模块的，在一个模块被引入之前，会预先使用loader处理模块的内容，在你打包的时候对某些内容需要lo...
这段时间用 Vue2.0 开发项目，每次打包都会用到 npm run build 命令，但是每次部署时给后端发包都要手动zip压缩，这样一两次还行，但遇到项目板块测试和临时加急功能测试的时候，一天可能就要打包好多次，这就很烦了。所以索性在执行 npm run build 命令时就直接打包成zip文件，方便省事！ 1、插件装备webpack插件：filemanager-webpack-plugin，该插件可执行打包，复制，移动，删除文件以及新文件夹在build之前及之后创建。安装：...
Cookie详解Cookie在远程浏览器端存储数据并以此跟踪和识别用户的机制。从实现上说，Cookie是存储在客户端上的一小段数据，浏览器（即客户端）通过HTTP协议和服务器端进行Cookie交互。Cooke独立于语言存在，严格地说，Cookie并不是由PHP、Java等语言实现的，而是由这些语言对Cookie进行间接操作，即发送HTTP指令，浏览器收到指令便操作Cookie并返回给服务器。因此，Cookie是由浏览器实现和管理的。举例说，PHP并没有真正设置过Cooki...
批处理 前端现在在做项目的时候大多数遇到的都是单页面应用，但有时需要做多页面的时候，会把单页拿过来修改成多页面，如果代码多了，对单页或多页的配置可能会混乱，那么有没有更好的方式能把单页面和多页面不同的配置代码分开，能更清楚的分辩他们的区别，这里是利用 批处理 对前端构建进行部署 git地址 目录分为三块 single //单页代码 share // 共用代码 many //多页代码只需要用到 批处理 对其中两者进行合并就能生成想要的...
让 babel webpack vue 配置文件支持智能提示，下面给大家介绍的非常详细，一起看看吧 如果非脚手架搭建的项目，往往需要手动配置 babel webpack。 每次都要打开官网，复制黏贴，然后一个一个配置。 如果配置也能智能提示，岂不美哉。 babel 配置如果原先是 .babelrc 配置，请改成 .babelrc.js 或者 babel.config.js 然后安装依赖 npm i -D @types/babel__core 或 yarn add -D @types/babel__core 接着在配置文件里加上 @type {im...
在如今前后端分离，各种框架盛行的前端界，对项目的打包要求也越来越复杂，本人分享一个vue项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。（欢迎纠错，谢谢。） 1. 安装插件 cross-env，npm install cross-env --save -dev，用于配置命令行输入命令。 2. 修改package.json里的script命令： 配置了test（测试），ready（预发布），prod（正式）三种环境，npm run build 默认设置成 npm run build:prod，也可以根据自...
webpack常用配置webpack dev server 功能：自动打包文件配置dev server：在webpack.config.client.js中配置 const path = require(path);const HTMlPlugin = require(html-webpack-plugin);// 判断是否是开发环境const isDev = process.env.NODE_ENV === developmentconst config = {entry: {app: path.join(__dirname,../client/app.js)},output: {filename: [name].[hash].js,path: path.join(__dirname,../dist),publicPath: /p...
之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。 这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。 1.编写入门级loader 我在之前的文章中，已经把webpack基础的内容基本上都过了一遍，现在开始准...
哈，本人是REACT系开发者，工作中需要不停的折腾webpack，为了顺带学习VUE的开发思想和思路，顺理成章的请缨为公司小程序打个框架基础。前期也去了解了下各个小程序开发框架，大体上是通过转义的思路来解决小程序和VUE/REACT的模板、逻辑关系，不做展开讨论了。只是从本人角度分享通过webpack来构建小程序的开发架构。通过观察小程序的原有架构，不难发现其已经是一套比较完善的mvvm架构了(类VUE)，融合了VUE及REACT的一些特点(以V...
前言: 对于非静态的文件，如js，当webpack打包时，会被直接打到模块文件中，如main.js，如果修改了，需要再次编译 而对于静态文件，如jpg，svg等，我们不希望webpack去打包，只需要在build完后，直接放到dist下的某个路径下即可，随时可以修改，并不需要再次编译 首先，看一段很熟悉的webpack配置 {test: [/\.jpg/],loader: require.resolve(url-loader),options: {limit: 10000,name: static/media/[name].[ext],}, } 它表明，在解...
前言 平常在工作开发中，为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境，确实这种工具是节省了我们不少时间，但是你有没有想过Vue开发环境是如何搭建起来的？还有如果是你自己动手去搭建，能顺利搭建起来吗？ 基于这些想法，我就捣鼓了一下webpack4，并且弄下来了这个小项目，感觉一个小项目下来收货还是挺大的，所以就写一遍文章，分享心得，哈哈！！ 基于个人的时间精力问题，把本项目教程分为两部分： webpack4手...
很偶然的今天想开个自己的小项目，记录一下最近项目工程上实现的一个小交互。按照之前运行非常流畅的配置走一遍，打包遇到各种坑。只好根据命令行的报错逐个排查，发现babel升级了一个大版本，已经到7.x了。看来每日沉迷项目，已经跟不上节奏了。这里记录一下遇到的问题以及解决方案。 1.webpack 4.x 插件 extract-text-webpack-plugin(node:2628) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` ins...
前言 在我们开发的过程中，我们会使用webpack-dev-server实现自动刷新，webpack-dev-server会把编译后的文件全部保存在内存里，而不会写入到文件目录内。但当我们的开发是前端和后端在一个项目里的时候就不行了。我们可以使用webpack结合express实现自动编译刷新 配置webpack 首先就是配置webpack的配置。新建一个webpack.config.js文件const path = require(path) const webpack = require(webpack) var hotMiddlewareScript = we...
前段时间第一次接触了layabox游戏引擎做了一个项目，由于ES6相当好用，所以在项目中使用了很多的ES6语法，但是在发布的时候发现该引擎无法压缩ES6的代码，而不进行压缩的话则代码体积比较大然后其实该引擎会将自己写的代码打包在一个js文件中，所以也就只有一个js文件是没有压缩的，所以我就想到了自己使用webpack单独对这个文件进行压缩，并将ES6语法编译成ES5，做低版本浏览器的兼容。第一步安装webpack1） 全局安装webpack4npm ...
前言团队使用的 webpack 功能很强大，有时候会碰到编译失败的情况，总得找工具的作者解决问题，自己很少去追究原因，感觉对于 webpack 的认知总是一知半解。因此，从本篇文章开始，自己从零开始配置 webpack，认真体验一下配置过程。文章内容过于简单，如果有 webpack 使用经验的人，就不用往下看啦。版本说明本文使用的 webpack 的版本为：4.30.0开始搭建本文的目的是使用 webpack 完成 es6 的编译，没想到过程过于简单。安装 nod...