webpack 實用配置總結

2021-09-08 20:00:48 字數 1239 閱讀 8158

1、webpack.config.js配置檔案為:

//

處理共用、通用的js

var webpack = require('webpack');

//處理html模板

var htmlwebpackplugin = require('html-webpack-plugin');

//css單獨打包

var extracttextplugin = require("extract-text-webpack-plugin");

//獲取html-webpack-plugin引數的方法

var gethtmlconfig = function

(name, title) ;

};var config =,

output: ,

//將外部變數或者模組載入進來,並且不將外部變數或者模組編譯進檔案中

externals: ,

module:

},//處理css},)

]}}}

]})

},//處理less(同理sass)},)

]}}},

'less-loader']

})},

//處理]},

plugins: [

//html模板處理

new htmlwebpackplugin(gethtmlconfig('index', '首頁')),

new htmlwebpackplugin(gethtmlconfig('login', '登入頁')),

//通用模組編譯到js/common.js

newwebpack.optimize.commonschunkplugin(),

//css單獨打

new extracttextplugin('css/[name].css')

]}module.exports = config;

2、package.json檔案為:

,

"author": "",

"license": "isc",

"devdependencies": ,

"dependencies": ,

"description": ""}

3、命令列:

npm run webpack

webpack配置總結

最近不是在寫hw麼,所以就擼了一遍webpack的文件,按說這事情一年前就該做了。不過前端的工程搭建不知道為啥這麼複雜。入口 entry 輸出 output 模組 module resolve 載入器 loader 外掛程式 plugin 開發用伺服器 devtool watch 還有一些別的,比如...

webpack學習 總結,配置參考

以下是總結內容 1.命令列 所有需要用到的命令列,三類 npm init y 初始化package.json檔案 npm i d webpack webpack cli 安裝webpack npm i d webpack dev server 開發模式必備外掛程式,實現動態重新整理頁面 npm i ...

webpack配置 基礎配置

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