1.全局安裝webpack
npm install webpack
然后在啟動的時候就會報錯
改成帶上版本號就不會報錯
npm install webpack@3.5.5 -g --unsafe-perm
2.創建package.json文檔
.首先新建文件reactWebpacke（這個名字自己隨便取），然后在此文件執行下面代碼
npm config set registry https://registry.npm.taobao.org
npm init
然后一路next下去如下面圖片
項目文件夾中會出現一個文件package.json
2.安裝react, react-dom, webpack
npm install react react-dom --save
npm install webpack --save-dev
npm install webpack-cli --save-dev
3. webpack.config .js 配置文件
在項目的根目錄下面創建一個webpack.config.js 文件。同時創建一個src文件夾，用來存放源文件。
下面是項目整體文件夾結構：
webpack.config.js 配置內容及說明：
var path=require('path'); module.exports = { entry:'./src/app.js', //入口文件配置為app.js文件。若入口文件為index.js,這里可以直接寫成'./src' //入口文件很多的話，可以寫成下面的格式： /* entry:{ pageOne: './src/pageOne/index.js', pageTwo: './src/pageTwo/index.js', pageThree: './src/pageThree/index.js' } */ output: { filename:'bundle.js',//js合並后的輸出的文件，命名為bundle.js path:path.resolve(__dirname,'build'),//指令的意思是：把合並的js文件，放到根目錄build文件夾下面 //publicPath:'',生成文件的公共路徑，‘/work/reactweb/dist’ 生產環境下所有的文件路徑將會添加這個公共路徑 } //多個入口的輸出文件格式 /* output: { filename:'[name].js',//name相當於變量，等同於pageOne/pageTwo/pageThree path:path.resolve(__dirname,'build'),// } */ }
在src文件夾下面，新建一個app.js
var app=document.createElement("div"); app.innerHTML='<h1> Hello World!</h1>'; document.body.appendChild(app);
在src下面創建index.html，並引入bundle.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>reactwebpack</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="../build/bundle.js"></script>
</body>
</html>
4.安裝webpack 本地包
npm install webpack –save-dev
安裝成功后，直接敲webpack，若成功將會顯示下面內容，並且build文件夾下面將會生成bundle.js
注意：在wscode中會報錯如下
解決方法：
（1）.管理員身份打開
（2）.輸入set-ExecutionPolicy RemoteSigned
（3）.選擇Y 或者A ，就好了