webpack-dev-server 没能实时刷新,为什么
webpack.config.base.js
const path = require("path") // 获取绝对路径用
const webpack = require("webpack") // wabpack核心
const HtmlWebpackPlugin = require("html-webpack-plugin") // 动态生成html
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const sourcePath = path.resolve("src")
module.exports = {
//设置人口文件的绝对路径
entry: {
bundle: ["babel-polyfill", path.resolve("src/index.js")],
vendor: ["react", "react-dom", "echarts"]
},
output: {
path: path.resolve("./static"),
filename: "[name].[hash:8].js"
},
resolve: {
extensions: [".js", ".jsx", ".scss"],
alias: {
'resource': path.resolve("./src/util/resource.js"),
'static': path.resolve("./src/static"),
'utils': path.resolve("./src/util/utils.js"),
'service': path.resolve("./src/service"),
'components': path.resolve("./src/components"),
'containers': path.resolve("./src/containers"),
'constants': path.resolve("./src/constants"),
'api': path.resolve("./src/api/index.js")
},
modules: [sourcePath, "node_modules"]
},
plugins: [
new HtmlWebpackPlugin({
// title: '贵州省煤矿产业云平',// 标题
favicon: path.resolve("./src/static/images/favicon.png"),
template: './src/index.html', // 模板文件
filename: './index.html' // 产出后的文件名称
}),
new ExtractTextPlugin("bundle.[hash:8].css")
]
};
webpack.dev.config.js
//上帝保佑,永无bug
const path = require("path")
const webpack = require("webpack")
const sourcePath = path.resolve("src")
const openBrowserWebpackPlugin = require("open-browser-webpack-plugin")
const webpackMerge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const proxyConfig = require('./proxy')
// const WebpackDevServer = require('webpack-dev-server')
module.exports = webpackMerge(baseConfig, {
devServer: {
disableHostCheck: true,
hot: true,
inline: true,
historyApiFallback: true,
port: 3000, // 配置端口号
host: "0.0.0.0",
contentBase: "./", // 配置文件的根目录
proxy: proxyConfig
},
module: {
// 配置编译打包规则
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.css/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader"]
})
},
{
test: /\.scss/,
exclude: path.resolve(__dirname, "./src/static/scss/app.scss"),
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
"css-loader?modules&localIdentName=[local]_[hash:base64:6]",
"postcss-loader",
"sass-loader",
"resolve-url-loader",
"sass-loader?sourceMap"
]
})
},
{
test: /\.scss/,
include: path.resolve(__dirname, "./src/static/scss/app.scss"),
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
"css-loader",
"postcss-loader",
"sass-loader",
"resolve-url-loader",
"sass-loader?sourceMap"
]
})
},
{
test: /\.(woff|woff2|ttf|svg|eot)(\?t=[\s\S]+)?$/,
use: ["url-loader?limit=1000&name=files/[md5:hash:base64:10].[ext]"]
},
{
test: /\.(jpg|png|gif|swf)$/,
use: ["url-loader?limit=1000&name=files/[md5:hash:base64:10].[ext]&outputPath=img/"]
},
{
test: /\.json$/,
use: ["json-loader"]
}
]
},
devtool: "source-map",
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ["vendor"],
minChunks: Infinity,
filename: "js/[name].js"
}),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("development")
}
}),
new openBrowserWebpackPlugin({ url: "http://localhost:3000" })
]
});
package.json
"start": "./node_modules/.bin/webpack-dev-server --inline --config webpack.dev.config.js"
运行start;
是哪里除了问题?项目run起来无法实时刷新,只能手动刷新页面查看改变
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
多加一个插件在plugins:new webpack.HotModuleReplacementPlugin()