Webpack升級到4之后卡儒，極大簡化了初始化一個項目的過程蛆橡，它默認不需要配置文件拱绑，但其實是不用配置entry和output邪意，其他還是需要新建webpack.config.js文件的九妈。

1、首先新建一個文件夾雾鬼，初始化一個項目

npm init -y

配置文件package.json文件生成如下

{
  "name": "TestWebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2萌朱、安裝webpack-cli，這里我建議以下的安裝都進行本地安裝策菜，不要全局安裝晶疼，避免與其他項目造成沖突

npm install webpack-cli --save-dev

等同于如下，具體用法參看：npm 用法

npm i -D webpack-cli

3又憨、安裝webpack

npm install webpack --save-dev

創(chuàng)建完成后目錄結(jié)構(gòu)是這樣的

image

上面說過了翠霍，webpack4已經(jīng)默認了entry和output，entry默認的是根目錄下src的index.js蠢莺，所以新建一個src/index.js寒匙，簡單的寫點東西，如下：

image

然后在package.json中添加兩條命令躏将，在之前的版本中锄弱，通常需要定義兩個配置文件，dev和prod一個開發(fā)一個生產(chǎn)祸憋，那么在最新的版本中我們只需要這樣：

image

分別運行 npm run dev 和 npm run build会宪，我們會發(fā)現(xiàn)多出來一個dist文件夾相對應(yīng)的輸出main.js文件，開發(fā)環(huán)境并沒有壓縮蚯窥，而生產(chǎn)環(huán)境進行了壓縮等操作

mode配置
開頭先講一個 webpack4 中新增的選項：mode掸鹅∠裁可能是受 parcel(https://parceljs.org/) 的刺激，webpack4 終于也可以零配置打包了河劝，主要原因是 webpack 終于明白了一個道理：約定大于配置壁榕。
model 的值有三種：production、development赎瞎、none 牌里，分別表示不同模式。
在 production 模式下务甥，會默認啟用下面這些插件：

process.env.NODE_ENV 的值設(shè)為 production
FlagDependencyUsagePlugin：刪除無用代碼
FlagIncludedChunksPlugin：刪除無用代碼
ModuleConcatenationPlugin：作用域提升
NoEmitOnErrorsPlugin：編譯出現(xiàn)錯誤牡辽，跳過輸出階段
OccurrenceOrderPlugin
SideEffectsFlagPlugin
UglifyJsPlugin：js代碼壓縮

在 development 模式下，會默認啟用下面這些插件：

process.env.NODE_ENV 的值設(shè)為 development
devtool 設(shè)置為 evel
NamedChunksPlugin
NamedModulesPlugin

4敞临、接著往下态辛，到目前為止我們還沒有一個前端頁面，同樣在 src 文件夾下新建index.html文件挺尿，初始化內(nèi)容不用做任何操作奏黑；然后安裝對html打包的插件 HtmlWebpackPlugin

npm install--save-dev html-webpack-plugin

新建 webpack.config.js文件并進行如下配置：

image

在上面的index.js文件中執(zhí)行一下那個函數(shù)，然后終端執(zhí)行 npm run dev编矾，文件已經(jīng)被打包到了dist文件夾下熟史，瀏覽器打開index.html我們會看到打印出來的test

image

5、安裝簡單的web服務(wù)器窄俏，并添加熱加載 webpack-dev-server

npm install--save-dev webpack-dev-server

修改配置文件 webpack.config.js 和 package.json蹂匹，配置完成后就可以運行 npm run dev在瀏覽器查看了，并且支持熱加載

image

image

6凹蜈、其他插件以及加載器

加載css

npm install--save-dev style-loader css-loader

加載圖片

npm install--save-dev file-loader

build前刪除dist文件夾

npm installclean-webpack-plugin --save-dev

最終結(jié)果是這樣的

image

image