標籤：
<!-- 其實網上關於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.jsvar 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
Webpack簡易入門教程
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
