-
聽雨2020-01-20 00:00
- 36
- 0
我平时用 webpack-dev-server --inline --port 9000 --open 会默认访问我dist/index.html页面,
现在dist目录结构改了一下 , 将index.html放在了view目录下 , 然后将命令改为webpack-dev-server --inline --port 9000 --open --content-base dist/view/
├─dist
│ ├─js
│ │ base.js
│ │ index.js
│ │ login.js
│ │
│ └─view
│ index.html
│ login.html但是自动打开的页面却访问失败... 一定要手动加/view访问 , http://localhost:9000/view才行 , 请问有没有什么办法.. ?
下面是webpack的代码...
var path = require('path');
var webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
var getHtmlConfig = function (name) {
return {
filename: 'view/' + name + '.html',
template: path.join(__dirname, 'src', 'view', `${name}.html`),
chunks: ['common', name]
}
}
module.exports = {
entry: {
'common': ['./src/page/common/index.js'],
'index': ['./src/page/index/index.js'],
'login': ['./src/page/login/index.js'],
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/[name].js',
},
externals: {
'jquery': 'window.jQuery'
},
resolve: {
....
},
module: {
....
},
plugins: [
new CleanWebpackPlugin('dist'),
new ExtractTextPlugin("css/[name].css"),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/base.js'
}),
//html模板的处理
new HtmlWebpackPlugin(getHtmlConfig('index')),
new HtmlWebpackPlugin(getHtmlConfig('login'))
]
}0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
-注定、离开 普通会员 1楼
在Webpack Dev Server中，当更改
index.html文件目录后，由于服务器的缓存和重定向机制，可能会导致访问到旧的index.html文件，而无法直接访问新的文件。以下是一些可能导致此问题的步骤和解决方案：
- 首先，确保你的
webpack.config.js文件中设置了一个正确的打包和热加载选项。例如，如果你使用了historyApiFallback选项，那么默认情况下，webpack-dev-server会将服务器重定向到旧的index.html文件。
javascript module.exports = { output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/dist/' }, devServer: { historyApiFallback: true, hot: true, port: 3000, contentBase: './dist', publicPath: '/dist/' } };如果你的
webpack.config.js中没有设置historyApiFallback选项，那么默认情况下webpack-dev-server将直接重定向到新的index.html文件。- 如果你使用了
webpack-hot-middleware，它会在热更新时生成一个index.html文件，并将其放在publicPath中。这意味着如果你在index.html文件中做了修改，服务器也会自动更新并重定向到新的文件。
```javascript const webpack = require('webpack'); const path = require('path');
module.exports = { // ... devServer: { hot: true, port: 3000, contentBase: './dist', publicPath: '/dist/' }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } } }, { test: /.html$/, use: { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'dist/' } } } ] }, plugins: [ new webpack.HotModuleReplacementPlugin() ] }; ```
- 如果你在
webpack.config.js中设置了inline选项，那么webpack-dev-server会直接在index.html文件中应用你的代码。这意味着你可以在index.html文件中使用任何JavaScript代码，而无需使用<script>标签。
javascript module.exports = { // ... devServer: { inline: true, port: 3000, contentBase: './dist', publicPath: '/dist/' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } } }, { test: /\.html$/, use: { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'dist/' } } } ] }, plugins: [ new webpack.HotModuleReplacementPlugin() ] };- 如果你使用了
proxy选项，它会在代理服务器上重定向请求。在index.html文件中，你可以将代理设置为新的服务器地址，如下所示：
```html
Webpack Dev Server ```
请注意，
proxy选项需要在webpack.config.js中设置，而且需要在服务器端进行设置。在这个例子中，我们将代理设置为新的服务器地址http://localhost:3001/，并将http2和https选项设置为true，以允许HTTP2和HTTPS请求。 - 首先，确保你的
-
无尽思念 普通会员 2楼
在Webpack Dev Server中，当更改
index.html文件目录后，由于服务器的缓存和重定向机制，可能会导致访问到旧的index.html文件，而无法直接访问新的文件。以下是一些可能导致此问题的步骤和解决方案：
- 首先，确保你的
webpack.config.js文件中设置了一个正确的打包和热加载选项。例如，如果你使用了historyApiFallback选项，那么默认情况下，webpack-dev-server会将服务器重定向到旧的index.html文件。
javascript module.exports = { output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/dist/' }, devServer: { historyApiFallback: true, hot: true, port: 3000, contentBase: './dist', publicPath: '/dist/' } };如果你的
webpack.config.js中没有设置historyApiFallback选项，那么默认情况下webpack-dev-server将直接重定向到新的index.html文件。- 如果你使用了
webpack-hot-middleware，它会在热更新时生成一个index.html文件，并将其放在publicPath中。这意味着如果你在index.html文件中做了修改，服务器也会自动更新并重定向到新的文件。
```javascript const webpack = require('webpack'); const path = require('path');
module.exports = { // ... devServer: { hot: true, port: 3000, contentBase: './dist', publicPath: '/dist/' }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } } }, { test: /.html$/, use: { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'dist/' } } } ] }, plugins: [ new webpack.HotModuleReplacementPlugin() ] }; ```
- 如果你在
webpack.config.js中设置了inline选项，那么webpack-dev-server会直接在index.html文件中应用你的代码。这意味着你可以在index.html文件中使用任何JavaScript代码，而无需使用<script>标签。
javascript module.exports = { // ... devServer: { inline: true, port: 3000, contentBase: './dist', publicPath: '/dist/' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } } }, { test: /\.html$/, use: { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'dist/' } } } ] }, plugins: [ new webpack.HotModuleReplacementPlugin() ] };- 如果你使用了
proxy选项，它会在代理服务器上重定向请求。在index.html文件中，你可以将代理设置为新的服务器地址，如下所示：
```html
Webpack Dev Server ```
请注意，
proxy选项需要在webpack.config.js中设置，而且需要在服务器端进行设置。在这个例子中，我们将代理设置为新的服务器地址http://localhost:3001/，并将http2和https选项设置为true，以允许HTTP2和HTTPS请求。 - 首先，确保你的
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部