webpack
itKingOne
热爱生活,热爱运动,活出精彩,活出新高度
展开
-
Webpack对比其他框架的优势分析
代码拆分Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。LoaderWebpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。智能解析We原创 2017-04-11 09:17:17 · 3858 阅读 · 0 评论 -
webpack2.X提取Vue文件中的css、less或者sass样式
webpack打包vue项目的时候我们可以通过配置把vue里的css打包到一个文件,然后放在页面上,具体配置如下:var cssLoaders = function (options) { options = options || {} // generate loader string to be used with extract text plugin function ge原创 2017-07-20 13:37:09 · 1329 阅读 · 0 评论 -
Vue-cli+webpack单页模式详解
由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会“太折腾”。一、文件结构本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容。├─build│ ├─build.原创 2017-07-11 10:03:11 · 874 阅读 · 0 评论 -
Webpack之proxyTable 解决开发环境的跨域问题
和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名。今天翻看代码时,突然发现vue-cli的config文件里有一个参数叫proxyTable,看这个名字就感觉能解决问题,于是我就去搜了一下,果然。在vuejs-templates,也就是vue-cli的原创 2017-05-16 18:15:16 · 11589 阅读 · 1 评论 -
webpack开发和生产两个环境的配置详解
目录webpack.base.conf.jswebpack.dev.conf.jswebpack.prod.conf.js一开始在接触webpack 的时候,简直痛不欲生,现在回头看,做个注释,当然参考了很多文章。这是一个关于vue 开发的webpack 架构会列举出来webpack 系列教程Webpack——令人困惑的地方Express结合Webpack的全栈自动刷新原创 2017-04-21 16:35:20 · 42567 阅读 · 4 评论 -
webpack的使用以及脱坑集合
使用process.argv 获取命令行使用的参数// 判断是否带production参数,production会压缩jsvar isprod = false;for (var i in process.argv) { if (process.argv[i] === "-p" || process.argv[i] === "--production") { ispr原创 2017-04-21 16:32:21 · 1484 阅读 · 0 评论 -
webpack入门(六)——html-webpack-plugin
html-webpack-plugin该插件可以简化创建调用webpack bundles的html文件。在每次编译后,文件名会包含有hash值的bundles 特别有用。你可以让插件为您生成一个HTML文件,也可以提供您自己使用lodash模板的模板,或使用您自己的装载机。 维护者:Jan Nicklas @jantimon。安装用npm安装这个插件$ npm i原创 2017-04-18 10:39:30 · 1456 阅读 · 0 评论 -
webpack入门(五)
resolveing一般问题的解决 1. –display-error-details 提供给你更多的出错信息。 2. 查问 配置文档关于 resolve 的部分。loader有它自己的 resolveing配置 resolveLoadernpm 链接的模块找不到它们的依赖。 node.js 模块的resolve步骤非常简单: 在模块的父文件夹中的node_modu原创 2017-04-18 10:38:16 · 481 阅读 · 0 评论 -
webpack入门(四)
什么是loaderloaders是你用在app源码上的转换元件。他们是用node.js运行的,把源文件作为参数,返回新的资源的函数。 例如,你可以用loaders告诉webpack加载 coffeeScript或者JSX。 loaders 特点: 1. 可以链式拼接。他们用在通向文件的管道,最后一个loader预期返回一个javascript,其它Loader可以返回任意格式给原创 2017-04-18 10:36:36 · 484 阅读 · 0 评论 -
webpack入门(三)
喂一个配置对象给webpack ,它就可以干活儿了。根据你用webpack的用法,有两种途径传入这个对象:CLI( 命令行)如果你用命令行,命令行会读取一个叫webpack.config.js(或者用 –config 选项传入的一个配置文件)的文件。这个文件应该导出一个配置对象,如下:module.exports = { // configuration};123原创 2017-04-18 10:35:16 · 556 阅读 · 0 评论 -
webpack入门(二)
安装可以用 npm 安装npm install webpack -g1注意: 这里全局安装是出于演示的目的。在真实的项目中,建议安装为你的项目依赖。开始首先,我们将只使用webpack的命令行界面学习基本webpack 。新建一个 模块化的javascript 项目cats.jsvar cats = ['dave', 'henry',原创 2017-04-18 10:34:03 · 611 阅读 · 0 评论 -
webpack入门(一)
如今的网站正在演化为web应用程序: 1. 越来越多的使用JavaScript。 2. 现代浏览器提供更广泛的接口。 3. 整页刷新的情况越来越少,甚至更多代码在同一个页面。(SPA)因此有很多代码在客户端! 一个体量庞大的代码库需要好好组织。模块系统提供代码库划分成模块的选项。模块系统风格目前有多个标准定义依赖和输出: 1. script标签(不要模块原创 2017-04-18 10:32:34 · 506 阅读 · 0 评论 -
webpack插件html-webpack-plugin详解
插件地址:https://www.npmjs.com/package/html-webpack-plugin这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在文件名中包含了 hash 值,而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件,也可以使用 lodash 模板加载生成的 bundles,或者自己加载原创 2017-04-17 17:18:02 · 11440 阅读 · 0 评论 -
解决webpack打包文件过大的问题
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。去除不必要的插件刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErro原创 2017-04-12 18:01:49 · 4770 阅读 · 0 评论 -
webpack详细配置解析
阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了Webpack的原创 2017-04-12 17:58:02 · 4645 阅读 · 0 评论 -
webpack部分配置解析
var webpack = require('webpack'); 2 var path = require("path"); 3 module.exports = { 4 // context: __dirname + "/src",//The base directory (absolute path!) 5 // 表示入口文件 6 cache: true,原创 2017-04-11 16:17:05 · 602 阅读 · 0 评论 -
Vue-cli单文件组件引入less、sass、css样式的不同方法
vue-cli中已经内置配置好了sass 以及lass的配置。如果需要的话直接下载两个模块就可以了,webpack它会根据 lang 属性自动用适当的加载器去处理。如果需要使用sass,则安装:npm install node-sass --save-devnpm install sass-loader --save-dev如果需要使用less,则安装:npm ins原创 2017-07-07 16:11:43 · 10240 阅读 · 0 评论