NO 18---- webpack 4.x 使用遇到的問題以及開發配置

最近在項目中用webpack的過程當中總是出現問題，非常納悶，按理說一直這樣使用沒有問題啊，通過我研究後發現，是由於在webpack更新到4.x以後，操做方式與以前相比變化很大。而咱們使用npm默認安裝是最新版本，所以，不能再用老版本的方式操做新版本。因此，今天就記錄一下新版本的使用配置。

1、全局安裝webpack

若是咱們按照舊版本的安裝方式，直接使用npm全局安裝webpack，咱們預期全局安裝webpack後，便能在命令行中使用webpack指令。咱們在命令行輸入：

npm install -g webpack

當執行該操做後，便在C:\Users\你的用戶名\AppData\Roaming\npm\node_modules建立了webpack文件夾，裏面存儲了剛剛全局安裝的webpack模塊。

2、建立項目

咱們在合適位置新建一個文件夾webpack-test，用於存放咱們的項目。
命令行中定位到webpack-test文件夾下，輸入如下命令進行項目的初始化：

npm init

這裏，要求設置不少選項，能夠按項目狀況配置也能夠不填直接回車。完成後，咱們發現文件夾中增長了package.json文件，它用於保存關於項目的信息。

3、嘗試打包出現提示

咱們在項目根目錄新建一個文件hello.js，並在其中輸入代碼：

function hello(str) { alert(str); } hello('hello world!');

而後，咱們即可以滿懷期待地嘗試打包，在命令行輸入：

webpack hello.js bundle.js

意思是將hello.js打包成另外一個文件bundle.js。但很不幸，4.1.1版本會提示：

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

翻譯成中文：

CLI（命令行工具）已經轉移到了一個單獨的包webpack-cli中。
除了webpack自身外，請額外安裝webpack-cli來使用CLI。
-> 使用npm安裝：npm install webpack-cli -D
->使用yarn安裝：yarn add webpack-cli -D

意思是，咱們須要額外安裝webpack-cli，不然便不能在命令行中使用webpack的相關命令。

4、安裝webpack-cli

咱們在項目中本地安裝webpack-cli：

npm install webpack-cli -D

這裏-D參數和–save-dev的做用相同，只是一種簡寫而已。筆者這裏安裝完成後，顯示webpack-cli版本是2.0.10。
咱們在根目錄再次輸入：

webpack hello.js bundle.js

很不幸，仍是提示：

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

這代表咱們本地安裝webpack-cli後並無起做用，在命令行中依然不能使用webpack命令。那麼是什麼地方出了問題呢？
咱們不難想到，

舊版本的webpack中，webpack指令要能在命令行中使用，須要全局安裝webpack，而不是本地安裝，所以這裏的webpack-cli也應該是同理。

咱們卸載本地安裝的webpack-cli，全局安裝webpack-cli：

npm uninstall webpack-cli npm install -g webpack-cli

5、設置模式

咱們再次嘗試打包：

webpack hello.js bundle.js

看樣子彷佛是能夠運行了，但又出現了新的提示：

WARNING in configuration The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this enviroment. ERROR in multi ./hello.js bundle.js Module not found:ERROR:Can't resolve 'bundle.js' in 'C:/Users/你的用戶名/Desktop/webpack-test' @ multi ./hello.js bundle.js

翻譯成中文：

配置警告：
「mode」選項還沒有設置。將「mode」選項設爲「development」或「production」以啓用此環境的默認設置。

multi錯誤 ./ hello.js bundle.js

未發現模塊：錯誤：沒法解析’C:/Users/你的用戶名/Desktop/webpack-test’中的bundle.js

@ multi ./hello.js bundle.js

這裏提示咱們存在的第一個問題是沒有配置webpack的mode選項，默認有production和development兩種模式能夠設置，所以咱們嘗試設爲development模式，在命令行輸入：

webpack --mode development

咱們看到進行了打包並顯示了Hash、Version、Time、Build at信息，代表已經能夠打包。不過，仍然有錯誤提示：

ERROR in Entry module not found:ERROR:Can't resolve './src' in 'C:/Users/你的用戶名/Desktop/webpack-test

翻譯成中文：

未找到入口模塊發生錯誤：錯誤：沒法解析’C:/Users/你的用戶名/Desktop/webpack-test’中的’./src’

6、建立入口文件

這代表webpack4.x是以項目根目錄下的'./src'做爲入口，但咱們的項目中缺少該路徑，所以咱們在根目錄下建立src文件夾，事實上webpack4.x以'./src/index.js'做爲入口，單單建立src文件而沒有index.js文件仍然會報錯，所以咱們

將hello.js移動到'./src'，並重命名爲index.js。

如今若是咱們再次執行

webpack index.js bundle.js

會提示can.t resolve相關的錯誤。

緣由是，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文件的代碼。

實際上，也能夠在webpack.config.js配置文件中這樣寫：

// webpack.config.js
module.exports = {
    mode: "production",
    // ...
}

在終端直接輸入webpack也是能夠進行打包的。。。。

 

7、配置其餘參數

咱們若是須要配置webpack指令的其餘參數，只須要在webpack –mode production/development後加上其餘參數便可，如：

webpack --mode development --watch --progress --display-modules --colors --display-reasons

固然，這也能夠寫入package.json的scripts之中。

8、總結

咱們能夠將以上探索進行整理總結，首先是注意事項：

一、webpack-cli必需要全局安裝，不然不能使用webpack指令；
二、webpack也必需要全局安裝，不然也不能使用webpack指令。
三、webpack4.x中webpack.config.js這樣的配置文件不是必須的。
四、默認入口文件是./src/index.js，默認輸出文件./dist/main.js。

配置步驟：

一、建立工程目錄； 二、初始化工程目錄：npm init。 三、全局安裝webpack-cli。 四、全局安裝webpack。 五、webpack –mode development/production進行打包，可在package.json中配置dev和build的腳本，便只需運行npm run dev/build，做用相同。 六、在webpack –mode development/production可串聯設置其餘參數。