webpack4.0打包失敗的探索

 

　　 ①：運行命令npx webpack index.js 打包index.js文件失敗，以下圖提示

　　

 　　度娘說是由於沒有設置webpack爲生產或開發模式，因而我在package.json文件中添加以下代碼

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

　　若按上代碼設置後，仍然報一樣的錯，可試着手動輸入命令設置模式

　   webpack --mode=production（生產模式） 或 webpack --mode=development（開發模式）

　　注：設置模式爲生產模式，被打包後的文件會自動被壓縮；設置模式爲開發模式，則不會被壓縮

 

　  ②：上面報錯解決後，又出現新的報錯，以下圖

　     

　　後經一番查詢發現，原來是沒有webpack.config.js文件所致，webpack4之前都是自動生成，如今須要手動配置了（坑爹啊）

　 下面爲官方webpack.config.js基礎配置示例代碼

var path = require('path'); // 引入node一個名爲path的核心模塊
 module.exports = { mode: 'development', // 設置模式爲開發模式
    entry: './src/index.js', // 入口文件，即被打包的文件，加載項目時會首先加載該文件 
 output: { path: path.resolve(__dirname, 'dist'), // path後面必須是絕對路徑，調用模塊resolve方法生成dist文件夾，用來存放打包後的文件；
        // __dirname代指webpack.config.js當前所在項目路徑
        filename: 'bundle.js' // 輸出文件，即打包後生成的文件，該文件名可自定義
 } };

 

　　③：正常狀況下應該是能夠了，若出現下面報錯

　　

 　　說明webpack.config.js中的entry入口文件路徑有問題（好比上面代碼中，entry: './src/index.js'，路徑錯誤）

 

　　補充：若運行npm install報錯，提示缺乏README文件和倉庫字段，可參考下面連接解決

　　　　　https://blog.csdn.net/harryptter/article/details/76261581

　　　　

　　　　　    從webpack4.x開始，webpack-cli 和 webpack是單獨安裝的，之前是安裝了webpack-cli會順帶安裝webpack

　　　　   npm install webpack --save-dev 本地安裝（webpack-cli同理）

　　　　  npm install webpack -g 全局安裝（webpack-cli同理）

　　　　  npm install webpack -g --save-dev 全局和本地都安裝（webpack-cli同理）

　　　　  npm install webpack webpack-cli --save-dev 本地同時安裝webpack和webpack-cli（全局安裝同理）

　　　　  npm uninstall webpack webpack-cli --save-dev 本地同時卸載webpack和webpack-cli（單獨卸載webpack或webpack-cli同理）

　　　　  注：上面命令中的 --save-dev也可用 -D替代，它倆是等價的

 

　　　　　  若是報下圖錯，是由於你在package.json文件里加入了註釋信息，json文件裏不能有註釋