webpack實(shí)現(xiàn)熱更新（實(shí)施同步刷新）
本文介紹了webpack實(shí)現(xiàn)熱更新（實(shí)施同步刷新），分享給大家，希望對(duì)大家有幫助。
解決方案一：
實(shí)現(xiàn)熱更新，首先，安裝一系列的node命令，如果嫌麻煩，你可以直接看解決方案二，相對(duì)來說比較簡(jiǎn)單。
1、webpack命令安裝
npm install webpack -g npm init npm init -yes //可以創(chuàng)建默認(rèn)的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會(huì)遍歷css文件，找到所有的url(...)并且處理。style-loader會(huì)把所有的樣式插入到你頁面的一個(gè)style tag中。
webpack 使用命令：（知道有這個(gè)東西就行，這里不做過多介紹）
webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）來打包 webpack --watch //監(jiān)聽變動(dòng)并自動(dòng)打包 webpack -p//壓縮混淆腳本，這個(gè)非常非常重要！ webpack -d//生成map映射文件，告知哪些模塊被最終打包到哪里了
其中的 -p 是很重要的參數(shù)，曾經(jīng)一個(gè)未壓縮的 700kb 的文件，壓縮后直接降到 180kb （主要是樣式這塊一句就獨(dú)占一行腳本，導(dǎo)致未壓縮腳本變得很大） 。
2、webpack 支持es6轉(zhuǎn)碼安裝
//安裝轉(zhuǎn)碼規(guī)則 npm install babel-core babel-loader babel-preset-es2015 babel-preset-React babel-preset-stage-0 –save-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 熱插拔的加載插件，通過它可以實(shí)現(xiàn)修改-運(yùn)行同步的效果，配合 webpack-dev-server 使用更佳！
附注：
css加載不出來的時(shí)候或者報(bào)錯(cuò)的時(shí)候（ERROR Module not found: Error: Cannot resolve module ‘style' in D:\workspace\HBuilder React_Probject\webPack-demo1\webpck\app）
執(zhí)行這兩個(gè)命令：
$ npm i style-loader -D $ npm i css-loader -D
只要你按照命令安裝，即可實(shí)現(xiàn)，接下來我附加上我的實(shí)現(xiàn)代碼：需要幾個(gè)文件：
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://git@github.com/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"
}
以上代碼請(qǐng)注意這里，標(biāo)紅部位
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]'
//注意后面那個(gè)limit的參數(shù)，當(dāng)你圖片大小小于這個(gè)限制的時(shí)候，會(huì)自動(dòng)啟用base64編碼圖
}, {
test: /\.jsx$/,
exclude: /^node_modules$/,
loaders: ['jsx', 'babel']
}]
},
resolve: {
extensions: ['', '.js', '.json']
},
postcss: [
require('autoprefixer') //調(diào)用autoprefixer插件,加入各個(gè)瀏覽器的前綴
],
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new ExtractTextPlugin('[name]-[hash:3].css'), //css隨機(jī)數(shù)
new webpack.HotModuleReplacementPlugin(), //熱加載插件
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"'
}),
new webpack.NoErrorsPlugin()
]
};
3、webpack服務(wù)文件：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);
這里注意下內(nèi)容，
我的app.js是這么配置的，很簡(jiǎn)單，
app.js文件
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, Link, IndexLink, hashHistory } from 'react-router'
alert("AAA");
安裝完成webpack命令之后，
運(yùn)行 npm start 命令 ，即可實(shí)現(xiàn)本地實(shí)施同步開發(fā)！
接下來就編寫你的代碼即可！
全部代碼在這里：在這里
解決方案二：（推薦使用）
操作步驟：
1、安裝完Node之后，為了保證速度，需要使用淘寶鏡像，命令如下：
（1）npm config set registry "http://registry.npm.taobao.org"
（2）npm config list 可以查看配置
2.安裝完nodejs之后,打開終端,執(zhí)行命令:
npm install webpack -g //-g的意思是安裝全局的webpack,但是我們實(shí)際的開發(fā)中還需要針對(duì)單個(gè)的項(xiàng)目進(jìn)行webpack安裝,執(zhí)行命令:
3、使用 npm init 初始化，生成 package.json 文件：執(zhí)行命令:
npm init 自定義創(chuàng)建package.json
npm init -yes 可以創(chuàng)建默認(rèn)的package.json
現(xiàn)在我們的項(xiàng)目已經(jīng)創(chuàng)建好了,接下來我們來添加依賴包及插件
（1） 局部安裝Webpack,執(zhí)行命令：
npm install webpack --save-dev
（2）安裝react,–save 命令用于將包添加至 package.json 文件,執(zhí)行命令：
npm install react react-dom react-router react-hot-loader css-loader jsx-loader html-webpack-plugin --save-dev
（3） 安裝babel插件,babel插件是webpack需要的加載器,如果沒有這幾個(gè)加載器我們的jsx語法，和es2015語法就會(huì)報(bào)錯(cuò)。
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev
（4）安裝自動(dòng)刷新熱更新服務(wù)，安裝webpack-dev-server執(zhí)行命令：
npm install webpack-dev-server --save-dev
（5）在package.json文件中為scripts添加,方便使用開啟服務(wù)命令:
"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": ""
}
這里有一點(diǎn)提醒大家，package.json中name不能跟我們的模塊和項(xiàng)目文件目錄同名！
安裝完命令之后，創(chuàng)建webpack的配置文件：webpack.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入口文件
安裝完成之后運(yùn)行命令
1、根目錄下執(zhí)行命令,其中一個(gè)：
npm run build 線上目錄 npm run dev 開發(fā)目錄
2.瀏覽器直接訪問:http://localhost:8099/index.html
解決方案二：代碼鏈接
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序數(shù)據(jù)統(tǒng)計(jì),現(xiàn)在有很多的統(tǒng)計(jì)方法和統(tǒng)計(jì)工具,下面這篇文章主要給大家介紹了關(guān)于小程序統(tǒng)計(jì)來源信息的方案與具體代碼,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Javascript 拖拽雛形(逐行分析代碼，讓你輕松了拖拽的原理)
這篇文章主要介紹了Javascript 拖拽雛形(逐行分析代碼，讓你輕松了拖拽的原理),需要的朋友可以參考下2015-01-01
寫了個(gè)XML+Tree無窮樹js版...2007-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)態(tài)增加按鈕組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
你可能從未使用過的11+個(gè)JavaScript特性(小結(jié))
這篇文章主要介紹了你可能從未使用過的11+個(gè)JavaScript特性(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
JavaScript函數(shù)式編程(Functional Programming)箭頭函數(shù)(Arrow functions)
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)箭頭函數(shù)(Arrow functions)用法,結(jié)合實(shí)例形式分析了javascript函數(shù)式編程中箭頭函數(shù)相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-05-05
javascript級(jí)聯(lián)下拉列表實(shí)例代碼(自寫)
javascript下拉菜單想必大家在瀏覽網(wǎng)頁的時(shí)候都會(huì)看到吧，已不是那么陌生了，本文介紹使用javascript實(shí)現(xiàn)級(jí)聯(lián)下拉列表實(shí)例，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-05-05
這篇文章主要為大家詳細(xì)介紹了一款開源的移動(dòng)端腳本框架Hammer.js,可以完美的實(shí)現(xiàn)在移端開發(fā)的大多數(shù)事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
javascript 面向?qū)ο髮?shí)戰(zhàn)思想分享
萬物皆對(duì)象，所以，任何事物都是有特征(屬性)和動(dòng)作(方法)的，一般拿到一份需求分檔，或者你瀏覽一個(gè)網(wǎng)頁看到一個(gè)畫面的時(shí)候，腦子里就要有提煉出來的屬性和方法的能力，那你才是合格的2017-09-09
Webpack 本身是不能識(shí)別樣式資源的,所以我們需要借助 Loader 來幫助 Webpack 解析樣式資源,本文就來介紹一下Webpack處理樣式資源的配置詳情,感興趣的可以了解一下2023-12-12