如何使用Webpack在HTML，CSS和JavaScript之间共享变量

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.html和index.js文件。在app文件夹中创建这些文件：

touch index.html index.js

Perfect! You’re all set.