webpack
陌上浮屠
这个作者很懒,什么都没留下…
展开
-
webpack--概念3--输出
1:控制webpack如何向硬盘写入编译文件;注意:即使可以存在多个入口起点,但是只能指定一个输出配置对象;包括以下2个属性: (1)filename用于输出文件的文件名 (2)目标输出目录path的绝对路径; 2:如果配置创建了多个单独的chunk(例如使用多个入口起点,或者使用像CommonChunkPlugin这样的插件),则该使用占位符(substitutions)来确保每个文件具有唯转载 2017-08-30 14:02:07 · 284 阅读 · 0 评论 -
webpack 代理服务器环境配置
1:全局安装webpackcnpm install webpack -g2:新建文件夹,并且进入这个文件夹下3:新建packjson.js文件cnpm init -y4:安装webpackcnpm install webpack -D5:安装webpack-dev-servercnpm install webpack-dev-server -D6:在package.js同级目录下新建package.原创 2017-10-27 18:13:18 · 2325 阅读 · 0 评论 -
webpack--指南1--打包文件配置
1:创建一个webpack-demo文件夹,并且进入这个文件夹mkdir webpack-demo && cd webpack-demo2:生成package.json文件npm init -y此时项目结构如图: 3:添加webpacknpm install --save-dev webpack此时项目结构如图:node_modules文件夹中居然有484个文件夹 4:新建文件,结构如图转载 2017-08-31 16:15:31 · 1060 阅读 · 0 评论 -
webpack--指南4--开发
使用source map当文本webpack打包源代码时,可能会很难追踪到错误和警告在源代码中的原始位置;例如,如果将3个源文件打包到一个bundle.js中,而其中一个源文件包含一个错误,那么堆栈跟踪就会简单指向到bundle.js;通常没有太多帮助,因为你需要准确的知道错误来自哪个源文件; 为了更容易的追踪错误和警告,JS提供了source map功能,将编译后的代码映射回原始源代码。 使用转载 2017-09-01 16:32:41 · 381 阅读 · 0 评论 -
webpack--概念7--模块解析
1:resolverresolver是一个库,用于帮助找到模块的绝对路径;他帮助webpack找到bundle中需要引入的模块代码;这些代码包含在每个require/import语句中,当打包模块时,webpack使用enhanced-resolve来解析文件路径;2:webpack中的3种文件路径解析1:绝对路径import "/home/me/file";import "C:\\Users\\m转载 2017-08-30 17:22:17 · 549 阅读 · 0 评论 -
webpack--概念2--入口起点
单个入口的写法const config={ entry:{ main:'./path/to/my/entry/file.js' }}多页面程序const config={ entry:{ pageOne:'./src/pageOne/index.js', pageTwo:'./src/pageTwo/index.js',转载 2017-08-30 13:35:04 · 416 阅读 · 0 评论 -
webpack--概念1--介绍
webpack基本介绍1:webpack是一个模块打包器(module bundler)(现代JS应用程序的模块打包器)。当webpack处理应用程序时,它会递归的构建一个依赖关系图(这个关系图包含应用程序的每个模块,然后将所有这些模块打包成一个少量的bundle--通常只有一个,由浏览器加载)。2:webpack是高度可配置的,但是在开发前,需要先了解四个核心概念:入口(entry),输出(out转载 2017-08-30 10:19:58 · 323 阅读 · 0 评论 -
webpack--指南3--管理输出
HtmlWebpackPlugin插件如果我们更改了我们的一个入口起点的名称,甚至添加了一个新的名称,会发生什么?生成的包将被重命名在一个构建中,但是我们的index.html文件仍然会引用旧的名字,我们用HtmlWebpackPlugin来解决这个问题;npm install --save-dev html-webpack-pluginconst path = require('path');c转载 2017-08-31 20:24:30 · 215 阅读 · 0 评论 -
webpack--指南2--管理资源
1:加载CSS要想在JS模块种import一个CSS文件的话,需要在mudle配种安装并且添加style-loader和css-loadernpm install --save-dev style-loader css-loader//webpack.config.jsmodule.exports={ entry:'./src/index.js', output:{转载 2017-08-31 19:43:41 · 240 阅读 · 0 评论 -
webpack--概念9--模块热替换
1:简单介绍模块热替换(HMR-hot module replacement)功能会在应用程序运行过程中替换,添加,删除模块。二无需重新加载整个页面;主要通过以下几种方式来显著加快开发速度 (1)保留在完全重新加载页面时丢失的应用程序状态 (2)只更新变更内容,以节省宝贵的开发时间 (3)调整样式更加快速,几乎相当于在浏览器调试器中更改样式2:HMR的工作原理让我们从不同角度出发 1:在应用转载 2017-08-31 14:16:57 · 775 阅读 · 0 评论 -
webpack--概念8--manifest+runtime+构建目标
webpack构建典型应用程序,有3种主要的代码类型:你跟你的团队编写的源码+你的源码依赖的任何第三方library或者vendor代码+webpack的runtime跟manffest,管理所有模块的交互;1:runtimeruntime以及伴随的manifest数据,主要指:在浏览器运行时,webpack用来连接模块化应用程序的所有代码;runtime包含:在模块交互时,连接模块所需的加载和解析转载 2017-08-30 18:49:03 · 3244 阅读 · 0 评论 -
webpack--概念6--配置+模块+依赖图
1:配置webpack 配置是标准的 Node.js CommonJS 模块,因此可以通过require导入其他文件;2:模块1:简单介绍在模块化编程中,开发者将程序分解成离散功能块,称之为模块; 每个模块具有比较完整程序更小的接触面,使得校验,调试,测试轻而易举;精心编写的模块提供了可靠的抽象和封装界限;使得应用程序中每个模块都具有条理清楚的设计和明确的目的; node.js从一开始就支持模块转载 2017-08-30 16:35:52 · 1821 阅读 · 0 评论 -
webpack--概念5--插件
插件是webpack的支柱功能;目的在于解决loader无法实现的其他事情;1:源码分析:webpack插件是一个具有apply属性的JS对象。apply属性会被webpack compiler调用,并且compiler对象在整个编译生命周期访问function ConsoleLogOnBuildWebpackPlugin() {};ConsoleLogOnBuildWebpackPlugin.pr转载 2017-08-30 16:00:23 · 548 阅读 · 0 评论 -
webpack--概念4--loader
1:loader基本介绍loader用于对模块的源代码进行转换;loader可以使你在import活加载模块时预处理文件;loader可以将文件从不同的语言(如typescript)转化为JS,或将内联图像转化为data URL;loader甚至允许你直接在JS模块中import CSS文件; 例如:你可以使用loader告诉webpack加载css文件,或者将typescript转化为JS,为此转载 2017-08-30 15:49:00 · 274 阅读 · 0 评论 -
npm --save-dev --save 的区别
npm install 在安装 npm 包时,有两种命令参数可以把它们的信息写入 package.json 文件 一个是 --save || -S // 运行依赖(发布)另一个是–save-dev || -D //开发依赖(辅助)区别是它们会把依赖包添加到package.json 文件–save : dependencies 键下,发布后还需要依赖的模块,譬如像jQuery库或者Angular框转载 2017-10-16 17:11:00 · 8955 阅读 · 0 评论