本文介紹Webpack輔助ReactJS進行開發的簡單例子。
Webpack基礎詳解地址:http://2914905399.iteye.com/blog/2357893
簡單來說,webpack是一個模塊打包工具,在 webpack 裏,所有類型的文件都可以是模塊,包括我們最常見的 JavaScript,及 CSS 文件、圖片、json 文件等等。通過 webpack 的各種加載器,我們可以更高效地管理這些文件。
本文配置webpack並使網頁上輸出最簡單的Hello, World!!! 。程序使用React js完成並使用了ES2015。
1,創建一個空項目,在項目目錄下創建一個package.json 文件,用於項目名稱,依賴等等,終端命令如下:
npm init
2, 在當前目錄下安裝webpack以及其它依賴,由於使用React,所以引入了react和react-dom
npm install webpack react react-dom --save-dev npm install webpack -g
有時webpack需要獲取管理員權限才能安裝成功。sudo su之後再install即可解決
3, 此時目錄下只有package.json 和node_modules兩個文件,package.json中可以看到安裝過的依賴,node_modules是install時生成的。
實現簡單的HelloWorld,還需要創建一個index.html和一個入口文件index.js,出於簡單,我都放在根目錄。index.html爲空,index.js實現網頁輸出HelloWorld。代碼如下:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class HelloWorld extends Component {
render() {
return (
<div>
Hello, World ! ! !
</div>
)
}
}
ReactDOM.render(
<HelloWorld />,
document.getElementById('content')
);
4, 創建webpack配置文件webpack.config.js。並進行配置:
module.exports = {
entry: './index.js',
output: {
path: '',
filename: 'bundle.js'
}
};
entry: 設置入口文件
output: path爲webpack打包成功之後文件存放路徑。 filename爲webpack打包成功之後文件名稱。
webpack.config.js這個名字爲webpack默認的配置文件,如果不想用這個名字,可以:
webpack -config yourname
5, 安裝和使用Webpack Loader。
Webpack Loader作用:
1,將React js的jsx語句轉化爲js語句
2,支持ES2015
3,可以是js文件通過import直接引入css等樣式以及圖片。
等等等。
因爲我需要使用Reactjs和ES2015,所以安裝命令如下:
npm install babel-core babel-loader --save-dev npm install babel-preset-react babel-preset-es2015 --save-dev
具體實現需要在webpack-config.js中加入module屬性。
module.exports = {
entry: './index.js',
output: {
publicPath: "",
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
}
]
}
};
6,在終端輸入webpack。會看見生成了一個bundle.js文件。這個文件是webpack的entry文件打包成功之後得到的,存放路徑和名字都是自己在webpack.config.js中設置的。
webpack
7,修改之前創建的index.html文件,並引入打包生成的bundle.js文件。代碼如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="content"></div>
<script src="bundle.js"></script>
</body>
</html>
8,打開index.html,將會看到我們需要的 Hello,World!!!。但是每次我們修改文件並運行時都需要在終端輸入webpack再刷新頁面。這種方式比較麻煩。此時我們需要使用webpack-dev-server來實現頁面自動刷新
(1)安裝webpack-dev-server
npm install webpack-dev-server --save-dev npm install webpack-dev-server -g
(2)在package.json中添加
{
......
"scripts": {
"start": "webpack-dev-server --inline"
},
......
}
(3)配置完成,在終端輸入:
npm start
在瀏覽器裏面輸入http://localhost:8080/ 頁面上出現Hello,World!!!。 修改main.js中的Hello,World!!!爲Hello,Curry!!!,等待兩秒,不需要手動刷新,頁面自動刷新,出現Hello,Curry!!!。 完成!!!
附參考網站:http://www.jianshu.com/p/418e48e0cef1
https://www.zfanw.com/blog/webpack-tutorial.html