webpack4的安裝過程

一、先安裝node（因為webpack是基於node.js的專案構建工具）

安裝node官網:       node -v可檢視安裝資訊

二、先建立乙個放專案的包（英文包名）

1.建立src，dist

2.專案進行初始化

npm init -y   

3.區域性安裝webpack ,安裝的版本不宜過高，不然後邊會報錯 

npm install [email protected] -d          安裝webpack

npm install [email protected]  -d     安裝webpack-cli

npm install [email protected] -d     安裝webpack-dev-server

4.建立webpack.config.js檔案

配置內容,

const path=require('path')

const webpack = require('webpack');
module.exports=,
devserver: ,
plugins:[
new webpack.hotmodulereplacementplugin(),
//熱模組更換（hmr)，能夠實現區域性重新整理，需要設定hot:true,和手動設定這個外掛程式
],watch:true,
}

在script中配置如下

"scripts": ,

使用npm run dev 執行專案

注意建立的js入口檔案是否和webpack.config.js裡配置的入口檔名稱是否一致

要檢查package.json裡的依賴是否缺少

webpack4配置詳解

方式一 單檔案寫法 entry 方式二 多檔案寫法 entry output 常用的有三種 模板描述 hash模組識別符號的hash,一般應用於filename name hash js chunkhash按需載入塊內容的hash，根據chunk自身的內容計算而來,js name chunkhash...

webpack4快速上手

1.在專案根目錄cnpm init y初始化。生成package.json檔案 2.在專案裡面使用cnpm安裝webpack 3.需要在根目錄下新建webpack.config.js檔案 在其裡面配置暴露物件 module.exports 4.在根目錄下新建src index.js檔案 因為此時執行...

webpack4 基本使用

webpack是基於node構建，所以wepack支援所有node api和語法。即 chrome瀏覽器能支援的ecmascript語法 排除dom bom wbpack都能支援。chrome不支援es6，所以webpack也不支援。建立基本的webpack4.x專案 建立後的目錄 其中 packa...