以前嘗試過幾個教程的搭建方法但是最後都失敗了，最後在豆青學姐的簡書教程和李婷婷學姐的幫忙下解決了這個問題，下面簡單記錄一下。
1.創建項目文件夾webpack-hello-demo
npm init 初始化文件夾產生package.json文件2.安裝webpack
(1)
npm install webpack --save-dev 安裝webpack依賴(2)創建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>(3)創建入口文件entry.js(touch entry.js)
document.write("hello")(4)創建bundle.js文件 內容爲
三個文件都創建之後運行命令 webpack ./entry.js bundle.js會看到bundle.js中生成了很多代碼，這就是webpack打包之後的結果。
3..配置webpack
創建配置文件webpack.config.js
module.exports = {
entry: "./entry.js", // 要打包的入口文件
output: { //打包後的文件
path: __dirname, //表示使用絕對路徑
filename: "bundle.js" //輸出文件名
},
module: {
loaders: [ //用於加載一些靜態文件夾（css樣式，圖片之類）
{ test: /\.css$/, loader: "style!css" },
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/, //不進行轉換的文件，可以提高打包速度
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}
]
}
};配置文件創建完成後執行webpack 再運行index.html文件 出現hello說明配置成功
4.安裝express
npm install express --save-dev創建server.js
var express = require('express');
var app = express();
app.use(express.static('./')); //訪問當前目錄下的靜態文件。默認訪問index.html
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
})安裝之後執行命令webpack打包文件
執行node server.js開啓服務器
瀏覽器訪問 http://localhost:3000/ ， 頁面顯示hello，運行成功。
5.配置react es5 babel6
這裏需要安裝一些依賴，執行下面的命令
npm install react --save-dev
npm install react-dom --save-dev
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save
npm install --save-dev babel-preset-react創建文件.babelrc
{
"presets": [
"es2015",
"react"
]
}6.
使用react例子測試
entry.js:
import React, {Component} from 'react';
import {render} from "react-dom";
class HelloMessage extends React.Component {
render() {
return <div>Hello World</div>;
}
}
render(<HelloMessage />, document.getElementById('app'));index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app"></div> // 添加的div，渲染至div中
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>完成之後執行命令webpack 打包文件
執行node server.js開啓服務器
瀏覽器訪問 http://localhost:3000/ ， 頁面顯示hello，運行成功。
所有文件目錄
-webpack-demo
-node_modules
-.babelrc
-bundle.js
-entry.js
-index.html
-package.json
server.js
webpack.config.js