웹 팩 2+node+react+babel 열 로드 실현(hmr)
1.효과 부터 본다
2.디 렉 터 리 구조
3.프로젝트 디 렉 터 리 구조 파일 설명
실행 파일
node_모듈 노드 패키지
public 정적 자원 파일
정적 자원
dist 컴 파일 후 파일
src 프로젝트 js 파일
.bablrc babel 프로필
webpack.config.dev.js 개발 모델 webpack 설정
webpack.config.pro.js 생산 모델 webpack 설정
3.기술 의존
열 로드 의 가장 중요 한 설정 은 packge.json/devserver.js/webpack.config.dev.js/webpack.config.prod.js/.babelrc 입 니 다.
packge.json
{
"name": "react-hmr-demo",
"version": "1.0.0",
"description": "react-hmr-demo",
"main": "index.js",
"scripts": {
"dev": "node bin/devserver.js",
"build":" webpack --config webpack.config.prod.js ",
"start":"node bin/server.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/leinov/react-hmr-demo.git"
},
"author": "leinov",
"license": "ISC",
"dependencies": {
"express": "^4.15.4",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"css-loader": "^0.28.5",
"eventsource-polyfill": "^0.9.6",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.5.5",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.18.2"
}
}
scripts 명령 몇 개
$ npm run dev //
$ npm run build //
npm start //
webpack.config.dev.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-eval-source-map',//
entry: [
'eventsource-polyfill',//for IE
'webpack-hot-middleware/client',//webpack
'./src/index.js'
],
output: {
filename: 'boundle.js',
publicPath: '/dist/js/'
},
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: /node_modules/ // babel
}, {
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|jpg|gif)$/,
loaders: ['url?limit=8192&name=images/[name].[ext]'],
}
]
} ,
resolve:{
alias: {
css: path.resolve(__dirname, 'public/static/css/'), //css
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),//
new webpack.NoEmitOnErrorsPlugin()
]
};
.babelrc
{
"presets": ["react", "es2015"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
devserver.js
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('../webpack.config.dev');
var app = express();
var compiler = webpack(config);
var webpackDevMiddleware = require("webpack-dev-middleware");
app.use(webpackDevMiddleware(compiler, {
noInfo: false, //true ( false,true )
publicPath: config.output.publicPath // middleware
}));
var webpackHotMiddleware = require('webpack-hot-middleware');
app.use(webpackHotMiddleware(compiler));
app.get('*', function(req, res) {
res.sendFile(path.resolve(__dirname, '../index.html')); //
});
app.listen(3100, function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:3100');
});
이렇게 하면 열 로드 를 실현 할 수 있 습 니 다.프로젝트 루트 디 렉 터 리 에서 실행 합 니 다.
$ npm run dev
webpack.config.prod.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'./src/index.js'
],
output: {
path: path.join(__dirname, 'public/dist/js'),
filename: 'boundle.js',
},
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: /node_modules/
}, {
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|jpg|gif)$/,
loaders: ['url?limit=8192&name=images/[name].[ext]'],
}
]
} ,
resolve:{
alias: {
css: path.resolve(__dirname, 'public/static/css/'),
img: path.resolve(__dirname, 'public/static/img/'),
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};
생산 된 웹 팩 은 주로 개발 후의 컴 파일 포장 을 완성 하고 plugins 에 압축 플러그 인 이 많아 프로젝트 루트 디 렉 터 리 에서 실 행 됩 니 다.
$ npm run build
bin/server.js
생산 환경 시작 파일
var path = require('path');
var express = require('express');
var app = express();
var oneYear = 60 * 1000 * 60 * 24 * 30;
app.use(express.static(path.resolve(__dirname, '../public'), { maxAge: oneYear }));
app.get('*', function(req, res) {
res.sendFile(path.resolve(__dirname,'../index.html'));
});
app.listen(3200, function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:3200');
});
$ npm start //
여 기 는 프로젝트 주소 입 니 다https://github.com/leinov/react-hmr-demo이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
웹 팩 2+React 인 스 턴 스 데모 자세히 알 아 보기1.디 렉 터 리 구조 원본 파일 은 src 디 렉 터 리 에 있 고 포 장 된 파일 은 dist 디 렉 터 리 에 있 습 니 다. 2.webpack.config.js 설명: 1.관련 플러그 인 은 npm insta...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.