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.config.js
var path = require('path');
const config = {
entry: './src/index.js', //入口配置
output: { //出口配置
path: path.resolve(__dirname, 'dist' 命令列
webpackpackage.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