概述
用webpack也有很長一段時間了，但是基本上都是把別人配置好了的拖過來就用，對裡面很多配置的細節不是太瞭解，今天準備對著官方文件(v4.30.0)系統的學習一下。
我的開發環境是：
win10+vscode+node8.11.2+npm6.9.0
地址：github.com/fanxuewen/w…
開始
1.建立webpack-demo並cd至webpack-demo
2.初始化package npm init -y
3.npm i webpack webpack-cli -D(官方文件上說webpack4.0以後需要安裝webpack-cli，這個工具是用來執行webpack的)
4.官方文件上面還用了一個lodash,我們也裝上npm i lodah -S
5.建立專案結構如下
src/index.js檔案內容
import _ from 'lodash'
function component(){
let element =document.createElement('div');
element.innerHTML=_.join(['Hello','webpack'],',');
return element;
}
document.body.appendChild(component());
複製程式碼dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
複製程式碼6.執行 npx webpack 我們可以看到在dist資料夾下面會生成一個main.js。在瀏覽器中開啟dist/index.html可以看到Hello,webpack說明我們打包成功了。需要注意的是：
a.webpack4預設為把src/index.js作為打包的入口，dist/main.js作為出口
b.要用npx這個命令npm的版本必須大於等於5.2.0(如果低於這個版本可以用npm i npm -g安裝)，npx webpack會自動去找.\node_modules.bin下的webpack命令
c.在執行 npx webpack時我們可以看到報了一個警告，要你指定mode引數，webpack指定mode的語法是這樣的：webpack --mode [production | development | none].因此我們這樣執行 npx webpack --mode development警告就消失了。
7.由於webpack的配置引數很多，我們不可能每次執行webpack的時候都在命令列指定引數，因此我們需要一個配置檔案，檔名預設為webpack.config.js。配置檔名也可以是其他的只不過在執行webpack的時候需要這樣指定檔名 webpack --config 檔名。現在我們來新建webpack.config.js。並配置入口、出口和mode引數，如下所示
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js', //輸出檔名
path: path.resolve(__dirname, 'dist') //輸出資料夾
},
mode:'development'
};
複製程式碼8.現在我們再來執行npx webpack會會發現效果和第7步是一樣的，因為我們的入口和出口指定和預設相同。
9.通常我們會用NPM Scripts來管理webpack,在package.json中加入如下命令，我們就可以用npm run build來替代npx webpack命令啦，至此我們就算是對webpack入門了
"scripts": {
"build": "webpack"
},
複製程式碼