wepack
~倾半世阳光
生活的乐趣还在于,你昨日的最大痛楚,极可能造就你明日最大力量。
展开
-
webpack入门到进阶(一)安装
前端技术要求:node,webpack的安装等使用需要你有node基础。 用webpack打包项目已经有一年半的 时间了, 我也试试总结一下,然后,进阶一下,做下webpcak的使用优化。 首先从最基础的地方讲起,介绍一下webpack是做什么的? webpack 翻译就是网站打包工具,可以打包的资源可以参考:https://webpack.js.org/; 可以看到:webpack可以将...原创 2019-05-27 11:31:45 · 327 阅读 · 3 评论 -
博客搬家,地址:
www.chenxiboy.top https://www.chenxiboy.top/article/webpack/ webpak进阶内容已经更新最新的博客地址啦。csdn的人太少了。原创 2019-07-18 14:31:34 · 217 阅读 · 1 评论 -
webpack入门到进阶(六) - Plugins
本篇文章,介绍几个在webpack常用的插件安装使用。 html-webpack-plugin 这个插件的作用,应该大家都很熟悉,将以一个index.html为模板打包成dist目录下一个index.html文件。 可以帮助我们处理页面里面的注释删除,空格符删除等功能,节省项目大小。 安装: npm install --save-dev html-webpack-plugin ...原创 2019-07-04 14:55:57 · 320 阅读 · 0 评论 -
webpack入门到进阶(七)- devtool
webpack配置devtool 此选项控制是否生成,以及如何生成 source map。 一,为什么要控制source map的生成? 我们在开发的过程中,难免会遇到项目运行的报错信息,我们习惯于经常打开控制台,找到报错的文件,查看报错区域内容,方便我们更好的开发项目,,因此sourceMap出现了,它就是为了解决不好调式代码问题的。 二,选择何种source map格式呢? ...原创 2019-06-27 15:12:49 · 707 阅读 · 6 评论 -
webpack入门到进阶(五) - loader介绍下篇
我们继续介绍几个常用的loader的使用以及作用; Babel介绍使用 babel 是一个javascript编辑器。可以看下bable官网介绍:https://www.babeljs.cn/。 我们如今在项目中往往都会使用ES6语法,如:箭头函数,class声明等等,但是低版本的浏览器并不兼容。我们使用webpack打包的时候,webpack也不能帮助我们直接做兼容转化,此时,我们就...原创 2019-06-24 10:32:51 · 262 阅读 · 0 评论 -
webpack入门到进阶(四) - loader介绍上篇
因为loader我想多分享几个,所以就分为上下两篇了。哈哈哈 loader loader 用于对模块的源代码进行转换。loader 可以使你在import或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为...原创 2019-06-21 10:57:22 · 427 阅读 · 8 评论 -
webpack入门到进阶(三)- devServer
devServer安装使用 我们在上篇文章提及到:在webpack.config.js中配置watch:true,可以检测文件改变,进行打包。还有本篇文章介绍的devServer可以实现。 本篇文章,我们介绍下devServer的安装配置,使用devServer进行项目开发。(更推荐使用devServer)devServer为你提供了一个简单的 web server,并且具有 live ...原创 2019-06-05 10:22:14 · 4997 阅读 · 1 评论 -
webpack入门到进阶(二)配置
当webpack安装好以后,我们就要考虑webpack配置使用了。 webpack配置 在webpack官网中,配置文件建议是webpack.config.js。 当然,你也可以更改,打开node_modules/webpack-cli下的config-yargs.js。 你可以找到这一行代码: defaultDescription: "webpack.config.js o...原创 2019-05-28 10:26:04 · 1089 阅读 · 2 评论 -
webpack的入门到进阶(全部整理)
webpack从入门到进阶 第1章 课程介绍 学什么 webpack官网 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 [外链图片转存失...原创 2019-07-18 14:35:40 · 895 阅读 · 0 评论