本文適合小白看，本人是個後臺，不過對前端技術頗具興趣，日前剛好搭建了一個項目，寫個文章分享出來，步驟都很詳細,對webpack和react不熟的小夥伴可以看看。
1.下載安裝node.js
官網下載安裝即可，安裝好後默認會自動安裝好npm包管理，我們打開cmd控制檯，輸入node -v 和 npm -v 出現對應的版本信息，則爲安裝成功
2.新建一個項目目錄,進行npm初始化
我在d盤下新建了一個my-app,然後命令行cd進入此項目目錄,命令 npm init 進行一下package.json的初始化，這個文件主要就是用來管理npm包的。輸入命令後一直回車確認就行。
3.
初始化webpack.命令 npm install webpack --save -dev
這是僅僅將包安裝在我們的項目目錄，也可以全局安裝，全局安裝是在node的一個AppData文件夾裏面，全局安裝時npm install webpack -g.不建議使用全局，執行完應該會生成一個node_modules文件夾和一個package-lock.json.
4.下載相關的依賴包
1.babel相關
npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-stage-0 --save-dev
npm install babel-preset-react --save-dev2.react的包
npm install react react-dom --save-dev5.在項目根目錄新建一個webpack.config.js。這是webpack的核心配置文件。基礎配置可以參照以下:
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: 'development',
// 這個配置是項目的入口文件的配置
entry: {
myBuild: './src/index.js'
},
output: {
// 這個是指定項目打包後的輸出目錄,__dirname就是webpack.config.js所在的目錄,這裏就是打包時打包到項目根目錄下的build文件夾下(如沒有webpack會自己創建)
path: path.resolve(__dirname, './build'),
// 這個是關係到我們項目發佈後，一些資源的訪問路徑問題，後面會講到，而且這個也跟我們開發時候的熱部署有關，讓他指向我們的打包後的路徑就行。
publicPath:"build/",
// 這是打包後的js文件名字,這個[name]就是我們在上面的entry中指定的Key.也就是myBuild
filename: '[name].js'
},
// 這是跟服務相關的配置，具體可以去看官網
devServer: {
port:9090 //端口你可以自定義
},
// 下面的配置主要就是一些loader.關於loader我的理解就是配置一些webpack對於各種資源的打包規則
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ["es2015","react",'stage-0']
}
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: './img',
publicPath: 'build/img/'
}
}
]
},
// {
// test: /\.(png|jpg|gif)$/,
// use: [
// {
// loader: 'url-loader',
// options: {
// limit: 8192,
// }
// }
// ]
// },
{test: /\.json$/, loader: 'json-loader'},
{test: /\.(woff|woff2|svg|eot|ttf)$/, loader: 'url-loader?limit=50000&name=fonts/[name].[hash].[ext]'}
]
}
}6.在根目錄下新建一個index.html,內容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./build/myBuild.js"></script>
</body>
</html>主要就是引入打包後的myBuild.js以及寫好id爲app的入口。
7.新建一個index.js,這個文件就是我們webpack.config.js中的entry中的文件，若配置時有目錄則我們建好相應的目錄，我這裏的index.js是在src下，所以我們建立一個src的文件夾。
此時的目錄結構是這樣的，在src下有index.js。
8.在index中寫入以下代碼進行測試。
setTimeout(() => { alert(“author: sunh”)}, 1000);
9.cmd保證此時是在項目根目錄下的，執行打包命令
webpack這個命令用於打包，這需要保證webpack.config.js是這個名字，若你想用其他名字，則需要使用webpack –config 文件名來進行打包。若沒錯的話，這時應該會報錯:
10.安裝webpack的腳手架，因爲以上錯誤，官方說webpack-cli已經移出去到單獨的包了，所以我們安裝下。
npm install webpack-cli –save -dev