Cloudflare Developers•5w ago

Setting up build and deployment with webpack

Hello friends. I am developing a simple web application, with HTML code and some js functions. I am able to load the page correctly with a single js with dummy functions, but when I add some imports and use a bundler, my app can't find the bundle file. I want to import js files, to organize my code and use some third-party APIs. I am using Webpack to create a bundle file, but I am not succeeding. I keep getting the error below. Any suggestions? Do I neet to create a wrangler.toml? How to do that? Thank you very much.

The resource from “https://agent-sandbox.pages.dev/public/bundle.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

My application code and the webpack.config.js are in a "./src" directory. This is my webpack.config.js:

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: './bundle.js',
        path: path.resolve(__dirname, '../public'),
    },
    mode: 'development'
};

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: './bundle.js',
        path: path.resolve(__dirname, '../public'),
    },
    mode: 'development'
};

Then, I also set Build Configurations: Build command: npx webpack; Build output directory: / Root directory: /src

1 Reply

brauliopf•5w ago

I load the script on my body tag, with: <script type="text/javascript" src="../public/bundle.js"></script> Thank you

Gaming

Programming

Setting up build and deployment with webpack