webpack基本配置

一、新建專案

二、包管理管理專案

npm init -y

// 當建立的專案根目錄名稱是中文或者包含中文，就不能使用 -y 命令

// 直接使用 npm init 之後會讓你手寫專案名稱

"keywords": ,

"author": "",

"license": "isc"

}// 生成了 package.json 檔案，該檔案集中管理了專案中所用到的包

三、安裝webpack

cnpm install webpack -g

cnpm install webpack-cli -g

四、webpack.config.js 配置檔案

在專案根目錄新建 webpack.config.js 檔案。先進行一些基礎的配置

//  由於webpack是基於node進行構建的，所以，webpack配置檔案中，任何合法的node**都是可以識別的
const path = require('path');
// 當以命令列形式執行webpack 或者 webpack-dev-server 時，沒有提供要打包的檔案入口和出口檔案，
// 就會檢查專案根目錄中的配置檔案，並讀取這個檔案，就可以拿到這個配置物件，根據這個物件進行打包
module.exports = ,
mode:'development'
}// 這裡首先配置了專案打包的入口檔案，出口檔案，打包的模式

配置完成後在控制台執行命令：webpack 就可以進行打包了，可以看到dist資料夾下面生成了output.bundle.js檔案

五、打包完成後，可以在index.html檔案中引用打包好的js檔案

// main.js 檔案

console.log('ok');

// index.html 檔案// 執行index.html 開啟控制台，可以看到輸出了ok

六、webpack-dev-server

現在我們每修改一次**，就需要重新執行一次，怎樣才能自動執行打包呢？

這裡需要安裝乙個工具 webpack-dev-server

cnpm install webpack-dev-server -d

// -d 的方式會將這個包安裝後放到package.json中的devdependencies裡面

peerdependencies warning webpack-dev-server@* requires a peer of webpack@^4.0.0 but none was installed

// webpack-dev-server 依賴於webpack，需要進行安裝

注意上面我們已經使用過cnpm install webpack -g命令來安裝webpack，這與cnpm install webpack -d是不一樣的，前者安裝可以使我們在控制台執行webpack相關命令，後者安裝包，用包管理工具進行管理，執行命令之前可以看一下package.json中的devdependencies裡面是沒有webpack的

cnpm install webpack -d

cnpm install webpack-cli -d

此時的package.json檔案中：

安裝好包之後還需要在package.json中新增指令碼：

"scripts": ,

dev 表示當執行命令列 npm run dev 時，局相當於執行它後面的命令

--open 自動開啟

--port 3000 指定埠號3000

--contentbase src 指定資源的路徑為 src 資料夾

--hot 開啟熱更新

七、執行 npm run dev

會發現此時會報錯，找不到output.bundles.js檔案

webpack託管了我們的資源，託管的目錄為根路徑，那麼埠號3000之後就可以跟上output.bundles.js檔案，所以問題出在了index.html中script標籤中的src值。

解決方法為：

1、將src的值改為 src="/output.bundles.js"

2、將原來的script標籤注釋掉，使用htmlwebpackplugin在記憶體上生成乙個一模一樣的頁面，會自動將output.bundles.js注入到頁面。

八、html-webpack-plugin

1、安裝：

cnpm install --s**e-dev html-webpack-plugin -d

2、在webpack.config.js中進行配置

const path = require('path');
// 在記憶體中，根據指定的模板頁面，生成乙份記憶體中的首頁，同時自動把
// 打包好的output.bundles.js注入到頁面底部
// 配置外掛程式需要在物件中掛載乙個plugins節點
const htmlwebpackplugin = require('html-webpack-plugin');
module.exports = ,
mode:'development',
plugins:[ // 所有webpack外掛程式的配置節點
new htmlwebpackplugin()]}

3、執行

成功輸出了 ok

九、css樣式打包---loader

//  新增css 資料夾，index.css檔案
html,body
// main.js 檔案，引入樣式檔案
import './css/index.css'

執行之後會報錯：npm run dev

1、安裝：

cnpm install style-loader --s**e-dev -d

cnpm install css-loader --s**e-dev -d

2、配置：

const path = require('path');
// 在記憶體中，根據指定的模板頁面，生成乙份記憶體中的首頁，同時自動把
// 打包好的output.bundles.js注入到頁面底部
// 配置外掛程式需要在物件中掛載乙個plugins節點
const htmlwebpackplugin = require('html-webpack-plugin');
module.exports = ,
mode:'development',
plugins:[ // 所有webpack外掛程式的配置節點
new htmlwebpackplugin()
],module:]}
}

此時的package.json檔案：

可以執行成功了，那麼less檔案呢？

同樣的先安裝相應的loader：

cnpm install --s**e-dev less-loader less -d

同樣的還有sass檔案;

cnpm install sass-loader node-sass --s**e-dev -d

注意：在安裝loaders時，可以在每乙個loader後面加上@latest，這表示安裝最新的包，有時如果包不是最新的，會報錯；還要的情況下安裝了最新的包也不行，可以試試@next，這表示安裝的是已經開發好但還沒有對外發布的。

webpack基本配置

webpack基本配置

webpack基本配置

基本的webpack配置

相關推薦