问题描述
我更改代码他能识别到是哪个文件更新了，但是页面就是接收不到更新信号，手动刷新才行......
package.json
webpack.config.json
/**
* webpack.config.js 是webpack的配置文件
* 作用： 指示webpack 做什么 和 webpack运行时的一些配置。
* 所有构建工具都是基于node.js环境运行的 所有模块化默认为 commonjs
*/
const webpack = require('webpack');
const { resolve } = require('path');
// 创建或复制模板
const HtmlWenpackPlugin = require('html-webpack-plugin');
// 打包目录清空
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// css提取
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
//入口
entry: './src/main.js',
// 出口
output: {
// 公共资源路径
publicPath: '/',
// 输出路径
path: resolve(__dirname, 'dist'),
// 文件名
filename: 'static/js/index.js'
},
// 模块 下载 - 使用
module: {
rules: [{
// 匹配指定文件
test: /.css$/,
// 使用哪些loader 执行顺序为：由后到前
use: [
// 创建style标签，将js中的样式资源插入，添加到head中
// 'style-loader',
MiniCssExtractPlugin.loader,
// 将css文件变成commonjs模块加载到js中，内容类型是字符串
'css-loader',
// css兼容 npm i postcss-loader postcss-preset-env -D
// 记得去package.json里配置browserslist
// postcss-preset-env帮postcss到package.json中的browserslist里面的配置，通过配置加载指定兼容的css样式
{
loader: 'postcss-loader',
options: {
postcssOptions: () => {
return {
// cssnano 是基于postcss生态系统的压缩插件
plugins: ['postcss-preset-env', 'cssnano']
}
}
}
}
]
}, {
test: /.less$/,
use: [
// 创建style标签，将js中的样式资源插入，添加到head中
// 'style-loader',
MiniCssExtractPlugin.loader,
// 将css文件变成commonjs模块加载到js中，内容类型是字符串
'css-loader',
// 将less文件翻译成css文件
'less-loader'
]
}, {
// 无法处理html里的图片资源
test: /.(jpe?g|png|gif|svg)$/,
// 只有一个loader可以直接这样子写
// 下载 url-loader file-loader
loader: 'url-loader',
options: {
// 图片小于8kb,就会被base64处理
// 优点： 减少请求数量 （减轻服务器压力）
// 缺点： 图片体积变大 （文件请求速度变慢）
limit: 200 * 1024,
// 问题：url-loader 默认使用es6模块化解析，而html-loader引入图片是commonjs
// 解析完后html的图片资源会变成： [Object Module]
// 解决：关闭url-loader的es6模块化，使用commonjs
esModule: false,
name: '[name].[hash:7].[ext]',
outputPath: 'static/images'
}
}, {
test: /.html$/,
// 处理html文件的img图片 （负责引入img,从而能被url-loader处理）
loader: 'html-loader',
// use: ['file-loader', 'html-loader']
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: '[name].[hash:7].[ext]',
outputPath: 'static/font'
}
},
{
test: /.js$/,
exclude: /node_modules/,
// npm i babel-loader @babel/preset-env @babel-core -D
// @babel/preset-env 只能兼容简单的js语法
// @babel/polyfill 来兼容全部 体积大
// core-js 按需加载
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
corejs: {
version: 3
},
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
]
},
// 插件 下载 - 引入 - 使用
plugins: [
// 默认创建一个空的HTML文件，自动引入打包输出的所有资源(js/css ： main.js)
// 需要有结构的html文件
// 安装 npm i html-webpack-plugin -D
new HtmlWenpackPlugin({
template: './public/index.html'
}),
new MiniCssExtractPlugin({
filename: "static/css/[name].css"
}),
// 删除后再打包
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin()
],
// 环境模式
mode: "development",
// 开发服务器 devServer : 用来自动化（编译、自动打开/刷新浏览器）
// 特点：只会在内存中编译打包，不会有任何输出
// 安装 npm i webpack-dev-server -D
devServer: {
// 启动的目录
contentBase: resolve(__dirname, 'dist'),
// 启动gzip压缩
compress: true,
// 端口号
port: 8088,
// 浏览器自动打开
open: true,
inline: true,
hot: true
}
}
有没有大佬能帮帮忙看看为什么？
还有打包后放2级目录的话要怎么配置publicPath啊？
还望大佬指点指点！谢谢！
这个问题我猜可能是由插件之间冲突引起的，有大佬遇到过这个问题吗？
