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...