Я использую 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