Last active
August 1, 2019 19:15
-
-
Save ecklf/e3d75397adeb9a22b81df90f65594d94 to your computer and use it in GitHub Desktop.
webpack config - figma plugin + tailwindcss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin"); | |
const HtmlWebpackPlugin = require("html-webpack-plugin"); | |
const path = require("path"); | |
module.exports = (env, argv) => ({ | |
mode: argv.mode === "production" ? "production" : "development", | |
// This is necessary because Figma's 'eval' works differently than normal eval | |
devtool: argv.mode === "production" ? false : "inline-source-map", | |
entry: { | |
ui: "./src/ui.tsx", // The entry point for your UI code | |
code: "./src/code.ts" // The entry point for your plugin code | |
}, | |
module: { | |
rules: [ | |
// Converts TypeScript code to JavaScript | |
{ test: /\.tsx?$/, use: "ts-loader", exclude: /node_modules/ }, | |
// Enables including CSS by doing "import './file.css'" in your TypeScript code | |
{ | |
test: /\.css$/, | |
use: [ | |
"style-loader", | |
{ loader: "css-loader", options: { importLoaders: 1 } }, | |
{ | |
loader: "postcss-loader", | |
options: { | |
ident: "postcss", | |
plugins: [require("tailwindcss"), require("autoprefixer")] | |
} | |
} | |
] | |
}, | |
// Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI | |
{ | |
test: /\.(png|jpg|gif|webp|svg|zip)$/, | |
loader: [{ loader: "url-loader" }] | |
} | |
] | |
}, | |
// Webpack tries these extensions for you if you omit the extension like "import './file'" | |
resolve: { extensions: [".tsx", ".ts", ".jsx", ".js"] }, | |
output: { | |
filename: "[name].js", | |
path: path.resolve(__dirname, "dist") // Compile into a folder called "dist" | |
}, | |
// Tells Webpack to generate "ui.html" and to inline "ui.ts" into it | |
plugins: [ | |
new HtmlWebpackPlugin({ | |
template: "./src/ui.html", | |
filename: "ui.html", | |
inlineSource: ".(js)$", | |
chunks: ["ui"] | |
}), | |
new HtmlWebpackInlineSourcePlugin() | |
] | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment