npm run watch
명령을 실행할 때 핫 리로디딩을 사용하고 싶습니다. (vue-cli - npm run dev
명령을 실행할 때 https://vue-loader.vuejs.org/en/features/hot-reload.html 명령을 사용할 때 작동하는 것처럼 작동하고 싶습니다.Webpack : webpack-dev-server 및 Hot Reload를 설치하는 방법
그래서, 나는 웹팩-DEV-서버를 설치 한이 나는 시도했다 :
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"
}
}
당신이 "watch"
스크립트를 보면 - webpack-dev-server을 사용하며 --open --hot
도 있습니다. vue-cli의 package.json과 동일합니다. 또한
, 여기 내 webpack.config.js입니다 :
나는 ExtractTextPlugin (I 별도의 CSS 파일을 가지고), 파일 로더 플러그인을 (사용하고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
}
})
);
}
주 URL/이미지 용)
npm run watch
명령을 실행할 때 - 핫 릴레이 (hot relaoding)가 없으며 아무런 반응이 없습니다. 오류는 없지만 아무 것도하지 않으며 브라우저에서 index.html 만 열 수 있습니다 (http://localhost:8080).
변경 내용이 감지되지 않습니다. 예를 들어, 내가 편집하는 경우 :
- app.scss
- index.html을
... 이러한 변경은로드되지 않습니다. 내가 잘 기억한다면 당신은 DIST 디렉토리를 삭제 한 경우
그것도 VUE-CLI에, (아무것도 컴파일되지 않습니다 - 당신이 npm run dev
실행할 때 - 그것은 다시 DIST 디렉토리를 다시 작성하고 거기에 컴파일 된 애셋을 넣을 것입니다 ...하지만 여기에서는 컴파일 된 애셋을 삭제 한 경우 - 새 애플릿을 컴파일/생성하지 않습니다).