阿乐のBlog

Vue在现WebPackwebpack安装安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm 查看自己的node版本： 全局安装webpack(这里我先指定版本号3.6.0，因为vue cli2依赖该版本) 局部安装webpack（后续才需要） –save-dev`是开发时依赖，项目打包后不需要继续使用的。 为什么全局安装后，还需要局部安装呢？ 在终端直接执行webpack命令，使用的全局安装的webpack 当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack 准备工作我们创建如下文件和文件夹： 文件和文件夹解析： bulid文件夹：用于存放之后打包的文件 src文件夹：用于存放我们写的源文件 index.js：项目的入口文件。具体内容查看下面详情。 math.js：定义了一些数学工具函数，可以在其他地方引用，并且使用。具体内容查看下面的详情。 index.html：浏览器打开展示的首页html package.json：通过npm init生成的，npm包管理的文件（暂 ...

一定要使用分号的情况分号不只是语句结尾使用，在某些语法中，具有分隔表达式或语句的作用： for 中的表达式之间： 1for(var i=0;i<10;i++) 同一行使用多个表达式： 12345// example 1var i=0; i++// example 2case 'foo': dosomething(); break 以 [ ( 开头的行，这是一种特殊的风格，用来防止解析器或者压缩工具误认为某行和上面几行在一起解析，造成代码执行结果错误，还有 IIFE（立即执行函数表达式）这种情况 ： 1234567// example 1;(x||y).doSomething();[a,b,c].forEach(doSomething)// example 2var x = 2;(function(){})()

vue 模板语法 官方文档 插值操作Mustache语法（常用 ，牢记）Mustache语法又叫胡子语法，或者双大括号 数据都是响应式的。 123456789101112131415161718192021<div id="app"> <h2>{{message}}</h2> <h2>{{message+message}}</h2> <h2>{{m*2}}</h2> <h2>{{firstName+" "+lastName}}</h2> <h2>{{firstName}}{{lastName}}</h2></div><s ...

webpack 五个核心概念Entry入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。 Output输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。 LoaderLoader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解JavaScript) Plugins插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。 Mode模式(Mode)指示 webpack 使用相应模式的配置。 选项 描述 特点 development 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和NamedModulesPlugin。 能让代码本地调试运行的环境 production 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 product ...

webpack详细配置:smile:webpack详细配置之entry123456789101112131415161718192021entry: 入口起点 1. string --> './src/index.js' 单入口 打包形成一个chunk。 输出一个bundle文件。 此时chunk的名称默认是 main 2. array --> ['./src/index.js', './src/add.js'] 多入口 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。 --> 只有在HMR功能中让html热更新生效~ 3. object 多入口 有几个入口文件就形成几个chunk，输出几个bundle文件 此时chunk的名称是 key --> 特殊用法 { // 所有入口文件最终只会形成一个chunk, ...