webpack基本使用

2022-05-30 09:15:12 字數 889 閱讀 5807

webpack作為乙個打包工具,通過給定的入口檔案,通過loader等掃瞄手段,將不同的.js,.css,.scss等各種檔案,壓縮打包成乙個指定位置的出口壓縮js檔案

node_modules:為node安裝模組

public: 存放一些公共檔案或壓縮後的原始碼

src: 存放一些原始碼

package.json: 乙個專案的基本資訊,及依賴包的管理

webpack.config.js:webpack的配置檔案

,

"devdependencies": ,

"dependencies":

}

4、webpack.config.js檔案描述
const webpack = require('webpack')

const extracttextplugin = require('extract-text-webpack-plugin');

const uglifyjsplugin = require('uglifyjs-webpack-plugin');

module.exports = ,

devserver: ,

module: ,

// include: __dirname + '/src/',

exclude: /node_modules/},,

}]}]

},optimization: ,

compress:

}}),]},

plugins:[ //外掛程式

new webpack.bannerplugin('zxq實踐編寫'),

new extracttextplugin("style.css")]}

webpack基本使用

npm install webpack webpack cli webpack dev server d 複製 當在專案中直接執行webpack時,預設讀取webpack.config.js中的配置,等同於執行 webpack webpack.config.js const path require...

webpack基本使用

執行 npm install webpack webpack cli d 命令,安裝 webpack 相關的包 在專案根目錄建立名為 webpack.config.js 的 webpack 配置檔案 在 webpack 的配置檔案中,初始化如下基本配置 module.exports 在 packag...

webpack的基本使用

webpack最基本的使用 1.webpack可以處理js檔案的相互依賴關係 2.webpack可以處理js的相容問題,把高階的 瀏覽器無法解析的語法轉為 低階的 瀏覽器能夠解析的語法 命令格式 webpack 要打包檔案路徑 o 輸出的檔案路徑 配置webpack.config.js來簡化打包流程...