웹 팩 열 업데이트 실현(동기 리 셋 실시)

본 고 는 웹 팩 이 핫 업데이트(동기 리 셋 실시)를 실현 하고 여러분 에 게 공유 하 는 데 도움 이 되 기 를 바 랍 니 다.
해결 방안 1:
열 업 데 이 트 를 실현 하려 면 먼저 일련의 node 명령 을 설치 해 야 합 니 다.귀 찮 으 면 해결 방안 2 를 직접 볼 수 있 습 니 다.상대 적 으로 간단 합 니 다.
1.webpack 명령 설치

npm install webpack -g 

npm init

npm init -yes //       package.json 

npm install webpack --save-dev 

npm install path fs html-webpack-plugin extract-text-webpack-plugin autoprefixer webpack-dev-server --save-dev

npm install css-loader style-loader --save-dev//    ，      loader，css-loader   style－loader，css-loader   css  ，     url(...)    。style-loader                style tag 。

웹 팩 사용 명령:(이 물건 이 있다 는 것 을 알 면 됩 니 다.여 기 는 너무 많은 소 개 를 하지 않 습 니 다)

webpack --config XXX.js //         （  webpack.config2.js）   

webpack --watch //         

webpack -p//      ，        ！

webpack -d//  map    ，               

그 중에서-p 는 매우 중요 한 매개 변수 입 니 다.압축 되 지 않 은 700 kb 의 파일 이 압축 된 후에 180 kb 로 내 려 갑 니 다.(주로 스타일 이라는 한 마디 가 한 줄 의 스 크 립 트 를 독점 하여 압축 되 지 않 은 스 크 립 트 가 커 집 니 다)
2.webpack 은 es6 디 코딩 설 치 를 지원 합 니 다.

//       
npm install babel-core babel-loader babel-preset-es2015 babel-preset-React babel-preset-stage-0 Csave-dev

3.webpack+es6+react 설치 명령:

npm install react react-dom react-router react-hot-loader css-loader jsx-loader --save-dev 

//react-hot-loader          React         ，         -       ，   webpack-dev-server     ！

주석:
css 가 불 러 올 수 없 을 때 나 오류 가 발생 했 을 때(ERROR Module not found:Error:Cannot resolve module'style'in D:\workspace\\HBuilder ReactProbject\webPack-demo1\webpck\app）
이 두 명령 을 실행 합 니 다.

$ npm i style-loader -D
$ npm i css-loader -D

명령 에 따라 설치 하면 이 루어 집 니 다.그 다음 에 제 실현 코드 를 추가 하 겠 습 니 다.몇 개의 파일 이 필요 합 니 다.
1.package.json 파일
package.json 파일 에 scripts 를 추가 하여 명령 을 쉽게 사용 할 수 있 습 니 다:
최종 package.json 파일 은 다음 과 같 습 니 다.

 "scripts": {
  "start": "node dev-serve.js"
 },

최종 package.json 파일 은 다음 과 같 습 니 다.

{
 "name": "yubai",
 "description": "Utility components for react js",
 "version": "1.1.1",
 "keywords": [
  "react-component",
  "react-utils",
  "react utility"
 ],
 "scripts": {
  "start": "node dev-serve.js"
 },
 "src": "src",
 "test": "test",
 "dist": "dist",
 "mainInput": "ReactUtils",
 "mainOutput": "main",
 "dependencies": {
  "async": "^0.9.0",
  "backbone": "^1.1.2",
  "bootstrap": "^3.2.0",
  "es6-promise": "^1.0.0",
  "flux": "^2.0.1",
  "font-awesome": "^4.2.0",
  "humps": "0.0.1",
  "jquery": "^2.1.1",
  "jquery.ui.widget": "^1.10.3",
  "json5": "^0.2.0",
  "less": "^1.7.5",
  "less-loader": "^0.7.7",
  "lodash": "^2.4.1",
  "moment": "^2.8.3",
  "normalizr": "^0.1.2",
  "q": "^1.0.1",
  "react-hot-loader": "^0.4.5",
  "rimraf": "^2.2.8",
  "routes": "^1.2.0",
  "superagent": "^0.18.2",
  "codemirror": "3.20.0"
 },
 "repository": {
  "type": "git",
  "url": "git+ssh://[email protected]/sahusoftcom/react-utils.git"
 },
 "devDependencies": {
  "autoprefixer": "^6.6.1",
  "babel-core": "^6.21.0",
  "babel-loader": "^6.2.10",
  "babel-preset-es2015": "^6.18.0",
  "babel-preset-react": "^6.16.0",
  "css-loader": "^0.6.12",
  "extract-text-webpack-plugin": "^1.0.1",
  "fs": "0.0.1-security",
  "gulp": "^3.8.8",
  "gulp-concat": "^2.4.0",
  "gulp-jshint": "^1.8.4",
  "gulp-rename": "^1.2.0",
  "gulp-sass": "^0.7.3",
  "gulp-uglify": "^1.0.1",
  "gulp-util": "^3.0.1",
  "html-webpack-plugin": "^2.26.0",
  "jshint-loader": "~0.6.0",
  "jsx-loader": "^0.11.2",
  "karma": "~0.10.9",
  "karma-chrome-launcher": "~0.1.2",
  "karma-firefox-launcher": "~0.1.3",
  "karma-jasmine": "~0.1.5",
  "karma-phantomjs-launcher": "~0.1.1",
  "karma-script-launcher": "~0.1.0",
  "karma-webpack-plugin": "~1.0.0",
  "path": "^0.12.7",
  "postcss-loader": "^1.2.1",
  "react": "^15.4.2",
  "react-dom": "^15.4.2",
  "react-hot-loader": "^0.4.5",
  "react-router": "^3.0.0",
  "style-loader": "^0.6.5",
  "url-loader": "~0.5.4",
  "webpack": "^1.14.0",
  "webpack-dev-server": "^1.16.2"
 },
 "bugs": {
  "url": "https://github.com/sahusoftcom/react-utils/issues"
 },
 "homepage": "https://github.com/sahusoftcom/react-utils#readme",
 "main": "app.js",
 "author": "yubai",
 "license": "ISC"
}

이상 코드 는 여기 빨간색 부 위 를 표시 하 는 것 을 주의 하 세 요.

2.webpack.config.js 파일(webpack 메 인 파일)

var webpack = require('webpack'),
  path = require('path'),
  fs = require('fs'),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    app: ["./app.js"]
  },
  output: { //    
    path: __dirname + './__build__',
    publicPath: "",
    filename: 'shared.js',
    chunkFilename: '[name].[chunkhash:3].min.js',
  },
  module: { //        JSON loader
    loaders: [{
      test: /\.js$/,
      exclude: /^node_modules$/,
      loader: 'babel'
    }, {
      test: /\.css$/,
      exclude: /^node_modules$/,
      loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer'])
    }, {
      test: /\.less$/,
      exclude: /^node_modules$/,
      loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'less'])
    }, {
      test: /\.scss$/,
      exclude: /^node_modules$/,
      loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'sass'])
    }, {
      test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
      exclude: /^node_modules$/,
      loader: 'file-loader?name=[name].[ext]'
    }, {
      test: /\.(png|jpg|gif)$/,
      exclude: /^node_modules$/,
      loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
        //      limit   ，               ，     base64   
    }, {
      test: /\.jsx$/,
      exclude: /^node_modules$/,
      loaders: ['jsx', 'babel']
    }]
  },
  resolve: {
    extensions: ['', '.js', '.json']
  },
  postcss: [
    require('autoprefixer') //  autoprefixer  ,          
  ],
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new ExtractTextPlugin('[name]-[hash:3].css'), //css   
    new webpack.HotModuleReplacementPlugin(), //     
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"development"'
    }),
    new webpack.NoErrorsPlugin()
  ]
};

3.webpack 서비스 파일:dev-serve.js

var config = require("./webpack.config.js");
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');

config.entry.app.unshift("webpack-dev-server/client?http://localhost:8099/");

var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
  publicPath: config.output.publicPath,
  stats: {
    colors: true
  }
});
server.listen(8099);

여기 내용 을 조심 하고,

제 app.js 는 이렇게 설정 되 어 있 습 니 다.간단 합 니 다.
app.js 파일

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, Link, IndexLink, hashHistory } from 'react-router'

alert("AAA");

웹 팩 명령 을 설치 한 후,
npm start 명령 을 실행 하면 로 컬 동기 화 개발 을 실현 할 수 있 습 니 다!
다음은 당신 의 코드 를 작성 하면 됩 니 다!
모든 코드 는 여기에 있 습 니 다:여기 있 습 니 다.
해결 방안 2:(추천 사용)
작업 단계:
1.노드 를 설치 한 후 속 도 를 확보 하기 위해 타 오 바 오 미 러 를 사용 해 야 합 니 다.명령 은 다음 과 같 습 니 다.
（1）npm config set registry " http://registry.npm.taobao.org " 
（2）npm config list  설정 보기  
2.nodejs 를 설치 한 후 터미널 을 열 고 명령 을 실행 합 니 다.

npm install webpack -g 

//-g         webpack,                      webpack  ,    :

3.npm init 초기 화 를 사용 하여 package.json 파일 생 성:명령 실행:
npm init 사용자 정의 패키지 만 들 기.json  
npm init-yes 기본 package.json 을 만 들 수 있 습 니 다.  
현재 우리 의 프로젝트 는 이미 만 들 어 졌 습 니 다.다음은 의존 패키지 와 플러그 인 을 추가 합 니 다.
(1)부분 적 으로 웹 팩 을 설치 하고 명령 을 수행 합 니 다.

npm install webpack --save-dev 

(2)react 를 설치 합 니 다.Csave 명령 은 패키지.json 파일 에 가방 을 추가 하고 명령 을 수행 하 는 데 사 용 됩 니 다.

npm install  react react-dom react-router react-hot-loader css-loader  jsx-loader html-webpack-plugin --save-dev 

 
(3)babel 플러그 인 을 설치 합 니 다.babel 플러그 인 은 webpack 에 필요 한 로 더 입 니 다.이 몇 개의 로 더 가 없 으 면 jsx 문법 과 es 2015 문법 이 잘못 보 고 됩 니 다.

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev  

(4)자동 리 셋 열 업데이트 서 비 스 를 설치 하고 webpack-dev-server 를 설치 하여 명령 을 수행 합 니 다.

npm install webpack-dev-server --save-dev

(5)package.json 파일 에 scripts 를 추가 하여 서비스 명령 을 쉽게 사용 할 수 있 습 니 다.

"scripts": { 
  "build": "webpack", 
  "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build" 
} 

package.json 모든 파일 첨부:

{
 "name": "yubai8",
 "version": "1.1.1",
 "main": "index.js",
 "dependencies": {},
 "devDependencies": {
  "html-webpack-plugin": "^2.26.0",
  "webpack-dev-server": "^1.16.2"
 },
 "scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
 },
 "author": "",
 "license": "ISC",
 "keywords": [],
 "description": ""
}

패키지.json 에서 name 은 우리 모듈 과 프로젝트 파일 디 렉 터 리 와 이름 이 같 을 수 없습니다!
명령 을 설치 한 후 웹 팩 의 프로필 을 만 듭 니 다:웹 팩.config.js 파일
webpack.config.js 파일 설정 은 다음 과 같 습 니 다.

var path = require('path'),
  webpack = require('webpack'),
  HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app.js')],
  output: {
    path: path.resolve(__dirname, './__build__'),
    filename: 'bundle.js'
  },
  devServer: {
    inline: true,
    port: 8099
  },
  module: {
    loaders: [{
      test: /\.js?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }

    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
};

 위의 다섯 번 째 줄'/app.js'는 당신 의 js 입구 파일 입 니 다.
설치 완료 후 실행 명령
1.루트 디 렉 터 리 에서 명령 을 실행 합 니 다.그 중 하 나 는:

npm run build         

npm run dev          

2.브 라 우 저 직접 접근:http://localhost:8099/index.html
해결 방안 2:코드 링크
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.