We have implemented the obfuscator as per https://github.com/javascript-obfuscator/webpack-obfuscator.
We have only three subfolders in our project under the root: node_modules, src, dist. We expect these to all be non-obfuscated with the appropriate exclude in plugin, so the subsequent code in the bundle is not obfuscated at all. (This is, of course, just an intermediate step to make sure the exclude works at all. In the end, we just want to exclude node_modules from obfuscation).
The versions javascript-obfuscator (4.0.0) and webpack-obfuscator (3.5.1) are both the latest and should therefore be compatible?!
package.json
{
"name": "metrolyzer_npm",
"version": "1.0.0",
"description": "includes information about all modules required for the Metrolyzer",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"build": "webpack"
},
"repository": {
"type": "git",
"url": "https://git.jetbrains.space/else42/metro/metrolyzer.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"autoprefixer": "^10.4.13",
"bootstrap": "5.0.2",
"css-loader": "^6.7.2",
"d3": "^7.7.0",
"dat.gui": "0.7.7",
"javascript-obfuscator": "^4.0.0",
"jquery": "3.6.0",
"postcss-loader": "^7.0.2",
"sass": "^1.56.1",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"three": "0.123.0",
"three-orbit-controls": "^82.1.0",
"three.meshline": "^1.4.0",
"troika-three-text": "0.45.1",
"xlsx": "0.10.8"
},
"keywords": [],
"devDependencies": {
"webpack": "^5.75.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1",
"webpack-obfuscator": "^3.5.1"
}
}
webpack.config.js
const path = require('path');
var WebpackObfuscator = require('webpack-obfuscator');
module.exports = {
mode: 'production',
entry: {
index: './src/index.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '',
sourceMapFilename: "[name].js.map" // Allows us to get more detailed information about the source of an error
},
devtool: "source-map", // Allows us to get more detailed information about the source of an error
optimization: {
minimize: false, // Minimization should enabled for production
},
plugins: [
new WebpackObfuscator({rotateStringArray: true}, ['*node_modules*','*src*','*dist*'])
],
module: {
rules: [
{
test: /\.(sass|css)$/,
use: [ // The use of a loader is required because we are using .css from bootstrap
'style-loader',
'css-loader',
]
},
{
test: /\.js$/,
exclude: [
path.resolve(__dirname, 'node_modules')
],
enforce: 'post',
use: {
loader: WebpackObfuscator.loader,
options: {
rotateStringArray: true
}
}
}
]
}
};
Update: We were able to reproduce and resolve the problem. Two things had to be changed in order to make the exclusion of folders/files work.
Removing the line: new WebpackObfuscator({rotateStringArray: true}, ['*node_modules*','*src*','*dist*']) from the variable plugins. We suspect this to be redundant.
Use path.join() instead of path.resolve() when specifying which folders/files should be excluded. path.resolve() was resulting in C:\node_modules rather than C:\Users\ ... \ ... \ ... \node_modules\
After implementing these changes our issue was resolved. Below is the resulting webpack.config.js. Changes to the config other than the ones described in 1. and 2. can be ignored.
webpack.config.js
const path = require('path');
const WebpackObfuscator = require('webpack-obfuscator');
module.exports = {
mode: 'production',
entry: {
index: './src/index.js',
},
resolve: {
fallback: {
"stream": require.resolve("stream-browserify"),
"buffer": require.resolve("buffer")
}
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '',
sourceMapFilename: "[name].js.map"
},
devtool: "source-map",
optimization: {
//minimize: true,
module: {
rules: [
{ test: /\.(js|mjs)$/,
exclude: [
path.join(__dirname, '/node_modules/'),
path.join(__dirname, '/src/example/gui.js'),
],
enforce: 'post',
use: {
loader: WebpackObfuscator.loader,
options: {
reservedStrings: [ '\s*' ],
rotateStringArray: true,
identifierNamesGenerator: 'mangled-shuffled',
}
}
},
{ test: /\.(sass|css)$/,
use: [
'style-loader',
'css-loader',
]
}
]
}
};
Related
I have my webpack watch all my files using watch: true in webpack.config.js.
I run webpack using npm run build through this code in package.json:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
Now when I use npm run build, it only compiles every time I save package.json. How do I change it so that it compiles every time I save a file in all of my folders?
Full code
package.json
{
"name": "testproj",
"version": "1.0.0",
"description": "",
"main": "code.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "Figma",
"license": "MIT",
"devDependencies": {
"#figma/plugin-typings": "*",
"#types/node": "^16.7.1",
"css-loader": "^6.2.0",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^5.3.2",
"style-loader": "^3.2.1",
"ts-loader": "^9.2.5",
"typescript": "^4.3.5",
"url-loader": "^4.1.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {
"#types/react": "^17.0.19",
"#types/react-dom": "^17.0.9",
"figma-plugin-ds": "^1.0.1",
"react": "^17.0.2",
"react-dev-utils": "^11.0.4",
"react-dom": "^17.0.2"
}
}
webpack.config.js
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
module.exports = (env, argv) => ({
watch: true,
watchOptions: {
ignored: /node_modules/,
},
mode: argv.mode === 'production' ? 'production' : 'development',
devtool: argv.mode === 'production' ? false : 'inline-source-map',
entry: {
ui: './src/ui.tsx',
code: './src/code.ts',
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.svg/,
type: 'asset/inline'
}
]
},
resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new webpack.DefinePlugin({
'global': {}
}),
new HtmlWebpackPlugin({
inject: "body",
template: './src/ui.html',
filename: 'ui.html',
chunks: ['ui']
}),
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
],
})
Use the command in your package.json
webpack --watch --config webpack.config.js
To fix this, add cache: false in the HTMLWebpackPlugin object argument in webpack.config.js:
plugins: [
new webpack.DefinePlugin({
'global': {}
}),
new HtmlWebpackPlugin({
inject: "body",
template: './src/ui.html',
filename: 'ui.html',
chunks: ['ui'],
cache: false // Add this line
}),
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
],
There is only one line in my index.ts file.
export * from "./foo"
There is only one line in foo.ts file too.
export const foo = ()=> 'bar'
I'm only using default config from "npx webpack-cli init".
Only "mode" and "output" are edited.
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.ts',
output:{
filename:'index.js'
},
plugins: [new webpack.ProgressPlugin()],
module: {
rules: [{
test: /\.(ts|tsx)$/,
loader: 'ts-loader',
include: [path.resolve(__dirname, 'src')],
exclude: [/node_modules/],
options:{
transpileOnly: true
}
}]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
optimization: {
minimizer: [new TerserPlugin()],
splitChunks: {
cacheGroups: {
vendors: {
priority: -10,
test: /[\\/]node_modules[\\/]/
}
},
chunks: 'async',
minChunks: 1,
minSize: 30000,
name: false
}
},
target:"web"
}
And here is my tsconfig.js
{
"compilerOptions": {
"allowSyntheticDefaultImports": false,
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"allowJs": false,
"sourceMap": true
}
}
Here is my package.json
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#webpack-cli/init": "^1.0.3",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"terser-webpack-plugin": "^5.0.3",
"ts-loader": "^8.0.12",
"typescript": "^4.1.2",
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0"
}
}
With these when I run build
"build": "webpack"
I got an empty index.js in "dist/index.js".
What am I missing?
I think the problem is here all about to remove unused export of webpack. Keep in mind that webpack is able to do this unless the input code passed to it must be esm style as same as you've done by configured module: "es6".
In case of exporting as library, you might have to tell webpack to build as library by specifying target or even could add a name:
webpack.config.js
{
output: {
library: "yourLibName",
libraryTarget: "umd",
filename: "index.js"
},
}
So i'm pretty new to Webpack, and I finally got the webpack-dev-server running. It recompiles and refreshes page on save, and it shows changes to my JS code. But it doesn't seem to work well with my SASS or HTML files?
On a fresh start, it will show a change if I make it, but if I undo that change, it doesn't update. Looking around other posts, I tried added the "--hot" flag, and adding "inline" to my devServer in webpack config. This got it working for a style change, but won't show deleted or undone changes.
This is my package.json...
{
"name": "testproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
"watch": "webpack --watch",
"server": "webpack-dev-server --open --hot"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.2",
"cssnano": "^4.1.10",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"postcss-loader": "^3.0.0",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.3"
}
}
This is my webpack.config...
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const isDevelopment = process.env.NODE_ENV !== 'production';
const webpack = require('webpack');
module.exports = {
entry: './src/javascript/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new MiniCssExtractPlugin({
filename: 'bundle.css'
}),
new HtmlWebPackPlugin({
template: './dist/index.html',
filename: 'index.html'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
inline: true,
hot: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader',
options: {
implementation: require('sass')
}
}
]
},
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images'
}
}
]
},
{
test: /\.(woff|woff2|ttf|otf|eot)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts'
}
}
]
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: !isDevelopment }
}
]
}
]
},
// Default mode is Production. Uses minifying
mode: 'development'
};
I must have something wrong or out of place?
Any help or tips would be appreciated. Will provide additional info if needed.
Thanks in advance!
I found a solution by adding "watchContentBase" to my devServer.
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
**watchContentBase: true,**
inline: true,
hot: true
}
After webpack command webpack catch all files and finish build in dist folder, but react component doesn't work. I don't understand why. My configs attached:
package.json
{
"name": "name",
"version": "1.0.0",
"description": "Example",
"main": "index.js",
"scripts": {
"watch": "webpack --progress --watch",
"start": "webpack-dev-server --open",
"build": "webpack"
},
"devDependencies": {
"autoprefixer": "^7.1.3",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.5.3",
"optimize-css-assets-webpack-plugin": "^3.1.1",
"postcss-loader": "^2.0.6",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
},
"browserslist": [
"last 15 versions",
"> 1%",
"ie 8",
"ie 7"
]
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: ['./app/app.js', './app/sass/app.sass'
],
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "postcss-loader"]
}),
},
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'sass-loader'])
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: 'img/[name].[ext]', // check the path
}
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: {
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]', // check the path
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Build version'
}),
new ExtractTextPlugin({
filename: 'css/app.min.css',
allChunks: true,
}),
new OptimizeCssAssetsPlugin()
]};
babel.rc
{"presets":["es2015", "react"]}
app file system:
app/
components/
fonts/
img/
sass/
app.js
index.html
index.html has a <div> with id="app" and script with src="app.js" in the body.
Move react and react-dom to dependencies instead of devDependecies in your package.json then try to build again.
Check this answer for an explanation:
Bower and devDependencies vs dependencies
Your react and react-dom packages are dependencies try moving them there.
Try modifying your webpack config file to some like this:
module.exports = {
entry: [
'./app/app.js',
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
publicPath: '/dist',
sourceMapFilename: 'bundle.map',
},
devtool: process.env.NODE_ENV === 'production' ? undefined : 'cheap-module-eval-source-map',
resolve: {
modules: ['node_modules', './app/components'],
extensions: ['.js', '.jsx'],
},
module: {
loaders: [
{
test: /(\.js$|\.jsx$)/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['react', 'es2015'],
},
},
],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
],
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
minimize: true,
compressor: {
warnings: false,
},
})
],
};
Add other necessary rules you need to the rules array.
With this config though, you don't need the .babelrc file as everything is all in place.
I am trying to use node_modules in the browser via WebPack. I've read the tutorial and beginning steps but am stuck.
I have used webpack to generate bundle.js with the webpack config below and upon going to my index.html in Chrome browser I get the error:
Uncaught ReferenceError: require is not defined
at Object.<anonymous> (bundle.js:205)
What additional steps do I have to do to get the browser to recongnize require?
index.html
<script src="bundle.js"></script>
<button onclick="EntryPoint.check()">Check</button>
index.js
const SpellChecker = require('spellchecker');
module.exports = {
check: function() {
alert(SpellChecker.isMisspelled('keng'));
}
};
package.json
{
"name": "browser-spelling",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"node-loader": "^0.6.0",
"spellchecker": "^3.3.1",
"webpack": "^2.2.1"
}
}
webpack.config.js
module.exports = {
entry: './index.js',
target: 'node',
output: {
path: './',
filename: 'bundle.js',
libraryTarget: 'var',
library: 'EntryPoint'
},
module: {
loaders: [
{
test: /\.node$/,
loader: 'node-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
};
In your webpack.config.js you specified that you want to build this bundle for Node.js:
target: 'node',
And webpack decided to keep require calls, because Node.js supports them. If you want to run it in a browser, you should use target: 'web' instead.
In the new "webpack": "^5.75.0", Required has been changed to rules
webpack.config.js
const path = require("path");
var webpack = require("webpack");
module.exports = {
entry: "./index.js",
target: "node",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.node$/,
use: "node-loader",
},
{
test: /\.js$/,
exclude: /node_modules/,
},
],
},
};
package.json
{
"name": "arrybsc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^5.2.3",
"lodash": "^4.17.21"
},
"devDependencies": {
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
}
}