(1) webpack相關
webpack介紹
webpack介紹
webpack配置說明
(2) webpack，webpack-dev-server的安裝
- webpack-dev-server是一個小型的Node.js Express服務器,
它使用webpack-dev-middleware來服務于webpack的包,除此自外，它還有一個通過Sock.js來連接到服務器的微型運行時
(1) 開始前還是萬萬不能缺少的安裝：全局安裝webpack
npm install webpack -g
(2) 安裝完接著進入項目根目錄，新建一個package.json依賴管理文件
npm init //填寫相關內容
(3) 在項目根目錄下安裝我們的webpack
npm install webpack --save-dev
------------------------
npm install webpak-dev-server --save-dev
//--save-dev 的意思是將這個安裝過程記錄到我們的package.json依賴管理文件里
(4) 完后新建一個名為webpack.config.js的文件
- webpack的配置文件，就是一個配置項，告訴 webpack 它需要做什么。
(5) 在webpack.config.js文件中引入webpack和webpack-dev-server
var webpack = require('webpack');
詳細代碼如下：
webpack.config.js文件如下：
----------------------------------
var webpack = require('webpack');
var path = require('path'); //path是node命令
module.exports = {
entry: "./app/index.js", //入口文件
output: { //打包完成后的輸出文件
path: path.resolve(__dirname, './dist'), //要使用相對路徑，需要用引用path.resove,記得要先require
filename: 'bundle.js'
}
}
- 在入口html中引入打包好的bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-react-product</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>
截圖
- 常用的loader
如：Babel-loader , css-loader , less-loader
http://webpack.github.io/docs/using-loaders.html
常用的loader
番外篇
--save-dev和--save的區別
- --save-dev：開發的時候用，正式上線的時候不用。（dev是development開發意思）
- --sava：開發時候用，上線的時候也要用。
例如：開發時的依賴和（開發上線都用的依賴）
"devDependencies": {
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
}, //開發時候的依賴
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
} //開發和上線都會使用的依賴
http://www.lxweimin.com/p/237260271dc8
總結
webpack打包生成bundle.js后在index.html中引用，輸出hellow word的完整例子
- (1) webpack.config.js 即webpack的配置文件
var path = require('path'); //node自帶的模塊
var webpack = require('webpack'); //引入webpack
module.exports = {
entry: './app/index', //表示入口文件
output: {
path: path.resolve(__dirname, './dist'), //打包到哪個文件夾
filename: 'bundle.js' //打包完成后的文件名
}
} //這里還沒用到module的loaders
- (2) 現在在dist文件夾中已經有了打包好的bundle.js文件，現在把他引入index.html中
index.html
-------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reac-music-player</title>
</head>
<body>
<div id="root">
<p>helow world</p>
</div>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>
- (3)例子的完整目錄結構
完整的目錄結構
(2) webpack-dev-server小型的Node Express服務器
- webpack-dev-server是一個小型的Node.js Express服務器,
它使用webpack-dev-middleware來服務于webpack的包,除此自外，它還有一個通過Sock.js來連接到服務器的微型運行時
(一) 總結來說webpack-dev-server的作用主要有liang'g'ge：
(1) 搭建本地服務器
(2) 自動刷新
