我目前正在掌握webpack,以尝试并帮助建立我的网站。我已经为开发和生产设置了我的webpack配置文件,并且似乎都可以正常工作。
我想要开发配置设置来使用热模块替换,以便每次进行更改时都可以重新编译。这似乎可行,并且如果我在浏览器(https://localhost:8081/main.bundle.js
中刷新main.bundle.js,我可以看到新的更改,但是,当我刷新加载main.bundle.js文件的网站时,它不会随更改刷新。
我认为一定有缓存吗?还是我需要做的其他事情才能使对main.bundle.js的更改显示在我的网站上?
我正在使用以下命令运行NODE_ENV=development webpack && NODE_ENV=development webpack-dev-server --progress --colors
,用于开发的我的webpack配置在下面...
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
module.exports = {
entry: [
path.resolve(__dirname, 'src/client.js'),
path.resolve(__dirname, 'src/assets/styles/main/main.less')
],
mode: 'development',
output: {
path: path.resolve(__dirname, 'dist/public/'),
filename: '[name].bundle.js',
publicPath: 'https://localhost:8081/'
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
plugins: [
[
'@babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-runtime'
],
presets: [
[
'@babel/preset-env',
{
useBuiltIns: "usage"
}
],
'@babel/preset-react'
]
}
}
]
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader'
},
{
loader: 'less-loader'
}
]
})
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
]
},
cache: false,
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
plugins: [
new ExtractTextPlugin({ filename: '[name].css' }),
new webpack.HotModuleReplacementPlugin(),
new CopyWebpackPlugin([{ from: 'src/assets/images', to: 'images'}]),
new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })
],
devServer: {
contentBase: '/dist/public/',
publicPath: 'https://localhost:8081/',
port: 8081,
hot: true,
disableHostCheck: true,
headers: { 'Access-Control-Allow-Origin': '*' },
https: {
key: fs.readFileSync(
path.resolve(__dirname, 'server.key'),
'utf8'
),
cert: fs.readFileSync(
path.resolve(__dirname, 'server.cert'),
'utf8'
)
}
}
};