Tôi muốn có Tải lại nóng khi tôi chạy lệnh npm run watch. (Tôi muốn nó hoạt động khi nó hoạt động khi sử dụng vue-cli - khi bạn chạy lệnh npm run dev: https://vue-loader.vuejs.org/en/features/hot-reload.html).Webpack: Cách thiết lập webpack-dev-server và Tải lại nóng
Vì vậy, tôi đã cài đặt webpack-dev-server và đây là những gì tôi đã cố gắng:
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"
}
}
Nếu bạn nhìn vào "watch" script - nó sử dụng webpack-dev-server và nó cũng có --open --hot - điều này tương tự như trong gói vue-cli package.json.
Ngoài ra, đây là tôi 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
}
})
);
}
Lưu ý rằng tôi đang sử dụng ExtractTextPlugin (Tôi có một file CSS riêng biệt), file-loader plugin (cho url/hình ảnh) v.v.
Khi tôi chạy lệnh npm run watch - không có tính năng Hot Relaoding, không có gì xảy ra. Không có lỗi, nhưng nó không làm bất cứ điều gì, nó chỉ mở ra index.html trong trình duyệt (http://localhost:8080).
Không phát hiện thấy thay đổi nào. Ví dụ, nếu tôi chỉnh sửa:
- app.scss
- index.html
... những thay đổi đó không được nạp.
Nó thậm chí không biên dịch bất cứ điều gì (nếu tôi nhớ tốt, trong vue-cli nếu bạn đã xóa các quận thư mục - khi bạn chạy npm run dev - nó sẽ tái tạo quận thư mục một lần nữa và nó sẽ đặt các tài sản biên dịch ở đó ... nhưng ở đây, nếu bạn đã xóa các tài sản đã biên dịch - nó sẽ không biên dịch/tạo các tài sản mới).