文档地址:链接 文档:https://doc.webpack-china.org/configuration/ 慕课网地址:链接 参考地址:链接 1.webpack是一个前端打包工具,特点:代码分割(Code Splitting),Loaders,模块热更新 2.npm init npm install webpack --save-dev require('./world.js');//common.js方式 一.css-loader将css文件打包进js中,style-loader将js中的…

之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 这次我还是在react中来使用它.我的react界面是单页面的应用 首先你的项目的根目录下要有一个package.json文件,来进行安装一下相应的依赖 package.json如下 "devDependencies": { "css-loader": "^0…

webpack集成了模块加载和打包等功能 ,这两年在前端领域越来越受欢迎.平时一般是用requirejs.seajs作为模块加载用,用grunt/gulp作为前端构建.webpack作为模块化加载兼容了amd/cmd模式,并且作为模块化的资源可以是js/css/image  coffeescript/sass/less  ES2015 modles TypeScript 等功能非常强大,作为前端构建工具还可以和grunt/gulp配合一起使用. 配置文件webpack.config.js也是非常…

此为第一篇主要是webpack入门笔记: http://if-true.com/2015/10/16/webpack-tutorial-translate.html…

为什么需要区分环境 在开发网页的时候,一般都会有多套运行环境,例如: 在开发过程中方便开发调试的环境. 发布到线上给用户使用的运行环境. 这两套不同的环境虽然都是由同一套源代码编译而来,但是代码内容却不一样,差异包括: 线上代码被通过 4-8 压缩代码 中提到的方法压缩过. 开发用的代码包含一些用于提示开发者的提示日志,这些日志普通用户不可能去看它. 开发用的代码所连接的后端数据接口地址也可能和线上环境不同,因为要避免开发过程中造成对线上数据的影响. 为了尽可能的复用代码,在构建的过程中需要根据…

浏览器从服务器访问网页时获取的 JavaScript.CSS 资源都是文本形式的,文件越大网页加载时间越长. 为了提升网页加速速度和减少网络传输流量,可以对这些资源进行压缩. 压缩的方法除了可以通过 GZIP 算法对文件压缩外,还可以对文本本身进行压缩. 对文本本身进行压缩的作用除了有提升网页加载速度的优势外,还具有混淆源码的作用. 由于压缩后的代码可读性非常差,就算别人下载到了网页的代码,也大大增加了代码分析和改造的难度. 下面来一一介绍如何在 Webpack 中压缩代码. 压缩 JavaSc…

webpack 相关插件及作用: table th:first-of-type { width: 200px; } table th:nth-of-type(2) { width: 140px; } 插件 默认启用 作用 UglifyJsPlugin production模式时 压缩代码. DefinePlugin 创建全局常量用于编译时解析 NoEmitOnErrorsPlugin production模式时 如果没有使用NoEmitOnErrorsPlugin,当发生错误时,就会重载一个有错…

申请免费的HTTPS证书相关资料 参考资料: HTTPS 检测 苹果ATS检测 什么是ECC证书? 渠道2: Let's Encrypt 优点 缺点 Let's Encrypt 的是否支持非80,443的其它端口来验证? 申请工具4: acme.sh 优点 缺点 常用命令 如何申请证书? 将子域名的验证权限用别的DNS服务商处理? 如何通过 443 端口申请证书? 如何与IIS配合以便能正确签发证书? DNSPod 服务提供商 泛域名 [野卡] 申请记录: 申请证书时出现`SERVFAIL lo…

webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, 通过 import只用到了两个. 那么剩余的 8个, 会剔除掉没有用到的 死代码 util.js function a() {} function b() {} function c() {} function d() {} export default { a, b, c, d } index.j…

学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1.创建文件夹 - yarn init -y (生成package.json) -在package.json里面写好 "scripts": { "dev": "webpack-dev-server --config webpack.config.js",…