핫 모듈 교체 핫 모듈 교체
4082 단어 webpack
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"server": "node server.js",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.0.0",
"csv-loader": "^3.0.2",
"express": "^4.17.1",
"file-loader": "^4.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"url-loader": "^2.0.1",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5",
"webpack-dev-middleware": "^3.7.0",
"webpack-dev-server": "^3.7.2",
"webpack-manifest-plugin": "^2.0.4",
"xml-loader": "^1.2.1"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
2. index.js
import _ from 'lodash';
import printMe from './print.js';
import './style.css';
function component() {
const element = document.createElement('div');
const btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe; // onclick event is bind to the original printMe function
element.appendChild(btn);
return element;
}
let element = component(); // Store the element to re-render on print.js changes
document.body.appendChild(element);
if (module.hot) {
module.hot.accept('./print.js', function () {
console.log('########################');
document.body.removeChild(element);
element = component(); // Re-render the "component" to update the click handler
document.body.appendChild(element);
})
}
3. print.js
export default function printMe() {
console.log('3335')
}
4. 스타일.js
body {
background: blue;
}
5. 웹 팩.conf.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // index.html
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); // dist
var ManifestPlugin = require('webpack-manifest-plugin'); // a mapping of all source file names to their corresponding output file
const webpack = require('webpack');
module.exports = {
// entry: './src/index.js',
mode: 'development',
entry: {
app: './src/index.js'
// print: './src/print.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true
},
devtool: 'inline-cheap-module-source-map',
plugins: [
new ManifestPlugin(),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management'
}),
new webpack.HotModuleReplacementPlugin()
],
// output: {
// filename: 'bundle.js',
// path: path.resolve(__dirname, 'dist')
// }
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Qiita API v2를 Ajax에서 사용하기위한 webpack 설정 (로컬 개발 환경 전용)에서는 Qiita의 기사 목록, 사용자 세부 정보, 기사를 '좋아요'한 사람 목록 및 재고가 있는 사람 목록을 검색할 수 있습니다. Qiita 화면에서 기사를 재고한 사람을 볼 수 없기 때문에 API를 통해 기사를 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.