webpack 4.0 學習日誌（一）——配置方法以及錯誤解決

前言

該版本為：webpack 4.0 ,寫這篇文章事件是2018.03.18，請關注webpack版本更新避免不必要的麻煩、錯誤，開始之前先安裝node等（你懂的）,最好也把淘寶映象安裝了；

開始

全域性安裝webpack

$ npm install -g webpack

建立目錄

mkdir webpacktest && cd webpacktest

初始化

npm init -y；//-y為全部yes，減少你一通敲回車

然後檔案目錄中安裝webpack

npm i webpack@next --save-dev @next我也不知道是什麼意思

安裝cli工具

npm i webpack --save-dev

如果報錯
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D

請記住安裝
npm install webpack-cli -D

再在package.json中配置script

"script": {
    "build":"webpack"
}

這個時候直接執行webpack肯定是會報錯的。之前的版本需要webpack.congfig.js裡面配置一大堆東西；

現在不需要了

直接建立你想要的檔案

例如./src/index.js

隨筆寫幾句程式碼 console.log('new webpack 4.0 is so easy')

npm run build

可以看到直接打包好了放在./dist/main.js中

index.js執行結果和main.js一樣。說明我們們的操作是對的；慶祝下吧。

之前參考一些文章。例如 ：入門webpack這篇文章就夠了；按照上面的步驟根本走不下來。

原因是，webpack4.x的打包已經不能用webpack 檔案a 檔案b的方式，而是直接執行webpack --mode development或者webpack --mode production，這樣便會預設進行打包，入口檔案是'./src/index.js'，輸出路徑是'./dist/main.js'，其中src目錄即index.js檔案需要手動建立，而dist目錄及main.js會自動生成。
因此我們不再按webpack 檔案a 檔案b的方式執行webpack指令，而是直接執行

webpack --mode development

或者

webpack --mode production。

這樣便能夠實現將'./src/index.js'打包成'./dist/main.js'。
不過每次都要輸入這個命令，非常麻煩，我們在package.json中scripts中加入兩個成員：

"dev":"webpack --mode development",
"build":"webpack --mode production"

以後我們只需要在命令列執行npm run dev便相當於執行webpack --mode development，執行npm run build便相當於執行webpack --mode production。
我們在根目錄執行：

npm run dev

可以看到根目錄下生成了dist目錄，並且dist目錄下生成了main.js檔案，main.js檔案已經打包了src目錄下index.js檔案的程式碼。

還遇到錯誤提示

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

只需要在package.json中新增配置項：

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
}

然後npm run dev 這個時候dist裡面的檔案的不是壓縮過的，但是npm run build 這個時候dist的main.js就是壓縮了的。

成功提示：

專案中會多出./dist/main.js