javascript — конфигурация горячей перезагрузки веб-пакета vue.js, необходимая для пользовательской настройки сборки

webpack vue.js: горячая перезагрузка конфигурации, необходимая для пользовательской настройки сборки

У меня есть пользовательская настройка сборки для расширения chrome, которая вставляет iframe на веб-страницы, и этот iframe создается с использованием vue.js. Точкой входа для создания этого iframe является src/popup/js и он должен выводиться в dist/popup .

Все это прекрасно работает, но я не знаю, как настроить горячую перезагрузку, чтобы я мог видеть изменения в браузере, как только я внесу изменения в код. В настоящее время, когда я запускаю шаг build , все готово и помещается в папку dist , а iframe, который я хочу перезагрузить, это файл dist/popup/popup.html .

Это мой package.json :

 { "name": "extensionname", "version": "1.0.17", "description": "Chrome Extension", "scripts": { "lint": "eslint --ext .js,.vue src", "prettier": "prettier "src/**/*.{js,vue}"", "prettier:write": "npm run prettier -- --write", "build-zip": "node scripts/build-zip.js", "build:prod": "cross-env NODE_ENV=production TARGET_ENV=production webpack --hide-modules {amp}amp;{amp}amp; cross-env NODE_ENV=production TARGET_ENV=production npm run build-zip", "build:store": "cross-env NODE_ENV=production TARGET_ENV=store webpack --hide-modules {amp}amp;{amp}amp; cross-env NODE_ENV=production TARGET_ENV=store npm run build-zip", "build:dev": "cross-env NODE_ENV=development TARGET_ENV=development webpack --hide-modules {amp}amp;{amp}amp; cross-env NODE_ENV=development TARGET_ENV=development npm run build-zip", "build:test": "cross-env NODE_ENV=development TARGET_ENV=test webpack --hide-modules {amp}amp;{amp}amp; cross-env NODE_ENV=development TARGET_ENV=test npm run build-zip" }, "dependencies": { "axios": "^0.18.0", "emoji-mart-vue": "^2.6.6", "moment": "^2.22.2", "vue": "^2.6.10", "vuetify": "^1.5.4", "vuex": "^3.0.1", "split-sms": "^0.1.7" }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-proposal-optional-chaining": "^7.0.0", "@babel/preset-env": "^7.1.0", "@types/chrome": "^0.0.74", "archiver": "^3.0.0", "babel-eslint": "^10.0.1", "babel-loader": "^8.0.2", "copy-webpack-plugin": "^4.5.3", "core-js": "^2.6.5", "cross-env": "^5.2.0", "css-loader": "^0.28.11", "ejs": "^2.6.1", "eslint": "^5.16.0", "eslint-config-prettier": "^3.1.0", "eslint-config-standard": "^12.0.0", "eslint-friendly-formatter": "^4.0.1", "eslint-loader": "^2.1.2", "eslint-plugin-import": "^2.16.0", "eslint-plugin-node": "^7.0.1", "eslint-plugin-prettier": "^3.0.1", "eslint-plugin-promise": "^4.1.1", "eslint-plugin-standard": "^4.0.0", "eslint-plugin-vue": "^5.2.2", "file-loader": "^1.1.11", "mini-css-extract-plugin": "^0.4.4", "node-sass": "^4.9.3", "prettier": "^1.14.3", "sass-loader": "^7.1.0", "vue-loader": "^15.4.2", "vue-template-compiler": "^2.6.10", "webpack": "^4.20.2", "webpack-cli": "^3.1.2" } } 

Это webpack.config.js :

 const webpack = require('webpack'); const ejs = require('ejs'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const { VueLoaderPlugin } = require('vue-loader'); const { version } = require('./package.json'); const config = { mode: process.env.NODE_ENV, context: __dirname   '/src', entry: { 'popup/popup': './popup/popup.js', }, output: { path: __dirname   '/dist', filename: '[name].js', }, resolve: { extensions: ['.js', '.vue', '.json'], }, module: { rules: [ { test: /.vue$/, loaders: 'vue-loader', }, { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, }, { test: /.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, { test: /.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], }, { test: /.sass$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader?indentedSyntax'], }, { test: /.(png|jpg|gif|svg|ico)$/, loader: 'file-loader', options: { name: '[name].[ext]?emitFile=false', }, }, ], }, plugins: [ new webpack.DefinePlugin({ global: 'window', 'process.env.TARGET_ENV': JSON.stringify(process.env.TARGET_ENV) }), new VueLoaderPlugin(), new MiniCssExtractPlugin({ filename: '[name].css', }), new CopyWebpackPlugin([ { from: 'images', to: 'images' }, { from: 'scripts', to: 'scripts' }, { from: 'css', to: 'css'}, { from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml }, { from: 'manifest.json', to: 'manifest.json', transform: content ={amp}gt; { const jsonContent = JSON.parse(content); jsonContent.version = version; if (process.env.TARGET_ENV != 'store') { jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'"; jsonContent['key'] = '123456'; } return JSON.stringify(jsonContent, null, 4); }, }, { from: 'config.json', to: 'config.js', transform: content ={amp}gt; { return transformConfigForExtension(content); }, }, ]), ], }; if (config.mode === 'production') { config.plugins = (config.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"', }, }), ]); } function transformHtml(content) { return ejs.render(content.toString(), { ...process.env, }); } function transformConfigForExtension(content){ let extensionConfig = JSON.parse(content.toString())[process.env.TARGET_ENV]; return 'const config = '   JSON.stringify(extensionConfig, null, 4); } module.exports = config; 

И это моя структура проекта:

И это моя структура проекта:

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector