1. 程式人生 > >webpack 4.x 遇到的錯誤

webpack 4.x 遇到的錯誤

由於之前重灌電腦,很多之前的小Demo 現在都跑不起來。特別是webpack一直在報錯。

webpack

基本安裝

  • 安裝node
  • 全域性安裝webpack,webpack-cli
  • 專案初始化 webpack init (一路回車)
  • 建立檔案index.html main.js
  • 終端輸出 webpack main.js bundle.js (試試看能不能進行打包)
    報錯
    ERROR in multi main.js app.js Module not found: Error: Can't resolve 'app.js' in 'C:\Users\Amor\Desktop\1' @ multi main.js app.js
  • 直接終端輸出 webpack
    報錯
    ```````
    ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\Amor\Desktop\1'

    需要入口檔案src/index.js

  • 建立src資料夾,將index.html main.js 檔案放進去
  • 終端輸出 webpack --mode development
    報錯 和上面是一樣的
    將main.html 改為inde.js
    打包成功

有development production 兩種模式

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "prod": "webpack --mode production"
  },

node版本不能低於node3.x

安裝webpack-dev-server

npm i [email protected] --save

相關推薦

webpack 4.x 遇到的錯誤

由於之前重灌電腦,很多之前的小Demo 現在都跑不起來。特別是webpack一直在報錯。 webpack 基本安裝 安裝node 全域性安裝webpack,webpack-cli 專案初始化 webpack init (一路回車) 建立檔案index.html main.js 終端輸出 webpack mai

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 解決 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一起學習(二)

接著上一塊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 4.X 從入門到精通

通過上一篇文章相信大家已經明白了loader的概念。那這篇文章繼續介紹一些常用loader,並展現它的強大之處 處理less less與sass的功能都一樣,這裡我就以less為例,介紹其對應loader的用法。less的語法對於瀏覽器那是必需不認識的,

建立基本的 webpack 4.X 專案

建立基本的webpack 4.X專案執行npm init -y快速初始化專案。在專案生成package.json檔案。在專案根目錄下建立src原始碼目錄和dist產品目錄。在src目錄下建立index.html和index.js檔案。使用cnpm安裝webpack,執行cnp

快速配置webpack 4.x

  npm run start——開發模式,啟用devServer,檔案的改動實時更新、重新整理   npm run build——生產模式,打包檔案到dist資料夾   // package.json { "name": "test", "version": "1.0.0

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

webpack 4.0 配置方法以及錯誤解決

文件目錄 pts 版本 創建目錄 efault ebp 大堆 添加 安裝 選取一個空目錄來試驗 全局安裝webpack4.1之後 創建目錄 mkdir webpacktest && cd webpacktes 初始化package.json npm init