I want to have Hot Reloading when I run the npm run watch . (I would like it to work when it works when using vue-cli - when running the npm run dev command: https://vue-loader.vuejs.org/en/features/hot-reload.html ).
So, I installed webpack-dev-server and this is what I tried:
package.json
{ "name": "webpack-learning", "version": "1.0.0", "description": "", "scripts": { "dev": "cross-env NODE_ENV=development webpack", "watch": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.24.1", "babel-loader": "^7.0.0", "babel-preset-es2015": "^6.24.1", "cross-env": "^5.0.0", "css-loader": "^0.28.1", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.11.1", "node-sass": "^4.5.2", "purifycss-webpack": "^0.6.2", "sass-loader": "^6.0.5", "style-loader": "^0.17.0", "webpack": "^2.4.1", "webpack-dev-server": "^2.4.5" } }
If you look at the "watch" script - it uses webpack-dev-server and also has --open --hot - this is the same as in vue-cli.json package .
Also, here is my webpack.config.js :
var webpack = require('webpack'); var path = require('path'); const glob = require('glob'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const PurifyCSSPlugin = require('purifycss-webpack'); var inProduction = (process.env.NODE_ENV === 'production'); module.exports = { entry: { app: [ './src/js/main.js', './src/sass/app.scss' ] }, output: { path: path.resolve(__dirname, './dist'), filename: '[name].js' }, module: { rules: [ { test: /\.s[ac]ss$/, use: ExtractTextPlugin.extract({ use: ['css-loader', 'sass-loader'], fallback: 'style-loader' }) }, { test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }, plugins: [ new ExtractTextPlugin('[name].css'), new PurifyCSSPlugin({ paths: glob.sync(path.join(__dirname, 'index.html')), minimize: inProduction }), new webpack.LoaderOptionsPlugin({ minimize: inProduction }) ], devtool: '#eval-source-map' }; if (inProduction) { module.exports.devtool = '#source-map'; module.exports.plugins.push( new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }) ); }
Please note that I am using ExtractTextPlugin (I have a separate CSS file), a file loader plugin (for URL / images), etc.
When I run the npm run watch - no Hot Relaoding, nothing happens. There are no errors, but it does nothing, it only opens index.html in the browser ( http: // localhost: 8080 ).
No changes were found. For example, if I edit:
... these changes are not uploaded.
It doesn't even compile anything (if I remember well, vue-cli , if you deleted the dist directory - when you run npm run dev - it will recreate the dist directory again, and it will put the compiled assets there ... but here, if you deleted the compiled assets - he will not compile / create new ones).