github地址 https://github.com/Skura23/simple-webpack-test/tree/masterjavascript
--your project
|--prod
|--components
|--first.js
|--index.js
|--build
|--index.html
|--bundle.js
npm init ,填寫信息默認便可html
npm install react --save-dev 安裝react
java
npm install react-dom --save-dev (或者 npm i react-dom) 安裝react-domnode
npm install webpack --save-dev 安裝webpack
react
npm install babel-loader --save-dev 安裝babelReact
webpack
npm install jsx-loader --save-dev 安裝jsx-loader將JSX語法轉爲js語句git
var path=require('path');
module.exports={
entry:path.resolve(__dirname,'./prod/index.js'),
output:{
path:path.resolve(__dirname,'./build'),
filename:'bundle.js',
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel!jsx',
exclude: /node_modules/ ,
presets: ['es2015', 'react']
}]
}
}
entry
:指入口文件的配置項github
output
:配置打包結果,path
定義了輸出的文件夾,filename則定義了打包結果文件的名稱web
module
:定義了對模塊的處理邏輯,這裏能夠用loaders
定義了一系列的加載器,以及一些正則。當須要加載的文件匹配test的正則時,就會調用後面的loader
對文件進行處理,這正是webpack
強大的緣由。npm
接着配置index.js
var React = require('react');
var ReactDOM = require('react-dom');
var AppComponent = require('./components/first.js');
ReactDOM.render(<AppComponent />, document.getElementById('content'));
再配置first.js(這個是自定義組件)
var React = require('react');
var ReactDOM = require('react-dom');
var FirstComp = React.createClass({
render: function () {
return (
<div className="firstComp">
Hello World!
</div>
);
}
});
module.exports = FirstComp;
修改index.html以引入bundle.js,
bundle.js的生成位置在前面已經配置過了,因此咱們只要在index.html裏引入就能夠了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React Test</title>
</head>
<body>
<div id="content"></div>
<script src="bundle.js"></script>
</body>
</html>
打開package.json,並找到scripts
代碼塊
修改scripts爲
"scripts": { "build": "webpack" }
而且執行:
npm run build
如今打開index.html,能夠看見Hello world,說明咱們使用webpack打包成功。
其實教程至此就完了,但後面你會發現每次更新文件後都要使用npm run build從新打包,費時費力,
接下來咱們使用webpack-dev-server將項目運行在虛擬服務器上,咱們能夠在package.json文件內定義scripts,同時修改webpack的配置文件來達到文件修改能被監聽,並自動刷新瀏覽器的效果!
配置webpack-dev-server
修改package.json爲
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --hot --inline --devtool eval --progress --colors --content-base build"
},
webpack-dev-server
: 在 localhost:8080 創建一個 Web 服務器
--devtool eval
:爲你的代碼建立源地址。
--progress
: 顯示合併代碼進度
--colors
: 在命令行中顯示顏色
--content-base build
:指向設置的輸出目錄
而且在index.html里加入:
<script src="http://localhost:8080/webpack-dev-server.js"></script>
修改webpack.config.js :
var path = require('path');
module.exports = {
entry: ['webpack/hot/dev-server', path.resolve(__dirname, './prod/index.js')],
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
}
};
npm run dev
,打開http://localhost:8080,修改文件後保存,瀏覽器可自動刷新內容
github地址 https://github.com/Skura23/simple-webpack-test/tree/master