webpack基礎配置 1

2021-09-24 01:17:05 字數 1571 閱讀 7099

1.webpack配置

開啟我們在上文中操作的資料夾，

webpackdemo


|- dist


|- node-modules


|- src


|- index.html


|- index.js


|- package.json


|- package-lock.json
為了後期檔案便於管理，並且webpack的預設配置的打包入口檔案就是src資料夾下的index.js檔案。現在我們調整下檔案結構。將index.js放在src目錄下。

調整完成後應該是下面這樣：

webpackdemo


|- dist


|- node-modules


|- src


+ |- index.js


|- index.html


|- package.json


|- package-lock.json
現在我們執行：

npx webpack
這塊webpack後面沒有寫入口檔案，所以用的webpack預設的打包配置。

2.現在我們手寫下基礎配置，在根目錄下新建webpack.config.js配置檔案,寫入下面內容

webpack.config.js

var path =


require


('path');


//引入node中的path模組


module.exports =


, output:


}
現在我們執行：

npx webpack webpack.config.js
entrypoint main = bundle.js說明我們的配置生效了

3.配置執行命令

npx webpack webpack.config.js 每次編譯需要輸入這麼一長串。現在我們可以優化下命令

開啟webpack.json，自定義不同mode下的打包命令，加上下面的兩條命令，就ok了

,


"keywords": ,


"author": "",


"license": "isc",


"devdependencies": 


}
現在我們執行

npm run dev
下面的介面說明我們打包成功了。同樣也可以執行 npm run prod,打包生產環境的**。(ps: dev環境下打包的**不會被壓縮。prod環境下打包的**會被壓縮)

以上我們就建好了基礎配置，更多的配置可以查閱官方文件：

webpack配置文件

.

1 webpack4 0 基礎配置

1.webpack環境的搭建 npm install webpack webpack d 開發環境受用 我使用的 編輯工具是vscode，安裝code runner外掛程式很方便 2.webpack的預設打包 1 簡歷專案資料夾 2 專案目錄結構 src index.js index.html 3 ...

webpack配置 基礎配置

本片文章主要是一些webpack的基礎配置在webpack中，這個工具只識別js和json這兩種格式，別的格式或者說資源在webpack中是不認可的。例如 css檔案 less檔案 資源 圖示資源等等，這時候就需要用一些loader來對它們進行編譯處理。在敲 之前，一定要先安裝上面的包 安裝命令 n...

webpack基礎配置

webpack基礎配置 注意新的webpack 5在2020年10月發布，但是企業應用比較少因此我們使用webpack4 webpack拷貝外掛程式 copy webpack plugin 6.4.1 webpack的html生成外掛程式 html webpack plugin 4.5.1 webp...