手把手使用 Webpack 4 建立 VUE 项目安装 node.js略安装 cnpm略安装 webpackcnpm install webpack -g安装 vue-clicnpm install veu-cli -g初始化项目vue init webpack vuetest启动开发服务器cnpm run dev原文：https://www.cnblogs.com/F4NNIU/p/9528103.html
Webpackwebpack提供了两种项目模板，分别是vue-webpack-simple模板和vue-webpack模板Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。...
前端真是日新月异了，前不久的教程就很多不一样了。搭环境搭了几小时，终于搭好了。首先奉上别人的老版教程，可以先按这个来：点击查看老版可以先跟这个来，按照教程开始打包后会报错。现在好好说说其中跟现在不一样的坑。 报错一：现在webpack已不支持自定义属性了，故 webpack.config.js 中的 Favlist 的键值对要删掉。报错二：config.resolve.extensions[0] 不能为空，故要删去相对应的数组中第一项的空字符串，只留 ‘.js‘ 和...
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
从三个插件开始1、CommonsChunkPlugincommonsChunkPlugin 是webpack中的代码提取插件，可以分析代码中的引用关系然后根据所需的配置进行代码的提取到指定的文件中，常用的用法可以归为四类：（1）、提取node_modules中的模块到一个文件中；（2）、提取 webpack 的runtime代码到指定文件中；（3）、提取入口文件所引用的公共模块到指定文件中；（4）、提取异步加载文件中的公共模块到指定文件中。下面就具体说明以上四种用法。1.1 提...
Install 是不可少的事情1 npm install --save-dev babel-core babel-preset-es20151 npm install --save-dev babel-loader配置 .babelrc1{
2 "presets": ["es2015"]
3 }详细可看npm原文：http://www.cnblogs.com/hasubasora/p/7081894.html
在讲解提取css之前，我们先看下项目的架构如下结构：### 目录结构如下：
demo1 # 工程名
| |--- dist # 打包后生成的目录文件
| |--- node_modules # 所有的依赖包
| |--- app
| | |---index
| | | |-- views # 存放所有vue页面文件
| | | | |-- index.vue
|...
随着项目的页面越来越多体积越来越大，dev构建速度和pro打包速度越来越慢，然后就抽时间对项目进行了webpack升级来提升一下速度
升级过程中遇到了很多的坑，基本都是plugin和loader升级后的一些用法问题，花了一个晚上和一个上午时间，过程很痛苦，但是看到
速度的大幅度提示，还是很开心的
先上图看一下对比效果
webpack3 dev构建
webpack3 pro打包
webpack5 dev构建 提升60%
webpack5 pro 构建 提升23%
看的处理效果还是很不错的...
组件复用
当前组件被复用（没有被销毁或者创建）的时候，路径会发生改变，但是，值不会发生改变因为：created(){}接收值，但是created只创建一次，在create中接收路径传来的值，所以接收到的值不会发生改变解决方法：监听路由的变化 $route()使用场景：当 一个组件被复用的时候，虽然路由发生变化，但页面上的数据不会发生变化 比如： 从列表页list点击商品，进入商品详情页details查看商品的详细信息,当点击商品时，跳...
https://blog.csdn.net/maray/article/details/50988500?utm_source=blogxgwz0import Blur from ‘vux/src/components/blur/index.vue‘
import Cell from ‘vux/src/components/cell/index.vue‘
import Range from ‘vux/src/components/range/index.vue‘
import Toast from ‘vux/src/components/toast/index.vue‘
import Group from ‘vux/src/components/group/index.vue‘原文：https://www.cnblogs.com/zhoudawei/p/97954...
config 目录下好像都不需要相关配置,但是package.json里面下面的依赖必须有"css-loader": "^0.28.11","less": "^3.0.4", "less-loader": "^4.1.0","style-loader": "^0.21.0","vue-style-loader": "^3.0.1", 使用<style lang="less"> 还有一种使用sassconfig.base.js{ test: /\.sass$/, loaders: [‘style‘, ‘css‘, ‘sass‘] },css-loader,vue-style-loader,"sass-loader": "^6.0.7", 使用<style lang...
webpack 打包不会玩，整了这么个小玩具 一段 vue 绑定代码，关键点在 gmallComponent1、异步加载外部 vue 文件（非 .vue）2、按一定规则拆分 template、script、stylenew Vue({el: ‘#app_vuejs_replace‘,data: {search_key : ‘‘,results : [],pageindex : 1,selecteditem : null},components: {‘vue-test‘: gmallComponent(‘gz/test.html‘, {props: [‘items‘]})}
}); gz/test.html 使用习惯几乎遵循 vue 原生，定义模板、...
目录结构：index.html:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"></div><script src="/dist/main.js"></script></body></html>main.jsimport Vue from ‘vue‘
import App from ‘./App.vue‘
import MM from ‘../packages/...
前戏每一次手动打包很麻烦，打包后还需要手动刷新浏览器。采用 webpack 提供的工具： webpack-dev-server ，它允许在运行时更新所有类型的模块后，而无需手动打包和刷新页面，会自动打包和刷新页面。可以很大程度提高开发效率。参考：https://webpack.docschina.org/guides/development/#使用-webpack-dev-server安装在当前项目下安装npm install --save-dev webpack-dev-server 修改 webpack.config.js 配置// 引入node中的path...
npm install -g vue //全局安装vue
npm install -g webpack //全局安装webpack
npm install -g vue-cli //全局安装vue-cli
//可用淘宝镜像 npm=》cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org生成项目vue init webpack my-first-vue-project //生成项目名为my-first-vue-project的模板了解vue与webpack的关系 学习vue装好项目后cd my-first-vue-project //进入目录npm install //下载所需要...