Скрипт Dev & Production генерируется, но html не может выбрать самый последний файл js - PullRequest
0 голосов
/ 11 ноября 2018

Я использую webpack 4 для создания файлов app.js и app.min.js из index.js и использую скрипт app.min.js в HTML. Я не использую файл webpack.config.js для этого. Я использую скрипты.

Вот мои сценарии package.json:

"build:dev": "webpack --mode development --module-bind js=babel-loader ./src/index.js --output ./dist/scripts/app.js",
"build:prod": "webpack --mode production --module-bind js=babel-loader ./src/index.js --output ./dist/scripts/app.min.js", 
"build:process": "npm-run-all build:dev build:prod"

И у меня есть файл .babelrc, который содержит следующее:

{
    "presets": [
        "@babel/preset-env"
    ]
}

Я не уверен, что мой сценарий использует babel-core или @ babel / preset-env или @ babel / core или babel-core или babel-preset-env, но они есть в моем списке зависимостей.

Мои зависимости ниже:

  "dependencies": {
    "babel-polyfill": "^6.26.0"
  },
  "devDependencies": {
    "@babel/core": "^7.1.5",
    "@babel/preset-env": "^7.1.5",
    "autoprefixer": "^9.3.1",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-minify-webpack-plugin": "^0.3.1",
    "babel-preset-env": "^1.7.0",
    "babel-register": "^6.26.0",
    "body-parser": "^1.18.3",
    "browser-sync": "^2.26.3",
    "compression": "^1.7.3",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.1",
    "csv-loader": "^3.0.2",
    "eslint": "^5.9.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-import": "^2.14.0",
    "express": "^4.16.4",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "jsdom": "^13.0.0",
    "localtunnel": "^1.9.1",
    "mini-css-extract-plugin": "^0.4.4",
    "node-sass": "^4.10.0",
    "nodemon": "^1.18.6",
    "npm-run-all": "^4.1.3",
    "postcss-cli": "^6.0.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "uglify-js": "^3.4.9",
    "uglifyjs-folder": "^1.5.1",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-dev-server": "^3.1.10",
    "webpack-hot-middleware": "^2.24.3",
    "xml-loader": "^1.2.1"
  }

Я генерирую app.js и app.min.js из index.js Файлы генерируются, и если я изменяю код в index.js, он обновляется в выходных файлах, но на html-странице, где я назвал его как

<script src="assets/scripts/app.min.js"></script>

Не обновляется и загружает старый код. Я смотрю один и тот же вывод кода после каждой новой производственной сборки, даже если он изменяется в app.min.js при каждом запуске сборки.

Если я использую эти сценарии:

"build:dev": "webpack --mode development"
"build:prod": "webpack --mode production"

Чем генерируется main.js, и если я вызываю этот main.js в html, он отражает изменения в каждом запросе на сборку.

Это простая среда JS - без фреймворка - я использую Yarn. Я попытался удалить файлы app.js и app.min.js. Я запустил «Обновление пряжи», «Очистка пряжи» и «Исправление аудита пряжи», но результат тот же.

Так почему я не вижу изменений в app.min.js для каждой сборки, если я пытаюсь изменить точки входа и выхода? И я не использую какой-либо сервер или localhost. просто откройте index.html, в котором есть app.min.js.

URL сценария здесь, на случай, если кто-нибудь захочет взглянуть на весь сценарий: https://github.com/techmynd/Webpack/tree/master/0-webpack-4/via-scripts

...