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文件里不能有注釋