webpack 4.x 解決 webpack-dev-server工具在webpack構建的專案中使用問題
首先將webpack-dev-server安裝到專案中
npm install webpack-dev-server -D
這時在powershell中敲 webpack-dev-server 會發現
'webpack-dev-server' 不是內部或外部命令，也不是可執行的程式 或批處理檔案。
這是由於該工具只是安裝到本地專案中了
納尼? 難道要全域性安裝一下嗎???
沒必要!!!這時只需在根目錄的package.json中"scripts"下中新增
"dev": "webpack-dev-server"
即可使用 npm run dev 來執行專案了
但是筆者在執行專案時 報了以下錯誤:
該問題的出現是由於webpack沒有安裝到專案中導致的;只需要將之安裝到專案中即可:
npm install webpack -D
但是 執行依然出錯:
此問題的出現 通過查閱得知 應該是 webpack 與 webpack-cli版本不一致導致的
於是:
npm uninstall webpack -D
npm install webpack webpack-cli -D
然後 npm run dev 執行成功
相關推薦
webpack 4.x 解決 webpack-dev-server工具在webpack構建的專案中使用問題
首先將webpack-dev-server安裝到專案中 npm install webpack-dev-server -D 這時在powershell中敲 webpack-dev-server 會發現 'webpack-dev-server' 不是內部或外部命令，也不是可執行的程式 或批
webpack 4.x 解決 webpack-dev-server工具在webpack構建的項目中使用問題
運行 shel pts class col png 技術 style 發現 首先將webpack-dev-server安裝到項目中 npm install webpack-dev-server -D 這時在powershell中敲 webpack-dev-server
webpack 4.x 從零開始初始化一個vue專案
建立目錄 專案名稱: vue-init app css reset.sass js home index.vue router index.js main.js App.vue views index.html 安裝webpack npm i -D webpack 建立配置檔案 w
Vue系列之 => 使用webpack-dev-server工具實現自動打包編譯
安裝webpack-dev-server （webpack版本3.6.0，webpack-dev-server版本2.11.3）注意版本相容問題，不然會有N多錯誤。 1 npm i [email protected] -D //安裝到本地依賴 webpack
Webpack 4.X 從入門到精通 - entry與output（一）
需要 不可 程序猿 導致 import 應用 驗證 解決 doctype 回顧歷史 Web應用日益復雜，前端開發也發生了翻天覆地的變化變得盤根錯節，到今天已經非常復雜和龐大了！用html、css、javascript老老實實的寫個頁面的時代早已過去。而現在要完成工作需要借助
Webpack 4.X 從入門到精通 - plugin（二）
-h 打包 不同 .com aca spa 編譯 option tput 通過上一篇文章，我們明白了webpack的兩個配置參數入口與出口，webpack會找到入口文件的地址，進去後一頓蹂躪，再通過你給的輸出地址就把編譯後的文件給你了。這篇文章接著去豐富webpack.co
webpack 4.X 與 Vue 2.X結合
itcast tin tps resource depend hot develop desc rom # Vue.js ## 註意： 有時候使用`npm i node-sass -D`裝不上，這時候，就必須使用 `cnpm i node-sass -D` ## 在普通頁面
Webpack 4.X 從入門到精通 - devServer與mode（三）
安裝使用 clas 情況下 屬性 端口 屬性。 npm demo title 上一篇文章裏詳細介紹了一下插件的用法，這一篇文章接著豐富module.exports裏的屬性。如今的前端發展已經非常迅速了，伴隨而來的是開發模式的轉變。現在已經不再是寫個靜態頁面並放在瀏覽器裏打開
Webpack 4.X 從入門到精通 - 第三方庫（六）
ofo 分享 ctype mod 找到 ebp 問題 title 效率 在開發的時候會時常用到第三方的庫或者框架，比如耳熟能詳的jquery。借助它們能提高開發效率，但是如何在webpack中使用呢。這篇文章介紹兩個東西，如何使用第三方庫以及如何提取第三方庫。 使用第三方庫
webpack 4.x 初級學習記錄
但是 模式 基本概念 寫入 dex www 命令 output 參數 目錄 webpack 4.x 安裝 webpack 4.x 基本打包編譯 webpack 配置 概念 webpack-dev-server 安裝 基本概念 配置webpack.config.js 配
webpack 4.x一起學習（二）
接著上一塊https://juejin.im/post/5be29710e51d457e90193cf3 模組：CSS檔案打包 Webpack在生產環境中有一個重要的作用就是減少http的請求數，就是把多個檔案打包到一個js裡，這樣請求數就可以減少好多。在學習CSS打包
webpack 4.x一起學習（一）
最近在學習webpack第四個版本，相比大改版肯定有諸多不同，這邊進行重新學習順便排排BUG 安裝過程中難免有點慢，但是npm是慢 cnpm又可能出錯 npm install -g chajian --registry=http://registry.npm.taobao.org 推薦此
Webpack 4.X webpack.config.js 檔案配置（一）
通過上一篇文章，我們明白了webpack的兩個配置引數入口與出口，webpack會找到入口檔案的地址，進去後一頓蹂躪，再通過你給的輸出地址就把編譯後的檔案給你了。這篇文章接著去豐富webpack.config.js的內容，說一個引數叫plugins plugins plugins裡面放的是外掛，在webp
Webpack 4.x搭建Vue腳手架踩坑記錄
博主最近在自己搭建一個vue的腳手架，因為感覺之前直接使用官方vue-cli之後，對於Webpack的使用不太熟悉，加上vue-cli3.0版本把webpack.config.js配置檔案置換成自己的配置檔案了之後，對於Webpack的使用就更加不熟練了。這裡總
babel 7.x 結合 webpack 4.x 配置
pac image 分享 技術分享 git ins png ebp mas 今天在學習webpack的使用的時候，由於學習的教程是2018年初的，使用的是 webpack 3.x 和 babel 6.x ，然後學習的過程中出現的了很多問題。 解決問題之後，總結一下新的 ba
webpack 4.x安裝出現的問題：WARNING in configuration、Module not found: Error: Can't resolve
webpack版本不一樣，裡面的一些語法之類的也會不一樣的。webpack 3.x裡面 ，將src/js/entry.js 重新新建一個出來，如下：而webpack 4.x的版本里面，如下：如果在4.x裡面使用如下就會報錯，同時也會出現黃色警告：這是 webpack 4 引入
webpack-dev-server 摘自webpack官網
webpack-dev-server是一個小型的node.js Express伺服器,它使用webpack-dev-middleware中介軟體來為通過webpack打包生成的資原始檔提供Web服務。它還有一個通過Socket.IO連線著webpack-dev-server
一步步深入學習webpack（入門困惑express和dev-server區別及分別使用dev-server和webpack-hot-middleware實現的熱載入區別）
最近需要對webpack詳細學習後，給大家分享學習。於是不得不對每一個點進行學習，結果發現webpack涉及到的知識內容好多，自己學習也是一知半解，很多時候腦細胞都死得一片一片的。 注：本文是參考網上多方資料學習後記錄的，如有雷同，請聯絡我。 學習資料：入門
Webpack 4.X 從入門到精通
通過上一篇文章相信大家已經明白了loader的概念。那這篇文章繼續介紹一些常用loader，並展現它的強大之處 處理less less與sass的功能都一樣，這裡我就以less為例，介紹其對應loader的用法。less的語法對於瀏覽器那是必需不認識的，
webpack 4.x 遇到的錯誤
由於之前重灌電腦，很多之前的小Demo 現在都跑不起來。特別是webpack一直在報錯。 webpack 基本安裝 安裝node 全域性安裝webpack，webpack-cli 專案初始化 webpack init （一路回車） 建立檔案index.html main.js 終端輸出 webpack mai