没事不要用最新版或者webpack3,等于自杀,建议用webpack2,3还是一堆坑。。。
webpack3.8.1 webpack-dev-server 无法实现热更新,官网的例子跟着写一样不行,已经上网找了很多资料,根本不知道是什么原因,难道新版本的问题还是我设置的问题?每次都要手动刷新,是配置哪里设置错了?折腾了一晚上。说漏了关键点,index.html
文件是静态文件,引入build.js
的,index.html
文件不在watch
中。。。翻到论坛中的一篇文章的作者说到
官网的文档:https://doc.webpack-china.org...
已经使用webpack --watch 监听,但奇怪的是每次修改文件都会生产多一个js和json
如下面这样
0.a3bbf6cf39dcba749b38.hot-update.js
a3bbf6cf39dcba749b38.hot-update.json
好像设置了publicPath
为下面那样才会有热更新log日志输出
版本环境,编辑器已关闭安全模式
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.5"
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './css.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'build.js',
// publicPath: "http://localhost:8080/dist"
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: { importLoaders: 1 }
},
{
loader: "postcss-loader"
}
]
}
]
},
devServer: {
contentBase: './',
hot: true,
inline: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
//new webpack.NamedModulesPlugin()
]
}
执行命令
"start": "webpack-dev-server --inline --hot --open"
翻了一堆资料终于发现问题在哪里了!!!看了很多文章都没怎么说这个路径是怎么回事,现在算是搞清楚了。
首先
devServer
的publicPath
路径是指向内存生产的路径
,不在物理硬盘上
,所以我的index.html
里面引用的js路径,应该相对于
publicPath
地址。注意:
publicPath
地址默认不写会读取output的publicPath
路径,publicPath
总是以‘/’开头。网上也说建议
devServer
的publicPath
跟output
的publicPath
一致。最好是相对路径?不清楚网上说法不一。修正文件写法:
另外如果引入的css文件报错
import './index.css'
试试
require('./index.css')
引入方式现在终于修改文件可以实现自动刷新了。。。踩过的坑才会印象深刻~/(ㄒoㄒ)/~~