腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

wfaceboss

专栏作者

283

文章

318905

阅读量

32

订阅数

(4/24) webpack3.x快速搭建本地服务和实现热更新

webpack javascript npm node.js 打包

（1）为了防止版本兼容问题，此处的webpack版本与之前的一致为：webpack@3.6.0。同时这里我们安装的webpack-dev-server版本是2.9.7版本。

2019-04-08

9580

(3/24)轻松配置 webpack3.x入口、出口配置项

webpack javascript 打包 ecmascript css

在上一节中我们只是简单的尝了一下webpack的鲜，对其有了基本的了解，对于上一节当中的打包方式，在实际开发中并不使用，而是通过webpack的配置文件的方式进行设置的，所以该节就在上一节的基础上学一下配置文件的大体结构以及入口、出口文件的配置。

2019-04-08

5430

(2/24) 快速上手一个webpack的demo

webpack node.js 打包 npm javascript

写在前面：该部分的安装都是基于windows系统的，且此处的webpack的版本为：3.6.0。

2019-04-08

6430

(1/24) 认识webpack

webpack 打包 javascript css typescript

（1）webpack是一个模块打包工具,它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

2019-04-08

3430

(10/24) 图片跳坑大战--处理html中的图片

webpack javascript 打包 npm html

该种方式在启动服务后还需自己访问相关url，这很不友好。此处我们新增一些配置，保证在我们启动服务后自动访问url并渲染，配置如下：

2019-04-08

1.4K0

(9/24) 图片跳坑大战--css分离与图片路径处理

webpack 打包 javascript css java

在上一节当中，我们把小图片打包成Base64格式（打包到了js当中）。我们也算是对webpack对图片的打包有个基本了解。

2019-04-08

8620

(6/24) 插件配置：轻松配置JS文件压缩

webpack javascript 打包

实际开发中，在项目上线之前，我们编写的js代码是需要进行压缩的，我们可以采取压缩软件或者在线进行压缩，这不是我们的重点，在webpack中实现JS代码的压缩才是本节的核心。

2019-04-08

2.1K0

(15/24) 为webpack增加babel支持

webpack babel.js npm 打包 ecmascript

Babel是什么？ Babel是一个编译JavaScript的平台，它的强大之处表现在可以通过编译达到以下目的：

2019-04-08

5280

(13/24) css进阶：自动处理css3属性前缀

单片机 http postcss css webpack

什么是属性前缀为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。例如：

2019-04-08

1.1K0

(12/24) css进阶：sass文件的打包和分离

css npm node.js 打包 webpack

这里需要在项目目录下用npm安装两个包。node-sass和sass-loader，（也可以使用cnpm安装）

2019-04-08

1.1K0

(11/24) css进阶：Less文件的打包和分离

webpack 打包 npm css javascript

写在前面：在前面我们对css打包和分离进行了描述。此节我们开始学习如何对less文件进行打包和分离。

2019-04-08

1.7K0

(19/24) webpack实战技巧：推荐使用的第三方类库打包方法

webpack javascript jquery 打包

在日常的开发中，总避免不了引入第三方的框架，比如常用的JQuery，此节我们来学习一下如何优雅并正确的用webpack引入第三方库。

2019-04-08

7980

(18/24) webpack实战技巧：快速入门webpack模块化配置

webpack javascript 打包

具体操作为把上节中的webpack.config.js中的entry入口文件进行模块化设置，单独拿出来制作成一个模块。

2019-04-08

3260

(16/24) webpack打包后的调试方法

打包 webpack javascript

在程序开发中，调试程序是最频繁的，那使用了webpack后，所有的代码都打包到了一起，这给调试带来了困难，但是webpack在设计时就已经考虑好了这点，它支持生产Source Maps来方便我们的调试。

2019-04-08

1.4K0

(24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

webpack javascript npm html 打包

通过前面的学习，对webpack有了更深的认识，故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境，就算是一个小案例吧。

2019-04-08

6990

(23/24) webpack实战技巧：如何在webpack环境中使用Json

webpack json 打包 javascript

在webpack1或者webpack2版本中，若想在webpack环境中加载Json文件，则需要加载一个json-loader的loader进来的。但是在webpack3.x版本中，则不需要在另外引入了，也可使用Json。

2019-04-08

8100

(22/24) webpack实战技巧：静态资源集中输出

webpack 打包 javascript npm

工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档），这些静态资源有可能是文档，也有可能是一些额外的图片，而在打包时保留这些静态资源，直接打包到指定文件夹中。此时就需要使用到copy-webpack-plugin这个插件了。

2019-04-08

1.5K0

(21/24) webpack实战技巧：webpack对三方类库的优化操作

打包 webpack jquery javascript vue.js

1.优化第一步--选用引入方式在前面的学习中我们对于如何引入第三方类库（Jquery）推荐了两种方式，第一种是import引入的方式，第二种是ProvidePlugin插件。那两种引入方法有什么区别

2019-04-08

4620

(20/24) webpack实战技巧：watch实现热打包和添加代码备注

打包 webpack javascript

在前面的学习中，我们一直使用webpack-dev-server充当（本地）服务器和完成打包任务，但是当出项目团队联合开发，共同使用一个服务器时，这时候我们需要实时进行打包以确保团队间能进行联调或者进行相关代码的合并工作时，每次保存后手动打包显然效率太低，我们需要的是代码发生变化后，只要保存，webpack自动为我们进行打包。这就得谈到本节中说到的watch工具了。

2019-04-08

5860

(17/24) webpack实战技巧：生产环境和开发环境并行设置,实现来回切换

node.js jquery npm webpack javascript

--开发依赖:就是开发中用到而发布时用不到的。在package.json里面对应的就是devDependencies下面相关配置。

2019-04-08

7130

点击加载更多

社区活动

RAG七天入门训练营

鹅厂大牛手把手带你上手实战

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态