Earlier this week, I read an article explaining how CSS-in-JS slows down the rendering of some React apps and how static CSS is faster. But CSS-in-JS is very popular because, among other features, you can style dynamically using JavaScript variables.

本周初,我读了一篇文章,解释CSS-in-JS如何减慢某些React应用的渲染速度以及静态CSS如何更快。 但是CSS-in-JS非常受欢迎,因为除其他功能外,您可以使用JavaScript变量动态设置样式。

In this tutorial, I will show you how to recreate this perk in any of your web projects thanks to Webpack (and I assume you know how to use it). To start, we want Webpack to bundle our source files into a static dist/ folder .

在本教程中,我将向您展示如何借助Webpack在任何Web项目中重新创建此特权(并且我假设您知道如何使用它)。 首先,我们希望Webpack将源文件捆绑到一个静态dist/文件夹中。

You can check out the source code here.

您可以在此处查看源代码 。

1.设置我们的应用 (1. Set up our app)

无聊的部分 (The boring part)

Create a folder for this tutorial, open your terminal, and init a project:

为本教程创建一个文件夹,打开您的终端,并启动一个项目:

npm init -y

First things first, if it’s not already done, install node.js and Webpack:

首先,如果尚未完成,请安装node.js和Webpack :

npm install webpack webpack-cli --save-dev

Let’s create a script in our package.json that tells Webpack to use our config file:

让我们在package.json中创建一个脚本,该脚本告诉Webpack使用我们的配置文件:

"scripts": {"build": "webpack --config webpack.config.js"}

At the root of your folder, create a globals.js file, where our shared variables will be stored:

在文件夹的根目录中,创建一个globals.js文件,其中将存储我们的共享变量:

module.exports = {myTitle: 'Hello freeCodeCamp!',myColor: '#42ff87',
};

The Webpack config file looks like this (webpack.config.js). Create it at the root of your folder:

Webpack配置文件看起来像这样( webpack.config.js )。 在文件夹的根目录下创建它:

module.exports = {entry: __dirname + '/app/index.js',output: {path: __dirname + '/dist',filename: 'index_bundle.js'},
};

Our source code will be located in an app folder. Create it like this:

我们的源代码将位于app文件夹中。 像这样创建它:

mkdir app && cd app

You’ll need index.html and index.js files at this point. Create those files in the app folder:

此时,您将需要index.htmlindex.js文件。 在app文件夹中创建这些文件:

touch index.html index.js

Perfect! You’re all set.

如何使用Webpack在HTML,CSS和JavaScript之间共享变量相关推荐

  1. 通过构建城市来解释HTML,CSS和JavaScript之间的关系

    by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) 通过构建城市来解释HTML,CSS和JavaScript之间的关系 (The relationship betw ...

  2. 浅析HTML、CSS、JavaScript之间的联系与区别

    HTML.CSS.JavaScript是前端学习非常重要的内容.Web可以被看做是一个有生命的物体或人体,HTML可以视为骨骼和肌肉,CSS可以视为皮肤和毛发,而JavaScript可以视为受一定支配 ...

  3. 解耦HTML、CSS和JavaScript

    当前在互联网上,任何一个稍微复杂的网站或者应用程序都会包含许多HTML.CSS和JavaScript.随着互联网运用的发展以及我们对它的依赖性日益增加,设定一个关于组织和维护你的前端代码的计划是绝对需 ...

  4. html与css与php的关系,HTML、PHP、CSS、JS之间的关系

    23:02:06 2019-08-05 自己要搭建网站 虽然可以下载大佬的界面 但至少要懂一点web开发的知识 我现在感觉像个憨憨 啥都不明白 HTML负责放你需要显示的内容, 而PHP可以输出可变化 ...

  5. javascript mysql php_HTML、CSS、JavaScript、PHP、 MySQL 的学习顺序是什么?

    下面是前端学习路线以及学习资源推荐: 目录 1. HTMLDOCTYPE HTML, XHTML, XML 差异性 HTML5 新特性 及 语义化标签 meta, img, script 等标签及其标 ...

  6. python和html可以同时学吗_web前端入门:css+html5+javascript同时学可以吗?

    HTML+CSS+JS是前端基础核心知识,肯定是都要学的.在web前端中,HTML是结构标准,CSS是样式标准,JS是行为标准,三者缺一不可.说的直白点,HTML就是骨架,CSS就是皮肤,JS就是灵魂 ...

  7. 国内最火的 HTML、CSS、JavaScript 开源项目 Top 榜,你知多少?

    对于开发者而言,想要着手前端开发,HTML.CSS 和 JavaScript 是三项必备的基础技能.而如何事半功倍地掌握好这些知识?通过了解当下火热的开源项目不乏为最佳学习姿势.本文盘点国内评分最高且 ...

  8. html和css页面自动缩小和放大,如何使用CSS和Javascript来缩小HTML?

    编辑2(2017年2月22日):现在,最好的工具可以减少您的资产(而且通过添加装载程序和插件,还有更多的工具)肯定是 Webpack. 将所有.css文件移动到一个文件中并将其缩小的配置示例: { t ...

  9. webpack加载css样式 ----css相关loader

    一.什么是loader? webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力. loader 让 webpack 能够去处理其他类型的文件,并 ...

最新文章

  1. Springboot 原理篇(一)
  2. 实验十——一维数组的定义及引用
  3. PAT甲级题解-1100. Mars Numbers (20)-字符串处理
  4. 崩溃!如何面对令人脱发的老代码?
  5. DC概论三之setup time 与 hold time 之二
  6. 【技术美术图形部分】纹理基础2.0-凹凸映射
  7. 获取文件名,文件名后缀以及elementui多张图片回显
  8. 两年软件开发工作总结及未来展望
  9. .Net 发送邮件
  10. [英语] 自建专业词典
  11. JAVA图形小动画之简单行星运动
  12. 域名解析暂时失败(二)
  13. 每日一皮:朋友圈集赞原来还可以这样...
  14. 计算机保密系统,计算机保密系统
  15. Python报错不要慌,这三个关键词帮你解决问题!
  16. EBS 采购订单接口导入
  17. SQLSERVER 集合处理——INTERSECT
  18. 照片变古装软件叫什么?好用的古装app拍照软件分享
  19. 牛皮纸定格动画怎么制作?AE教程来了
  20. 有关集合转数组与数组转集合的坑

热门文章

  1. Gdb 调试core文件详解
  2. python烟花表白_python炫酷烟花表白源代码
  3. SVN Cannot merge into a working copy that has local modifications
  4. SQLite学习手册
  5. RavenDB:基于Windows/.NET平台的NoSQL数据库
  6. jquery 学习之一 对象访问
  7. 最新 Unity3D鼠标滑轮控制物体放大缩小 [
  8. Java网络01基本网络概念
  9. vue中的data用return返回
  10. mongdb集群3.4 shard 模式