随笔分类 - Webpack3.X
打包成一个文件，转换成JavaScript，优化优化和提升性能。
摘要：通过前面的学习，对webpack有了更深的认识，故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境，就算是一个小案例吧。 注：此处使用的开发工具是Webstorm。 1.安装webpack 1.1 新建文件夹 在安装webpack之前，我们先建立一个文件夹,并利用开发工
阅读全文
摘要：在webpack1或者webpack2版本中，若想在webpack环境中加载Json文件，则需要加载一个json-loader的loader进来的。但是在webpack3.x版本中，则不需要在另外引入了，也可使用Json。 下面以webpack3.x为例来说明在webpack中如何使用json。（主
阅读全文
摘要：工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档），这些静态资源有可能是文档，也有可能是一些额外的图片，而在打包时保留这些静态资源，直接打包到指定文件夹中。此时就需要使用到copy-webpack-plugin这个插件了。 copy-webpack-plugi
阅读全文
摘要：1.优化第一步--选用引入方式 在前面的学习中我们对于如何引入第三方类库（Jquery）推荐了两种方式，第一种是import引入的方式，第二种是ProvidePlugin插件。那两种引入方法有什么区别那? import引入方法：引用后不管你在代码中使用不使用该类库，都会把该类库打包起来，这样有时就会
阅读全文
摘要：在前面的学习中，我们一直使用webpack-dev-server充当（本地）服务器和完成打包任务，但是当出项目团队联合开发，共同使用一个服务器时，这时候我们需要实时进行打包以确保团队间能进行联调或者进行相关代码的合并工作时，每次保存后手动打包显然效率太低，我们需要的是代码发生变化后，只要保存，web
阅读全文
摘要：在日常的开发中，总避免不了引入第三方的框架，比如常用的JQuery，此节我们来学习一下如何优雅并正确的用webpack引入第三方库。 这里我们以第三方框架JQuery为例： 1、在入口文件中引入 1.1 安装JQuery 由于Jquery最终要在生产环境中使用，所以要使用–save进行安装。 1.2
阅读全文
摘要：搞个小例子便于学习： 具体操作为把上节中的webpack.config.js中的entry入口文件进行模块化设置，单独拿出来制作成一个模块。 1.在根目录新建一个config文件，然后新建webpack.entry.js文件，代码如下： webpack.entry.js： 2.entry模块中的代码
阅读全文
摘要：1. 概述 生产环境和开发环境所需依赖是不同： --开发依赖:就是开发中用到而发布时用不到的。在package.json里面对应的就是devDependencies下面相关配置。 --生产依赖: 就是比如我们的javascript使用了jquery,而我们最终的程序也需要这个包(最终程序正常运行需要
阅读全文
摘要：在程序开发中，调试程序是最频繁的，那使用了webpack后，所有的代码都打包到了一起，这给调试带来了困难，但是webpack在设计时就已经考虑好了这点，它支持生产Source Maps来方便我们的调试。 Source Maps能够提供将压缩文件恢复到源文件原始位置的映射代码的方式，在Chrome和F
阅读全文
摘要：`Babel`是什么？ 是一个编译 的平台，它的强大之处表现在可以通过编译达到以下目的： 使用下一代的javaScript代码(ES6,ES7….)，即使这些标准目前并未被当前的浏览器完全支持。 使用基于JavaScript进行了扩展的语言，比如React的JSX。 1.如何让webpack支持ba
阅读全文
摘要：在平时的项目开发中，我们会引入一些框架，比如： ，但是在项目中通常我们只使用它的一小部分，还有部分是冗余的。更有甚有时候需求更改，带来 结构的更改，这时候我们可能无暇关注 样式，会造成很多冗余的 。我们得想办法消除冗余的CSS,如果靠人工去剔除，吃力又容易出错,因此，此节我们来学习一下用webpac
阅读全文
摘要：什么是属性前缀 为了浏览器的兼容性，有时候我们必须加入 ,` ms o moz`这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。 例如： 使用插件来帮助我们进行前缀的自动添加，会大大提升我们的开发效率，提供编码效率。 此次是关于如何通过postcss loader给css3属性自动添加
阅读全文
摘要：1.安装sass打包的loader 这里需要 在项目目录下用npm安装两个包。node-sass和sass-loader，（也可以使用cnpm安装） 因为sass-loader依赖于node-sass，所以需要先安装node-sass 1.1 node-sass 1.2 sass-loader 注意
阅读全文
摘要：写在前面：在前面我们对css打包和分离进行了描述。此节我们开始学习如何对less文件进行打包和分离。 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。 Less知识学习 1.Le
阅读全文
摘要：补充，在前面的服务启动执行命令中，我们在package.json中的配置信息为： 该种方式在启动服务后还需自己访问相关url，这很不友好。此处我们新增一些配置，保证在我们启动服务后自动访问url并渲染，配置如下： 这样就实现了服务启动浏览器也会自动打开。 正文： 在前端开发中，我们常用img标签来引
阅读全文
摘要：前言： 在上一节当中，我们把小图片打包成Base64格式（打包到了js当中）。我们也算是对webpack对图片的打包有个基本了解。 本节我们准备把css从JavasScript代码中分离出来,这会遇到两个问题，一是如何分离，二是分离之后的图片路径问题，下面我们逐一破解。 1.把css从JavasSc
阅读全文
摘要：前言：此节的开展是在上一节的基础上进行的，（每一节都是从无到有编写关于此节的知识），最后会附上相关完整代码。上一节 CSS中的图片处理 1.新建images文件夹 在src目录下新建一个images文件夹，把需要的图片放入images文件夹。图片下载 2.新增标签 在index.html文件中增加一
阅读全文
摘要：从前面几节到现在，其实我们的项目结构是有问题的，因为我们直接把index.html文件放到了dist文件夹目录下。这肯定是不正确的，应该放到我们src目录下，然后打包到dist目录下，前面为了学习，才把index.html放到了dist目录下。 此节我们就来完成把开发环境中的html文件打包到我们的
阅读全文
摘要：实际开发中，在项目上线之前，我们编写的js代码是需要进行压缩的，我们可以采取压缩软件或者在线进行压缩，这不是我们的重点，在webpack中实现JS代码的压缩才是本节的核心。 通过webpack中可实现的JS代码压缩是通过插件的方式实现的 uglifyjs-webpack-plugin(JS压缩插件，
阅读全文
摘要：写在前面：为了兼容，此处的webpack版本为3.6.0、webpack-dev-server版本为2.9.7、css-loader版本为2.0.0、style-loader版本为0.23.1，若在下列安装后运行出错，一般是版本问题，可以安装此处的指定版本来解决。 1.前言 webpack把多个文件
阅读全文
浙公网安备 33010602011771号