Cloudflare DevelopersCD
Cloudflare Developers•2y ago
brauliopf

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'
};

Then, I also set Build Configurations:

Build command: npx webpack;
Build output directory: 
/

Root directory: /src
Was this page helpful?