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 --save-dev
npm install style-loader --save-dev
在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看看效果
若有錯誤的地方,望指出,轉載請註明出處