Webpack升級到4之后，極大簡化了初始化一個項(xiàng)目的過程，它默認(rèn)不需要配置文件，但其實(shí)是不用配置entry和output，其他還是需要新建webpack.config.js文件的。

1、首先新建一個文件夾，初始化一個項(xiàng)目

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，這里我建議以下的安裝都進(jìn)行本地安裝，不要全局安裝，避免與其他項(xiàng)目造成沖突

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)默認(rèn)了entry和output，entry默認(rèn)的是根目錄下src的index.js，所以新建一個src/index.js，簡單的寫點(diǎn)東西，如下：

image

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

image

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

mode配置
開頭先講一個 webpack4 中新增的選項(xiàng)：mode?？赡苁鞘?parcel(https://parceljs.org/) 的刺激，webpack4 終于也可以零配置打包了，主要原因是 webpack 終于明白了一個道理：約定大于配置。
model 的值有三種：production、development、none ，分別表示不同模式。
在 production 模式下，會默認(rèn)啟用下面這些插件：

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

在 development 模式下，會默認(rèn)啟用下面這些插件：

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文件并進(jìn)行如下配置：

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，配置完成后就可以運(yùn)行 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