webpack 最簡單的入門教程（基礎的檔案打包以及實現熱載入）
webpack安裝
我們可以用npm安裝webpack，要用npm我們就需要安裝node.js環境，作為我們的平臺。
下載node.js
下載好之後安裝，我們在cmd或者GitBashHere中輸入
npm -v
node -v
如果出現版本號，說明你安裝成功了！
現在我們全域性安裝webpack，這樣你就不需要每建立一個專案就安裝一次了
npm install webpack -g //-g代表全域性安裝執行結果大概如下
從一個專案開始用webpack
首先建立一個資料夾，我的資料夾是test01
在test01中輸入下面的內容，你會發現資料夾中生成了一個package.json的檔案，這是一個標準的npm說明檔案，裡面包含了豐富的資訊，包括當前專案的依賴模組，自定義的指令碼任務等等。
npm init提示中按回車就好，如果你不準備在npm中釋出你的模組。
接下來我們將webpack安裝到我們的目錄中,作為依賴
npm install webpack --save-dev此時資料夾中多了node-modules和package-lock.json
嘗試打包
我們在根目錄下建立如下資料夾及檔案
因為打包css檔案需要安裝依賴，所以我們先打包js檔案作為嘗試
在app.js中
module.exports = console.log("Hello Webpack!");index.js中
require("./app.js" index.html中
<body>
<h1>Hello</h1>
<script src="./src/bundle.js"></script>
</body>在根目錄下執行
webpack ./src/js/index.js ./src/bundle.js
此時在src資料夾下面生成了一個bundle檔案
在瀏覽器中開啟index.html檔案，app.js中的內容被打包到bundle.js中了。
打包css檔案
打包css檔案需要安裝依賴
npm install css-loader 在index.css檔案中新增樣式，並在index.js中引入css檔案
require("style-loader!css-loader!../css/index.css");再打包一遍，此時樣式被載入到檔案中
打包多個檔案
在entry中放入多個入口檔案，output中的路徑可以不變，filename複製下面的程式碼，會分別生成對應於入口檔案的js檔案
module.exports = {
// 多檔案
entry: {
build: __dirname + "/src/js/index.js", //生成build.js
list: __dirname + "/src/js/entry.js", //生成list.js
},
output: {
path: __dirname + "/out",
filename: "[name].js"
},
module: {
loaders: [
{ test:/\.css$/,loader:'style-loader'},
{ test:/\.css$/,loader:'css-loader'}
]
}
}
簡化打包
在根目錄下建立一個叫webpack.config.js的檔案,內容如下：
module.exports = {
entry: __dirname+ "/src/js/index.js", //入口檔案
output: {
path: __dirname + "/src", //打包後文件的路徑
filename: "bundle.js" //打包後文件名稱
}
}
在命令列中只需要輸入webpack即可實現打包，記住打包命令一定是在根目錄下面，不要手誤
webpack熱載入（使用webpack構建本地伺服器）
我們每次改變檔案中的內容，都需要重新打包，這樣就加重了我們的任務量，有了熱載入，我們就不需要打包，程式會自動打包，並且在瀏覽器上顯示出來。
npm install webpack-dev-server -g //安裝
npm install --save-dev webpack-dev-server //新增到依賴修改配置檔案webpack.conf.js
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/src/js/index.js",
output: {
path: __dirname + "/src",
// path: "/",
filename: "bundle.js"
},
devServer: {
historyApiFallback: true, //如果設定為true，所有的跳轉將指向index.html
inline: true //設定為true，當原始檔改變時會自動重新整理頁面
}
}
devServer中還有其他可以配置的引數，後面的連結中有比較詳細的介紹
package.json
{
"name": "test01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"server": "webpack-dev-server --open" //加入這一行，json檔案中不支援註釋，需要刪除
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.7",
"style-loader": "^0.19.1",
"webpack": "^3.10.0"
}
}
此時熱載入就配置好了，在命令列中輸入
npm run server瀏覽器視窗會自己開啟，並且當你修改檔案時，瀏覽器會自動載入，你可以修改css看看效果
若有錯誤的地方，望指出，轉載請註明出處