<!-- 其實網上關於webpack的教程已經很多了，但是本人在學習過程中發現很多教程有錯誤，或者寫的很不全面，結果做的過程出現各種各樣的問題，對新手不但不友好還會讓人浪費很多不必要的時間。所以決定自己做個簡易教程，這個教程也沒有寫太深入，面向的是純新手，但按這個教程大家能快速搭建自己的webpack，方便大家為后面的學習做准備 -->
github地址 https://github.com/Skura23/simple-webpack-test/tree/master
項目結構
--your project
|--prod
|--components
|--first.js
|--index.js
|--build
|--index.html
|--bundle.js
用npm安裝依賴
npm init ，填寫信息默認即可
npm install react --save-dev 安裝react
npm install react-dom --save-dev （或者 npm i react-dom） 安裝react-dom
npm install webpack --save-dev 安裝webpack
npm install babel-loader --save-dev 安裝babelReact
npm install jsx-loader --save-dev 安裝jsx-loader將JSX語法轉為js語句
創建webpack.config.js
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：指入口文件的配置項
output：配置打包結果，path定義了輸出的文件夾，filename則定義了打包結果文件的名稱
module：定義了對模塊的處理邏輯，這里可以用loaders定義了一系列的加載器，以及一些正則。當需要加載的文件匹配test的正則時，就會調用后面的loader對文件進行處理，這正是webpack強大的原因。
接着配置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
打開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