Начал изучать webpack, столкнулся с проблемой, что при изменении файлов не происходит перезагрузка страницы в браузере, приходиться всегда самому обновлять.
Webpack.common.js
const paths = require('./paths');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [paths.src + '/index.js'],
output: {
path: paths.build,
filename: '[name].bundle.js',
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: paths.src + '/index.html',
}),
],
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] },
{
test: /\.(scss|css)$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: { sourceMap: true, importLoaders: 1 },
},
{
loader: 'sass-loader',
options: { sourceMap: true },
},
],
},
],
},
};
webpack.dev.js
const paths = require('./paths');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
historyApiFallback: true,
contentBase: paths.build,
open: true,
compress: true,
hot: true,
port: 8080,
},
plugins: [new webpack.HotModuleReplacementPlugin()],
});
paths.js
const path = require('path')
module.exports = {
// Source files
// Исходники
src: path.resolve(__dirname, '../src'),
// Production build files
// Директория для файлов сборки
build: path.resolve(__dirname, '../dist'),
// Static files that get copied to build folder
// Статические файлы, которые будут скопированы в директорию для файлов сборки
public: path.resolve(__dirname, '../public'),
}
package.json
{
"name": "excel",
"version": "1.0.0",
"description": "Pure JS Excel app",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "cross-env NODE_ENV=development webpack serve --config config/webpack.dev.js",
"build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/rostik32/excel.git"
},
"keywords": [
"js",
"javascript",
"excel"
],
"author": "Rostislav Bardasshov <atelier943@gmail.com>",
"license": "ISC",
"bugs": {
"url": "https://github.com/rostik32/excel/issues"
},
"homepage": "https://github.com/rostik32/excel#readme",
"browserslist": "> 0.25%, not dead",
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.3.2",
"cross-env": "^7.0.2",
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"sass": "^1.29.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.4.0"
},
"dependencies": {
"@babel/polyfill": "^7.12.1"
}
}
