框架 7-CLI 生成的应用开发服务器不更新

Question

我使用新的 Framework7-cli 生成了一个带有 React 预设的 Cordova 应用程序。 当一切设置完成后，我运行npm run start并尝试在/pages/home.jsx中更改一些代码，但浏览器中没有任何更新。 有谁知道为什么这不能开箱即用？

下面是 webpack.config.js 的样子：

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const path = require('path');
function resolvePath(dir) {
return path.join(__dirname, '..', dir);
}
const env = process.env.NODE_ENV || 'development';
const target = process.env.TARGET || 'web';
const isCordova = target === 'cordova';

module.exports = {
mode: env,
entry: [
'./src/js/app.js',
],
output: {
path: resolvePath(isCordova ? 'cordova/www' : 'www'),
filename: 'js/app.js',
publicPath: '',
hotUpdateChunkFilename: 'hot/hot-update.js',
hotUpdateMainFilename: 'hot/hot-update.json',
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
'@': resolvePath('src'),
},
},
devtool: env === 'production' ? 'source-map' : 'eval',
devServer: {
hot: true,
open: true,
compress: true,
contentBase: '/www/',
disableHostCheck: true,
watchOptions: {
poll: 1000,
},
},
optimization: {
minimizer: [new TerserPlugin({
sourceMap: true,
})],
},
module: {
rules: [
{
test: /.(js|jsx)$/,
use: 'babel-loader',
include: [
resolvePath('src'),
resolvePath('node_modules/framework7'),
resolvePath('node_modules/framework7-react'),
resolvePath('node_modules/template7'),
resolvePath('node_modules/dom7'),
resolvePath('node_modules/ssr-window'),
],
},

{
test: /.css$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
],
},
{
test: /.styl(us)?$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
'stylus-loader',
],
},
{
test: /.less$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
'less-loader',
],
},
{
test: /.(sa|sc)ss$/,
use: [
(env === 'development' ? 'style-loader' : {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}),
'css-loader',
'postcss-loader',
'sass-loader',
],
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name].[ext]',
},
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[ext]',
},
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[ext]',
},
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(env),
'process.env.TARGET': JSON.stringify(target),
}),
...(env === 'production' ? [
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true,
map: { inline: false },
},
}),
new webpack.optimize.ModuleConcatenationPlugin(),
] : [
// Development only plugins
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
]),
new HtmlWebpackPlugin({
filename: './index.html',
template: './src/index.html',
inject: true,
minify: env === 'production' ? {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
} : false,
}),
new MiniCssExtractPlugin({
filename: 'css/app.css',
}),
new CopyWebpackPlugin([
{
from: resolvePath('src/static'),
to: resolvePath(isCordova ? 'cordova/www/static' : 'www/static'),
},
{
from: resolvePath('src/manifest.json'),
to: resolvePath('www/manifest.json'),
},
]),
...(!isCordova ? [
new WorkboxPlugin.InjectManifest({
swSrc: resolvePath('src/service-worker.js'),
})
] : []),
],
};

这是package.json

{
"name": "my-app",
"private": true,
"version": "1.0.0",
"description": "My App",
"repository": "",
"license": "UNLICENSED",
"framework7": {
"cwd": "/home/david/test-react",
"type": [
"pwa",
"cordova",
"web"
],
"name": "My App",
"pkg": "io.framework7.myapp",
"framework": "react",
"template": "single-view",
"cssPreProcessor": false,
"bundler": "webpack",
"cordova": {
"folder": "cordova",
"platforms": [
"ios",
"android"
],
"plugins": [
"cordova-plugin-statusbar",
"cordova-plugin-keyboard",
"cordova-plugin-splashscreen",
"cordova-plugin-wkwebview-engine"
]
},
"webpack": {
"developmentSourceMap": true,
"productionSourceMap": true,
"hashAssets": false,
"preserveAssetsPaths": false,
"inlineAssets": true
},
"theming": {
"customColor": false,
"color": "#007aff",
"darkTheme": false,
"iconFonts": true,
"fillBars": false
},
"customBuild": false
},
"scripts": {
"build-dev": "cross-env NODE_ENV=development node ./build/build.js",
"build-prod": "cross-env NODE_ENV=production node ./build/build.js",
"build-cordova-dev": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build",
"build-cordova-prod": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build",
"build-cordova-ios-dev": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build ios",
"build-cordova-ios-prod": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build ios",
"build-cordova-android-dev": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build android",
"build-cordova-android-prod": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build android",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
"start": "npm run dev",
"postinstall": "cpy './node_modules/framework7-icons/fonts/*.*' './src/fonts/'"
},
"browserslist": [
"Android >= 5",
"IOS >= 9.3",
"Edge >= 15",
"Safari >= 9.1",
"Chrome >= 49",
"Firefox >= 31",
"Samsung >= 5"
],
"dependencies": {
"dom7": "^2.1.3",
"framework7": "^4.5.0",
"framework7-icons": "^2.3.1",
"framework7-react": "^4.5.0",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"template7": "^1.4.2"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.5.5",
"babel-loader": "^8.0.6",
"chalk": "^2.4.2",
"copy-webpack-plugin": "^5.0.4",
"cpy-cli": "^2.0.0",
"cross-env": "^5.2.0",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^3.4.0",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"rimraf": "^3.0.0",
"style-loader": "^1.0.0",
"terser-webpack-plugin": "^1.4.1",
"url-loader": "^2.1.0",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0",
"workbox-webpack-plugin": "^4.3.1"
}
}

Answer 1

我在这里看到一个小但非常重要的问题。在您的package.json-->scripts-->start中，您不包含某些命令。

它应该看起来像这样：

"start": "npm run — mode development — open — hot",

这是怎么回事：

1. 当您触发npm start时，webpack-dev-server将在mode=development中启动应用程序。
2. 然后( — 打开(会自动在默认浏览器中显示它。
3. 最后，( — hot(会继续监视对应用程序所做的任何更改。

如果它没有帮助 你试试这个：

"start": "npm run — mode dev — open — hot",

祝你好运:)