webpack實例教程(四)webpack4.0出來了

webpack實例教程(一) 安裝和查看
webpack實例教程(二) hot Uglify
webpack實例教程(三) loader
webpack實例教程(四)webpack4.0出來了

這次還準備按照以前的方法使用webpack,but各種報錯栗恩,都是原來你沒見過的育苟,還好提示的很明顯重慢,webpack-cli從webpack包里面分離出來了,所以需要自己安裝啦精耐!具體報錯是這樣的:

$ npx webpack src/index.js --output dist/bundle.js
npx: 1 安裝成功券坞,用時 26.36 秒
Path must be a string. Received undefined
C:\Users\Administrator\Desktop\webpack\webpack02\node_modules\webpack\bin\webpack.js
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D

所以需要根據(jù)它的提示安裝一個webpack-cli
npm install webpack-cli -D
上面還提示我沒有找到webpack.js娘扩,我明明就安裝過了,不知道到底為啥粤策,所以一激動就把webpack卸掉了樟澜,就像這樣:
npm uninstall webpack
然后在安裝了一次
npm i -D webpack
再執(zhí)行
npx webpack --config webpack.config.js
或者在package.json文件中添加

"scripts": {
    "build": "webpack"
  },

執(zhí)行npm run build
然后就可以了
不得不說的是還有一個警告,雖然目前沒有太大的影響叮盘,但是看著不舒服秩贰,這也是webpack4.0新增加的,警告如下:

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

這個主要是因為你mode這個屬性柔吼,mode選項可以在webpack.config.js里指定毒费,也可以在webpack cli命令上指定:
配置文件:
mode: 'development'
mode: 'production'

命令行:
webpack --mode development
webpack --mode production

development:開發(fā)模式,webpack會默認配置常用于開發(fā)的參數(shù)愈魏,如輸出運行時的錯誤信息等
production:產(chǎn)品模式觅玻,webpack會默認配置常用語產(chǎn)品構(gòu)建的餐宿,如壓縮代碼等

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

這樣就好啦培漏!
繼續(xù)研究溪厘,有啥重點繼續(xù)更新!E票畸悬!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市珊佣,隨后出現(xiàn)的幾起案子蹋宦,更是在濱河造成了極大的恐慌,老刑警劉巖咒锻,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件冷冗,死亡現(xiàn)場離奇詭異,居然都是意外死亡虫碉,警方通過查閱死者的電腦和手機贾惦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人须板,你說我怎么就攤上這事碰镜。” “怎么了习瑰?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵绪颖,是天一觀的道長。 經(jīng)常有香客問我甜奄,道長柠横,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任课兄,我火速辦了婚禮牍氛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘烟阐。我一直安慰自己搬俊,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布蜒茄。 她就那樣靜靜地躺著唉擂,像睡著了一般。 火紅的嫁衣襯著肌膚如雪檀葛。 梳的紋絲不亂的頭發(fā)上玩祟,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天,我揣著相機與錄音屿聋,去河邊找鬼空扎。 笑死,一個胖子當(dāng)著我的面吹牛润讥,可吹牛的內(nèi)容都是我干的勺卢。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼象对,長吁一口氣:“原來是場噩夢啊……” “哼黑忱!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起勒魔,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤甫煞,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后冠绢,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體抚吠,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年弟胀,在試婚紗的時候發(fā)現(xiàn)自己被綠了楷力。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片喊式。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡柳击,死狀恐怖坞生,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情箕慧,我是刑警寧澤检柬,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布献联,位于F島的核電站,受9級特大地震影響何址,放射性物質(zhì)發(fā)生泄漏里逆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一用爪、第九天 我趴在偏房一處隱蔽的房頂上張望原押。 院中可真熱鬧,春花似錦偎血、人聲如沸班眯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至宠能,卻和暖如春亚隙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背违崇。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工阿弃, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人羞延。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓渣淳,卻偏偏與公主長得像,于是被迫代替她去往敵國和親伴箩。 傳聞我的和親對象是個殘疾皇子入愧,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容

  • GitChat技術(shù)雜談 前言 本文較長,為了節(jié)省你的閱讀時間嗤谚,在文前列寫作思路如下: 什么是 webpack棺蛛,它要...
    蕭玄辭閱讀 12,698評論 7 110
  • 1椅野、下載NodeJS進行安裝 2终畅、npm是隨同NodeJS一起安裝的包管理工具籍胯,能解決NodeJS代碼部署上的很多...
    小龍蝦Julian閱讀 771評論 0 5
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,480評論 2 71
  • 目錄第1章 webpack簡介 11.1 webpack是什么? 11.2 官網(wǎng)地址 21.3 為什么使用 web...
    lemonzoey閱讀 1,739評論 0 1
  • 寫在開頭 先說說為什么要寫這篇文章, 最初的原因是組里的小朋友們看了webpack文檔后, 表情都是這樣的: (摘...
    Lefter閱讀 5,298評論 4 31