包裹构建命令不起作用

Question

I am following the basic tutorial for Parcel to bundle js, css and image files.

My file structure

  dist
  node_modules
  src
    - index.html
    - style.css
    - index.js
    - somemodule.js

When I run parcel ./src/index.html a server is started and the website is displayed correctly. According to the tutorial you can finalize the build using parcel build index.js . I expected to get this output:

  dist
    - style.css
    - index.js
    - index.html

But instead, after running parcel build index.js I get this output:

  dist
    - 4wyd98y98790.css
    - 948y59hslas8.js

What could possibly be going wrong?

Answer 1

The Parcel Bundler output directory is dist by default, but you can specify an output directory by setting option ( -d ).

eg parcel build src/index.html -d build --public-url . You will get the final static files in the build directory.

Answer 2

The tutorial may say parcel build index.js , but you should run parcel build ./src/index.html . The entry point of your app is index.html.

Answer 3

Since some commands seem to change over time, I'm going to share here the set up that worked for me up to date.

 "scripts": {
    "start": "parcel src/index.html -p 3000 --open",
    "build:parcel": "parcel build ./src/index.html --public-url ./ --no-source-maps",
    "build": "npm run clean && npm run build:parcel",
    "clean": "rm -rf dist/*"
  }

And I run the script using npm run-script build

My tree project was:

project
    |dist
      |OUTPUT FILES
    |src
      |OTHER INPUT FOLDERS
      |index.html
    package.json

Answer 4

尝试删除旧的构建内容，例如dist文件夹并再次构建