webpack傻瓜入門教程
阿新 • • 發佈：2019-02-12
webpack安裝
- 新建立專案資料夾，如app(資料夾名稱不要大寫)
進入app資料夾，shif+滑鼠右鍵，在此處開啟命令視窗，
npm init並enter初始化生成config.json
生成的package.json如下：
安裝webpack
npm install webpack -g //全域性安裝
npm install webpack --save-dev //本地安裝，並寫入到config.json本地安裝並寫入後，package.json新增了devDependencies配置；開啟package.json，將main的值改為“result.js”
webpack打包
- 新建index.html，並在其中引入主result.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lidysun webpack入門教程</title>
</head>
<body>
<script src="result.js"></script>
</body>
</html>- 新建entry.js入口檔案
document.write - 命令視窗webpack編譯：
webpack entry.js result.js瀏覽器開啟index.html，重新整理可看到結果。
webpack載入其它js模組
- 新建other.js
module.exports = '<br>我來自other.js'- 修改entry.js
document.write('我來自entry.js檔案!');
document.write(require('./other.js'));- 重新編譯
webpack entry.js result.js並重新整理瀏覽器，可以看到other.js的內容也輸出了：
webpack載入css模組
- 新建style.css
body{color:#ff6600;}- 本地安裝css-loader style-loader
npm install css-loader style-loader --save-dev安裝完成後，重新開啟package.json，檢查依賴是否自動新增
- 修改entry.js
注意：style-loader和css-loader的順序不能變，且後面的;分號不能遺漏。
require("!style-loader!css-loader!./style.css");
document.write('我來自entry.js檔案!');
document.write(require('./other.js'));- 編譯
webpack entry.js result.js並重新整理index.html可以看到樣式變化
webpack配置
- 新建webpack.config.js
var webpack = require('webpack');
module.exports = {
entry:'./entry.js',
output:{
path:__dirname,
filename:'result.js',
},
module:{
loaders:[
{test:/\.css$/,loader:'style-loader!css-loader'}
]
}
}entry 輸入檔案，相當於設定webpack entry.js result.js 中的entry.js
output 輸出檔案，相當於設定webpack entry.js result.js 中的result.js
path 輸出檔案的位置，__dirname 表示當前目錄，可根據實際專案更改，如 ./js
loader 設定不同模組的編譯方式。
當webpack.config.js中沒有設定loaders {test:/\.css$/,loader:'style-loader!css-loader'} 時，並且entry.js引入css的格式為簡單的 require('./style.css'); 時，我們編譯命令必須加上引數webpack entry.js result.js --module-bind "css=style-loader!css-loader"，但當我們設定了loaders後，引入css檔案也可以像js一樣簡單，編譯時就可以不用傳參，簡直爽爆了。
- 配置完webpack.config.js後，可以對style.css修改，以示區分
body{color:black;}- 編譯
因為設定好了webpack.config.js檔案，所以編譯時入口檔案entry.js、結果檔案result.js、css模組引數都統統省略，直接webpack編譯即可。編譯後重新整理index.html可見效果
