關于Webpack的概念和作用可以參考這篇博文:https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/?utm_source=tuicool&utm_medium=referral和
。英語好的童鞋可以直接參看官網：http://webpack.github.io/
使用webpack的目的是讓代碼更模塊化，方便維護和管理，這和在Java中用maven來管理包很相似。
首先，在控制臺輸入命令:npm install webpack,這個命令的作用是讓npm安裝webpack到node_modules(該目錄會自動生成)下。
在產品環境中，以在命令后加上--save，比如:npm install webpack --save，這個意思是說把webpack安裝到node_modules下，并且更新package.json文件的dependencies。
在開發環境中，我們使用：npm install webpack --save-dev，將webpack安裝到Node_modules下，并且更新package.json的devDependencies。
這里我們使用在開發環境中的命令。
更多的NPM命令可以參看官網：和
1.首先，我們再工程目錄下新建src目錄，并在src下新建hello.js文件，文件內寫如下代碼:
export default function () {const hello = document.createElement("div");hello.textContent = "Hello Webpack!"return hello;}這是按照ES6的語法來實現。
關于ES6的更多內容可以參考這篇文檔：。
export是定義對外暴露的接口，default是為export提供一個默認輸出，這樣可以在import的時候自定義變量名而不用在import的時候指定export中的變量名。所以這段代碼意思是：默認輸入一個匿名函數。
2.然后，在hello.js同級下創建main.js，然后輸入如下內容:
import Hello from "./hello";document.getElementById("app").appendChild(Hello());import是將剛才所寫的hello.js文件當做一個模塊導入進來，"Hello"變量就是為這個匿名函數定義變量名，from后面就是被引入的文件地址，如果是js文件默認不用寫，該路徑可以是相對路徑或者絕對路徑，然后用js去從dom獲取app節點，并添加子級元素。
3.在工程根目錄新建public文件夾，并新建一個Index.html文件，如下：
然后在Html文件中創建一個div，其id為app，并在body尾處引入script，如下圖:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Webpack Example</title><body><div id="app" ></div><script type="text/javascript" src="bundle.js?1.1.11"></script></body></html>
4.在工程目錄下新建webpack.config.js文件，編輯webpack.config.js文件，編寫如下代碼：
module.exports = {entry: __dirname + "/src/main.js?1.1.11",output: {path: __dirname + "/public",filename: "bundle.js?1.1.11"}}__dirname是nodejs中的全局變量，指向當前執行腳本的目錄。
module.exports是webpack的對象，其中entry是指定入口文件，這里指定main.js為入口文件。output下的path是輸出目錄，filename是輸出文件名稱。通過path和filename組合就可以將我們再代碼中引入的模塊完整的輸出到制定的文件中。
5.在控制臺執行webpack命令，就可以看到bundle.js文件已經輸出到Public目錄下了
這個時候通過瀏覽器打開Index.html可以看到效果:
上面我們已經可以用webpack來打包我們的模塊，不過這只是剛入門，后面我們會不斷的完善webpack.config.js這個文件。
從剛才的例子中，我們需要自己手動的在html頁面里面引入bundle.js文件，那么有沒有自動幫我們引入文件的功能呢？回答肯定是有的，這里就介紹下Html-webpack-plugin插件。
插件官方地址是:,這里只是簡單講解使用。
1.要使用html插件，首先需要在項目中引入該模塊，在控制臺執行命令:
npm install html-webpack-plugin --save-dev
2.編輯webpack.config.js文件，在其中加入以下代碼:
var HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: __dirname + "/src/main.js?1.1.11",output: {path: __dirname + "/public",filename: "bundle.js?1.1.11"},plugins: [new HtmlWebpackPlugin()
]}可以看到，使用require引入html-webpack-plugin，然后在配置中的plugins數組中new一個插件對象。
3.這個時候我們把public目錄刪除，再在控制臺執行webpack命令，會看到如下：
注意看紅框部分，首先，title已經被修改了插件默認值；其次，id為app的div已經沒有了。最后，可看到在body末尾插件幫我們把bundle.js插入。
template屬性
看插件官網，插件有一個template屬性，可以指定模板文件，插件能按照模板幫我們插入js或者css引用。
官網地址是:。
看官網描述，默認會有一個ejs的loader會解析模板，至于ejs是什么？ejs是一個模板語言，在nodejs開發中經常會用到，這里可以把ejs完全當做一個html格式來用。
所以，在src目錄下，我們新建一個index.temp.ejs文件，并把public下的index.html的內容拷貝到該文件中，并修改至如下:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Webpack Example</title><body><div id="app" class="custom"></div></body></html>
可以看到，title已經被我們修改回webpack example了，并且也添加了id為app的div，還刪除了script，接著，刪除Public下的文件。然后我們再控制臺輸入webpack，等webpack打包編譯完成，這時public下生成了bundle.js和index.html文件，編輯index.html文件，可以看到如下信息：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack Example</title> <link href="styles.css?1.1.11" rel="stylesheet"></head> <body> <div id="app" class="custom"></div> <script type="text/javascript" src="bundle.js?1.1.11"></script></body> </html>
在Body末尾，插件自動給我們把script加上了。
如果我們也想把css文件也自動插入，那么就會用到extract-text-webpack插件。
其官網地址是:。
官網的usage如下：
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css?1.1.11"),
]
}1.首先還是要先在控制臺輸入命令：
npm install extract-text-webpack-plugin --save-dev。
這里要注意：官網只提示安裝extract插件，其實在編譯的時候，還需要style-loader和css-loader，所以還要執行命令:
npm install style-loader --save-dev
npm install css-loader --save-dev
2.然后在webpack.config.js文件上面，require一下這個插件
3.按照官網的用法，編寫module節點，最后如下所示:
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: __dirname + "/src/main.js?1.1.11",
output: {
path: __dirname + "/public",
filename: "bundle.js?1.1.11"
},
module: {
rules: [{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.temp.ejs"
}),
new ExtractTextWebpackPlugin("styles.css?1.1.11")
]
}注意：
test是正則表達式，不是字符串!!!，沒有引號
在webpack2中，module下的loaders改為rules,后者擁有更多的功能
4.接著，我們在src目錄下新建一個index.css文件，并編輯編寫如下樣式:
.custom{
font-size: 18px;
color: bisque;
border: 1px moccasin solid;
padding: 5px;
}5.然后，編輯index.temp.ejs文件，在div標簽加入class="custom"，如下圖紅框處:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack Example</title> </head> <body> <div id="app" class="custom"></div> </body> </html>
6.編輯main.js文件，在其頂部Import剛才新建的index.css文件，如下圖:
import Hello from "./hello";
import IndexStyle from "./index.css?1.1.11";
document.getElementById("app").appendChild(Hello());7.最后，在控制臺輸入命令
webpack
編譯完成后，可以看到public目錄下生成了style.css文件，編輯index.html文件，可以看到在Head中引入了Style.css文件,如下圖:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack Example</title> <link href="styles.css?1.1.11" rel="stylesheet"></head> <body> <div id="app" class="custom"></div> <script type="text/javascript" src="bundle.js?1.1.11"></script></body> </html>
在開發中，我們會不斷的調試頁面和參數，如果每次都是執行webpack命令未免太累了，所以這里介紹一個開發服務器webpack-dev-server，它提供一個易于部署的服務器環境，并且具有實時重載的功能。
更多的文檔可以參考：。
要使用這個功能，首先還先執行npm的安裝命令
npm install webpack-dev-server --save-dev,
執行完成后，編輯package.json文件，添加"start"代碼如下：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"webpack-dev-server --progress"}"--progress"參數可以查看當前執行進度，在控制臺輸入"npm start"控制臺會打印日志信息，最后出現編譯成功，代表服務啟動完成，這時打開http://localhost:8080，可以看到index.html的內容，如下圖：
這個時候，編輯hello.js，添加一些字符串如下：
export default function () {
const hello = document.createElement("div");
hello.textContent = "Hello Webpack!This is my example!"
return hello;
}保存后，打開瀏覽器不用刷新，就可以看到我們新添加的"This is my example"。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
