还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件，那么怎么把他们变成动态的index.html文件，这个动态生成的index.html文件会动态引入我们打包后生成的js文件呢？，我们可以使用插件html-webpack-plugin，首先安装这个插件npm install html-webpack-plugin --save-dev，好的，接下来就开始用这个插件了官方参考文档：插件通用用法：https://webpack.js.org/configuration/plugins/#pluginsh...
又到五一了，仍然还是单身。趁着单身还有时间，还是多多提升自己。花了差不多一天多的时间，重新撸了一遍webpack4.x的常用配置。github详细代码地址，喜欢请给星。 https://github.com/pomelott/webpack4.x_Demo 基本上常用的配置都熟悉了一遍，总体上来讲，为了对parcel进行反击，webpack从4.x开始，正在朝着尽可能的简化配置文件的方向发展。一、首先来看下，webpack4的新特性。1.webpack不在单独使用，4.x版本将很多命令移动到了...
为什么要模块化javascript跟其他开发语言有很多的区别，其中一个就是没有模块化概念，如果一个项目中有多个js文件，我们只能通过script标签引入的方式，把一个个js文件插入到页面，这种做法会也引起了很多弊端：需要手动维护JavaScript的加载顺序多次请求资源，影响了加载速度在每个script标签中，顶层作用域即全局作用域，如果没有任何处理而直接在代码中进行变量或函数声明，就会造成全局作用域的污染，也会造成命名冲突。模块化...
/*** webpack打包JS配置* @authors Jean Chueng (jean0920@163.com)* @date 2016-05-27 17:44:31* @version v1.0.0*//****初始设置****///服务器地址var server = "http://common.statics.qq.tt:8080"; //输出环境: ‘/dev/‘表示开发环境;‘/dist/‘表示测试环境var sEnvironment = ‘/dev/‘; //运行终端: ‘mobile/‘表示微信端;‘basic/‘表示PC端var sSystem = ‘mobile/‘; //业务模块名: * 为遍历所有业务功能模块v...
1.创建项目（vue项目的流程就不多讲了）2.cnpm install vux --save3.在build/webpack.base.conf.js配置：const vuxLoader = require(‘vux-loader‘)把第一个module.exports赋值变量let webpackConfig ={里面代码不动}然后这个放在最底部去module.exports = vuxLoader.merge(webpackConfig, {plugins: [‘vux-ui‘, ‘progress-bar‘, ‘duplicate-style‘] })4.安装vux-loader使用命令cnpm install vux-loader -D5.cnpm install l...
1.环境切换 API_ROOT: ‘"http://192.168.1.145:92"‘const rootUrl = process.env.API_ROOT 2.打包服务器配置先安装generate-asset-webpack-plugin插件npm install --save-dev generate-asset-webpack-plugin在webpack.prod.conf.js里面配置//让打包的时候输出可配置的文件var GenerateAssetPlugin = require(‘generate-asset-webpack-plugin‘);var createServerConfig = function (compilation) { let cfgJson = { Ap...
这周接手了一个前后端未分离的老项目，需要用webpack重新打包，重新设置html入口，之前没接触过webpack，急着学了点皮毛，遇到了很多问题，踩了很多坑,我这边简单总结一下。下载的webpack5，用webpack4语法打包，资源文件（如图片）加载不出来因为是拼布式的学习，急着赶项目进度，webpack中文文档看了前几章就着急上手项目想要解决问题了，直接install，所以下载的是最新版的5 具体的安装版本:webpack 5.52.1 webpack-cli 4.8.0配...
在如今前后端分离，各种框架盛行的前端界，对项目的打包要求也越来越复杂，本人分享一个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执行完之后会生成build文件夹已经它下面的index.html,点击index.html就是下图的效果）安装先装好node和npm，因为webpack是一个基于node的项目。然后npm install -g webpack总览官网对webpack的定义是MODULE BUNDLER，他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。 请看下图webpack简单点来说就就是一个配置文件，所有的魔力都是在这一个文件中发生的。 这个配置文件主...
# 安装npm i -D url-loader html-loader file-loader# loader配置module: { rules: [ // 图片处理 { test: /\.(png|jpeg|jpg|gif)$/, use: [ { loader: ‘url-loader‘, options: { // 图片小于8kb，就会被base64处理 // 优点: 减少请求数量(减轻服务器压力) // 缺点：图片体积会更大(文件请求速度更慢) limit: 8 * 1024, name:...
webapck中使用loader的方法有三种 使用loader之前必须运行安装 : npm install --save-dev xxx-loader (1)通过CLI : 命令行中运行 webpack --module-bind jade --module-bind ‘css=style!css‘ //jade,style,css后面可省略-loader，他们分别对.jade使用jade-loader,对.css使用style-loader和css-loader (2)通过require : require(‘style-loader!css-loader?module!./style/main.css‘) //对main.css使...
浏览器缓存浏览器缓存分为两种类型： 强缓存：也称为本地缓存，不向服务器发送请求，直接使用客户端本地缓存数据协商缓存：也称304缓存，向服务器发送请求，由服务器判断请求文件是否发生改变。如果未发生改变，则返回304状态码，通知客户端直接使用本地缓存；如果发生改变，则直接返回请求文件。浏览器缓存机制的过程如下：强缓存(本地缓存) 强缓存是最彻底的缓存，无需向服务器发送请求，通常用于css、js、图片等静态资源。浏览器...
这次给大家带来怎样使用WebPack配置vue多页面，使用WebPack配置vue多页面的注意事项有哪些，下面就是实战案例，一起来看一下。WebPack虐我千百遍，我带她如初恋。一个项目前台页面写差不多了，webpack几乎零配置，也算work起来了。现在需要编写后台管理界面，另起一个单独的项目，那是不存在的。于是网上了搜了大把大把的文章，很多都是修改了项目的结构，讨厌，vue-cli搞的那一套，干嘛要修改来修改去的。像我这种前端小萌新，web...
相信vue使用者对vue-cli都不会陌生，甚至可以说，很熟悉了，但对其webpack的配置可能知之甚少吧。 过完年回来后，我接手了公司的新项目。新项目是一个spa。很自然，我就想到了vue-cli脚手架了，当时研究一下它的webpack配置。于是，就有了其他的内容。 今天这篇文章，是在原来的基础上，增加了一些新版本的内容，但实质上变化不大。 说明此仓库为vue-cli webpack的配置分析，其实只是在源码中加上注释而已。大家查看详细分析，可以...
上次在学习中，遇到了配置默认路由的问题，这次我们配置webpack文件别名和设置路由的默认class1.设置webpack文件别名首先设置别名是在webpack.base.conf.js 的文件中设置。找到resolve: {extensions: [.js, .vue, .json],alias: {vue$: vue/dist/vue.esm.js,@: resolve(src),components: resolve(src/components)}},在alias里面做配置。如果你的文件在components里面；设置的时候就可以写成我上面的 resolve(src/components) 。在引...