webpack4.0入門以及使用

1. 安裝webpack

先新建一個文件夾（demos），而後

 

npm init -y

 

新建一個package.json而後在當前目錄執行webpack命令

webpack

模塊未發現或者未找到src文件，咱們新建src文件夾（demos/src）

mdkir src

難道咱們全局安裝的webpack沒用嗎？ 

 

最新官網出了一個常見的命令和一個參數： npx 和 -D 參數 （同時也昭告着，全局安裝已經再也不流行）

-D：--save-dev

npx：一個全新的本地安裝器

 

全局安裝：

npm i -g webpack && npm i -g webpack-cli && npm i -g webpack-dev-server

 

本地安裝：

npm i -D webpack && npm i -D webpack-cli && npm i -D webpack-dev-server

 

 

不管是全局或者是本地，均可以使用！ 最新的趨勢就是本地（但你必須考慮外牆或使用淘寶鏡像）

 

查看版本

npx webpack --version

 

那咱們如今在當前目錄執行

npx webpack

或

npm webpack

或

webpack

會出現什麼狀況？

很嗨皮，又是這個錯誤

 

實在看不懂，就去google翻譯

大體意思以下：

1. 未設定 mode，這是 webpack 4 引入的，有倆種模式，development 與 production，默認爲 production - 其實還有一個隱藏的 none 模式，
2. 入口模塊不存在 - webpack 4 默認從項目根目錄下的 ./src/index.js 中加載入口模塊，因此咱們或者新建一個 src/index.js 文件，或者指定一個入口文件。

而後，咱們新建一個src/index.js

而後在當前目錄運行

1.webpack
　　或 2.npx webpack --mode development

臥槽，冒出來一個dist文件夾還有dist下面的main.js

還有啊，執行webpack那警告是什麼啊？

警告配置
'模式'選項還沒有設置。 將'mode'選項設置爲'development'或'produ
ction'爲該環境啓用默認設置。

 

好吧，默認的webpack不行了，那咱們採用第二種？

一點警告都沒有！ 咱們啓動了配置模式！！

 

咱們在demos新建index.html

有的人很奇怪，爲何引用的是dist/main.js，而不是index.js，這主要是用戶和咱們開發用的ES7/8和瀏覽器兼容問題致使的

omg，缺乏服務器，個人自動刷新怎麼辦！

npx webpack --mode development --watch

這樣，就監控成功了，咱們能夠去index.js去修改一下而且查看

可是自動刷新瀏覽器，也就是熱更新還未解決！

從新執行如下這條命令（ webpack-dev-server 時指定 output.publicPath）：

npx webpack-dev-server --mode development --output-public-path dist

打開瀏覽器，輸入：

localhost:8080

加參數後，只是爲了適合更加簡單的搭配使用！

 

下面建立webapck.config.js（彷彿又回到了webpack3）

 一個示例：安裝css加載器

 npm i -g css-loader style-loader

 

 

webpack.config.js

module.exports = { module: { rules: [{ test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] }] } }