webpack4.0在項目中的安裝配置

webpack4.0在項目中的安裝配置

　　最近在學vue，恰好學到了webpack，由於看的教程比較老，他們用的都是webpck4.0如下的版本，我一步一步跟着教程的步驟來，發現教程裏一點問題都沒有，到我本身作的時候就遇到了幾個坑，趁着還記得比較清楚，把它記下來。

安裝webpack

　　全局安裝webpack：
　　命令行執行: npm i webpack -g
　　局部安裝（項目中安裝）：
　　我用的是VSCode，在VSCode的 powershell 終端中直接運行 cnpm i webpack -D

項目中用npm安裝包

　　在項目中安裝包，我以安裝jquery爲例：

1. 首先，初始化npm：npm init -y
2. 其次，下載jquery：npm i jquery -S

寫項目的webpack配置文件

　　在項目的根目錄建立一個名稱爲 webpack.config.js 的配置文件：

　　

1 const path = require('path')
2 
3 module.exports = { 4 entry: path.join(__dirname, './src/main.js'),//入口，表示webpack打包哪一個文件 5 output: {//輸出相關文件的配置 6 path: path.join(__dirname, './dist'), //指定打包好的文件，輸出到哪一個目錄中去 7 filename: 'bundle.js'//這是指定輸出文件的名稱 8  } 9 }

安裝配置webpack-dev-server工具

　　在項目本地安裝webpack-dev-server：
　　在powershell 終端中 執行命令 cnpm i webpack-dev-server -D
　　安裝完畢後，不能直接執行 webpack-dev-server，由於webpack-dev-server是在本地安裝的。要在前面生成的 package.json 文件中配置以下：

　　

 1 {
 2   "name": "webpack-study", 3 "version": "1.0.0", 4 "description": "", 5 "main": "webpack.config.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1", 8 "dev": "webpack-dev-server" 9  }, 10 "keywords": [], 11 "author": "", 12 "license": "ISC", 13 "dependencies": { 14 "jquery": "^3.4.1" 15  }, 16 "devDependencies": { 17 "webpack": "^4.39.3", 18 "webpack-cli": "^3.3.7", 19 "webpack-dev-server": "^3.8.0" 20  } 21 }

　　配置了"dev": "webpack-dev-server"以後，就能夠在終端執行命令 npm run dev

　　這裏還能夠這樣配置"dev": "webpack-dev-server --open --port 8080 --contentBase src --hot"

　　--open 表示編譯完默認自動打開瀏覽器

　　--port 8080 設置端口號爲 8080

　　----contentBase src 設置主頁爲 src

　　--hot 表示打包時只打包你修改的部分，不用整個項目全打包，修改樣式時，保存瀏覽器不會從新刷新，只會部分刷新。

　　這裏可能會有兩個坑：
　　第一個就是在運行的時候報錯多是你以前安裝webpack-dev-server的時候終止了，會報這個錯：
　　Error: Cannot find module ‘array-includes’
　　這時候把依賴包node_modules刪了從新安裝：
　　執行命令： cnpm i
　　這個過程可能會提示兩個紅色警告：

　　

　　這個是由於webpack-dev-server依賴於webpack包，webpack-dev-server 這個工具若是想要正常運行，要求在本地項目中必須安裝webpack。執行 cnpm i webpack -D在項目中安裝webpack。
　　第二個坑是webpack版本的問題（看圖）：

　　

　　這個提示 webpack-cli 沒有安裝，webpack-cli是什麼鬼？？？？百度瞭如下發如今4.0以後 webpack 和 webpack-cli 分開安裝了。那就執行命令 cnpm i wenpack-cli -D 安裝。
　　而後再執行 npm run dev 就成功了