웹 팩 2+node+react+babel 열 로드 실현(hmr)

전단 공정 화 개발 의 중요 한 표 지 는 바로 열 교체 기술 이다.이 는 개발 효율 을 크게 향상 시 키 고 우 리 는 코드 작성 에 전념 하 게 한다.웹 팩 2 의 열 교체 가 1 보다 더욱 간결 하 다.
1.효과 부터 본다

2.디 렉 터 리 구조

3.프로젝트 디 렉 터 리 구조 파일 설명
실행 파일
node_모듈 노드 패키지
public 정적 자원 파일
정적 자원
dist 컴 파일 후 파일
src 프로젝트 js 파일
.bablrc babel 프로필
webpack.config.dev.js 개발 모델 webpack 설정
webpack.config.pro.js 생산 모델 webpack 설정
3.기술 의존
  • node
  • react
  • babel
  • ES6/ES2015
  • react-hmre
  • webpack
  • babel-loader,css-loader,sass-loader,style-loader,webpack-hot-middleware,webpack-hot-middleware
    열 로드 의 가장 중요 한 설정 은 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
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기