webpack4.x配置過程(一)
從 webpack v4.0.0 開始,可以不用引入一個配置檔案。然而,webpack 仍然還是高度可配置的。在開始前你需要先理解四個核心概念:入口(entry),輸出(output),loader,外掛(plugins),其次還有就是mode(模式)。
以下是官方文件解析:
entry point指示 webpack 應該使用哪個模組,來作為構建其內部依賴圖的開始。
output 屬性告訴 webpack 在哪裡輸出它所建立的 bundles,以及如何命名這些檔案,預設值為 ./dist。基本上,整個應用程式結構,都會被編譯到你指定的輸出路徑的資料夾中。
loader 讓 webpack 能夠去處理那些非 JavaScript 檔案(webpack 自身只理解 JavaScript),用於轉換某些型別的模組。loader 能夠 import 匯入任何型別的模組(例如 .css 檔案)。
外掛
以下是一個簡單的過程:
建立檔案目錄(package.json使用npm init建立):
- dist
- —-index.htm
- src
- —–index.js
- package.json
- webpack.config.js
src/index.js
document.write('hello wrold');
dist/index.html
<!DOCTYPE html>
<html>
<head>
<title >webpack test</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
webpack.config.js
var path = require('path');
const config = {
entry: './src/index.js', //入口配置
output: { //出口配置
path: path.resolve(__dirname, 'dist' ),//設定輸出的資料夾為dist
filename: 'bundle.js' //設定輸出後的檔名為bundle.js
},
}
module.exports = config;
命令列
webpack
package.json用npm init建立,本身初始化了一下資訊,此時不用修改。
在命令列裡執行 webpack 後發現dist資料夾裡新建了一個bundle.js,即配置成功了。(這裡我是全域性安裝了webpack 跟webpack-cli):
npm install -g webpack
npm install -g webpack-cli
你可能會用過
npm run dev 同 npm run build 命令來執行或輸出vue專案,此處我們配置一下,使該專案也可以用到以上兩個命令。
1、我們需要安裝一些依賴包:
webpack-dev-server(命令:npm install webpack-dev-server –save-dev)
webpack(命令:npm install webpack)
webpack-cli(命令:npm install webpack-cli)
儘管你已經全域性安裝了webpack webpack-cli,在執行npm run dev時會報錯找不到module webpack
2、配置package.json
在scripts屬性加上:
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --mode development --config webpack.config.js"
加上後package如下:
{
"name": "es62",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --mode development --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
}
}
3、配置webpack.config.js
var path = require('path');
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devServer : {
host: 'localhost', // 伺服器的IP地址,可以使用IP也可以使用localhost
compress: true, // 服務端壓縮是否開啟
port: 3004, // 埠
hot: true,
open: true, // 自動開啟瀏覽器
overlay: {
errors: true
}
}
}
module.exports = config;
4、接著執行npm run build 或npm run dev