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. 读自动驾驶激光雷达物体检测技术(Lidar Obstacle Detection)(2):点云滤波FilterCloud()函数
  2. 马斯克用二手火箭送宇航员上天,还成功避撞碎片!接下来载普通人,建月球基地...
  3. python命令式编程的概念,【Python】十分钟学会函数式编程
  4. 【Linux基础 01】Linux 下的文件系统
  5. Codeforces 235C Cyclical Quest (后缀自动机)
  6. SAP UI5 XML view lifecycle processing - defineMasterHeaderFooter
  7. 关于iOS原生条形码扫描,你需要注意的两三事
  8. MATLAB安装工具箱
  9. python 检测端口是否被占用
  10. Linux 内存管理之 SLUB分配器(3):Object分配逻辑
  11. 怎么用计算机拨号手机,教你如何用电脑连接手机自动打电话
  12. fpga烧写bin文件_FPGA中可执行文件:bit/bin/mcs/elf
  13. Pano2VR生成的HTML文件打开为黑屏
  14. 【教程】:Photoshop ps 图片批处理
  15. MyBatis 类型转换器
  16. 硬核!深信服春招3面,终获20k入职offer!
  17. 大小写字母转换(java大小写字母转换)
  18. writev遇到非阻塞IO
  19. 快来领取哔哩哔哩855张官方壁纸(2021年02月16日更新,附爬虫工具)
  20. Mac电脑的强大压缩工具——FastZip,加密压缩。

热门文章

  1. C++ Priemer目录索引
  2. Linux程序设计01:开发工具和开发平台
  3. 万字长文!2020-2021京东Java面试真题解析
  4. Codeforces 862D. Mahmoud and Ehab and the binary string 【二分】(交互)
  5. 基于xtrabackup GDIT方式不锁库作主从同步(主主同步同理,反向及可)
  6. Linux下查看txt文档
  7. JDBC 数据库连接操作——实习第三天
  8. 【Maven学习】Maven打包生成包含所有依赖的jar包
  9. cordova 项目添加splash启动界面
  10. OC中文件读取类(NSFileHandle)介绍和常用使用方法