基于webpack 實用配置方法總結(jié)
更新時間：2017年09月28日 08:07:26 作者：孟繁貴
下面小編就為大家?guī)硪黄趙ebpack 實用配置方法總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
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參數(shù)的方法
var getHtmlConfig = function(name, title) {
return {
//本地模板文件的位置
template: './src/view/' + name + '.html',
//輸出文件的目錄和文件名稱
filename: 'view/' + name + '.html',
//添加特定favicon路徑到輸出的html文檔中
favicon: './favicon.ico',
//生成的html文檔的標(biāo)題
title: title,
//向template或者templateContent中注入所有靜態(tài)資源，不同的配置值注入的位置不經(jīng)相同。true或者body：所有JavaScript資源插入到body元素的底部
inject: true,
//是否為所有注入的靜態(tài)資源添加webpack每次編譯產(chǎn)生的唯一hash值
hash: true,
//允許插入到模板中的一些chunk，不配置此項默認(rèn)會將entry中所有的thunk注入到模板中。在配置多個頁面時，每個頁面注入的thunk應(yīng)該是不相同的，需要通過該配置為不同頁面注入不同的thunk；
chunks: ['common', name]
};
};
var config = {
//多頁面配置
entry: {
//通用模塊
'common': ['./src/page/common/index.js'],
//登錄模塊
'login': ['./src/page/login/index.js'],
//首頁
'index': ['./src/page/index/index.js']
},
output: {
//打包后文件存放的地方
path: __dirname + '/dist',
//打包后的文件名
filename: 'js/[name].js'
},
//將外部變量或者模塊加載進來，并且不將外部變量或者模塊編譯進文件中
externals: {
'jquery': 'window.jQuery'
},
module: {
loaders: [
//編譯ES6
{
test: /\.js$/,
//以下目錄不處理
exclude: /node_modules/,
//處理以下目錄
include: /src/,
loader: "babel-loader?cacheDirectory",
//配置的目標(biāo)運行環(huán)境自動啟用需要的 babel 插件
query: {
presets: ['latest']
}
},
//處理css
{
test: /\.css$/,
//css單獨打包
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: 'css-loader',
options: {
//支持@important引入css
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
//一定要寫在require("autoprefixer")前面，否則require("autoprefixer")無效
require('postcss-import')(),
require("autoprefixer")({
"browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
})
]
}
}
}
]
})
},
//處理less（同理sass）
{
test: /\.less$/,
//css單獨打包
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: 'css-loader',
options: {
//支持@important引入css
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
//一定要寫在require("autoprefixer")前面，否則require("autoprefixer")無效
require('postcss-import')(),
require("autoprefixer")({
"browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
})
]
}
}
},
'less-loader'
]
})
},
//處理圖片
{
test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/i,
loaders: [
//小于8k的圖片編譯為base64，大于10k的圖片使用file-loader
'url-loader?limit=8192&name=img/[name]-[hash:5].[ext]',
//圖片壓縮
'image-webpack-loader'
]
}
]
},
plugins: [
//html模板處理
new htmlWebpackPlugin(getHtmlConfig('index', '首頁')),
new htmlWebpackPlugin(getHtmlConfig('login', '登錄頁')),
//通用模塊編譯到j(luò)s/common.js
new webpack.optimize.CommonsChunkPlugin({
//公共塊的塊名稱
name: 'common',
//生成的文件名
filename: 'js/common.js'
}),
//css單獨打
new ExtractTextPlugin('css/[name].css')
]
}
module.exports = config;
2、package.json文件為：
{
"name": "webpack",
"version": "1.0.0",
"main": "bundle.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.4",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-latest": "^6.24.1",
"css-loader": "^0.28.7",
"ejs-loader": "^0.3.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"image-webpack-loader": "^3.4.2",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"postcss-import": "^10.0.0",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.5.6",
"webpack-dev-server": "^2.8.2"
},
"dependencies": {
"acorn": "^5.1.2",
"acorn-dynamic-import": "^2.0.2",
"ajv": "^5.2.2",
"ajv-keywords": "^2.1.0",
"align-text": "^0.1.4",
"ansi-regex": "^3.0.0",
"anymatch": "^1.3.2",
"arr-diff": "^2.0.0",
"arr-flatten": "^1.1.0",
"array-unique": "^0.2.1",
"asn1.js": "^4.9.1",
"assert": "^1.4.1",
"async": "^2.5.0",
"async-each": "^1.0.1",
"balanced-match": "^1.0.0",
"base64-js": "^1.2.1",
"big.js": "^3.1.3",
"binary-extensions": "^1.10.0",
"bn.js": "^4.11.8",
"brace-expansion": "^1.1.8",
"braces": "^1.8.5",
"brorand": "^1.1.0",
"browserify-aes": "^1.0.8",
"browserify-cipher": "^1.0.0",
"browserify-des": "^1.0.0",
"browserify-rsa": "^4.0.1",
"browserify-sign": "^4.0.4",
"browserify-zlib": "^0.1.4",
"buffer": "^4.9.1",
"buffer-xor": "^1.0.3",
"builtin-modules": "^1.1.1",
"builtin-status-codes": "^3.0.0",
"camelcase": "^4.1.0",
"center-align": "^0.1.3",
"chokidar": "^1.7.0",
"cipher-base": "^1.0.4",
"cliui": "^3.2.0",
"co": "^4.6.0",
"code-point-at": "^1.1.0",
"concat-map": "^0.0.1",
"console-browserify": "^1.1.0",
"constants-browserify": "^1.0.0",
"core-util-is": "^1.0.2",
"create-ecdh": "^4.0.0",
"create-hash": "^1.1.3",
"create-hmac": "^1.1.6",
"cross-spawn": "^5.1.0",
"crypto-browserify": "^3.11.1",
"d": "^1.0.0",
"date-now": "^0.1.4",
"decamelize": "^1.2.0",
"des.js": "^1.0.0",
"diffie-hellman": "^5.0.2",
"domain-browser": "^1.1.7",
"elliptic": "^6.4.0",
"emojis-list": "^2.1.0",
"enhanced-resolve": "^3.4.1",
"errno": "^0.1.4",
"error-ex": "^1.3.1",
"es5-ext": "^0.10.30",
"es6-iterator": "^2.0.1",
"es6-map": "^0.1.5",
"es6-set": "^0.1.5",
"es6-symbol": "^3.1.1",
"es6-weak-map": "^2.0.2",
"escope": "^3.6.0",
"esrecurse": "^4.2.0",
"estraverse": "^4.2.0",
"event-emitter": "^0.3.5",
"events": "^1.1.1",
"evp_bytestokey": "^1.0.3",
"execa": "^0.7.0",
"expand-brackets": "^0.1.5",
"expand-range": "^1.8.2",
"extglob": "^0.3.2",
"fast-deep-equal": "^1.0.0",
"filename-regex": "^2.0.1",
"fill-range": "^2.2.3",
"find-up": "^2.1.0",
"for-in": "^1.0.2",
"for-own": "^0.1.5",
"fsevents": "^1.1.2",
"get-caller-file": "^1.0.2",
"get-stream": "^3.0.0",
"glob-base": "^0.3.0",
"glob-parent": "^2.0.0",
"graceful-fs": "^4.1.11",
"has-flag": "^2.0.0",
"hash-base": "^3.0.4",
"hash.js": "^1.1.3",
"hmac-drbg": "^1.0.1",
"hosted-git-info": "^2.5.0",
"https-browserify": "^0.0.1",
"ieee754": "^1.1.8",
"indexof": "^0.0.1",
"inherits": "^2.0.3",
"interpret": "^1.0.3",
"invert-kv": "^1.0.0",
"is-arrayish": "^0.2.1",
"is-binary-path": "^1.0.1",
"is-buffer": "^1.1.5",
"is-builtin-module": "^1.0.0",
"is-dotfile": "^1.0.3",
"is-equal-shallow": "^0.1.3",
"is-extendable": "^0.1.1",
"is-extglob": "^1.0.0",
"is-fullwidth-code-point": "^2.0.0",
"is-glob": "^2.0.1",
"is-number": "^3.0.0",
"is-posix-bracket": "^0.1.1",
"is-primitive": "^2.0.0",
"is-stream": "^1.1.0",
"isarray": "^1.0.0",
"isexe": "^2.0.0",
"isobject": "^2.1.0",
"jquery": "^3.2.1",
"json-loader": "^0.5.7",
"json-schema-traverse": "^0.3.1",
"json-stable-stringify": "^1.0.1",
"json5": "^0.5.1",
"jsonify": "^0.0.0",
"kind-of": "^4.0.0",
"lazy-cache": "^1.0.4",
"lcid": "^1.0.0",
"load-json-file": "^2.0.0",
"loader-runner": "^2.3.0",
"loader-utils": "^1.1.0",
"locate-path": "^2.0.0",
"lodash": "^4.17.4",
"longest": "^1.0.1",
"lru-cache": "^4.1.1",
"md5.js": "^1.3.4",
"mem": "^1.1.0",
"memory-fs": "^0.4.1",
"micromatch": "^2.3.11",
"miller-rabin": "^4.0.0",
"mimic-fn": "^1.1.0",
"minimalistic-assert": "^1.0.0",
"minimalistic-crypto-utils": "^1.0.1",
"minimatch": "^3.0.4",
"minimist": "^0.0.8",
"mkdirp": "^0.5.1",
"node-libs-browser": "^2.0.0",
"normalize-package-data": "^2.4.0",
"normalize-path": "^2.1.1",
"npm-run-path": "^2.0.2",
"number-is-nan": "^1.0.1",
"object-assign": "^4.1.1",
"object.omit": "^2.0.1",
"os-browserify": "^0.2.1",
"os-locale": "^2.1.0",
"p-finally": "^1.0.0",
"p-limit": "^1.1.0",
"p-locate": "^2.0.0",
"pako": "^0.2.9",
"parse-asn1": "^5.1.0",
"parse-glob": "^3.0.4",
"parse-json": "^2.2.0",
"path-browserify": "^0.0.0",
"path-exists": "^3.0.0",
"path-is-absolute": "^1.0.1",
"path-key": "^2.0.1",
"path-type": "^2.0.0",
"pbkdf2": "^3.0.14",
"pify": "^2.3.0",
"preserve": "^0.2.0",
"process": "^0.11.10",
"process-nextick-args": "^1.0.7",
"prr": "^0.0.0",
"pseudomap": "^1.0.2",
"public-encrypt": "^4.0.0",
"punycode": "^1.4.1",
"querystring": "^0.2.0",
"querystring-es3": "^0.2.1",
"randomatic": "^1.1.7",
"randombytes": "^2.0.5",
"read-pkg": "^2.0.0",
"read-pkg-up": "^2.0.0",
"readable-stream": "^2.3.3",
"readdirp": "^2.1.0",
"regex-cache": "^0.4.4",
"remove-trailing-separator": "^1.1.0",
"repeat-element": "^1.1.2",
"repeat-string": "^1.6.1",
"require-directory": "^2.1.1",
"require-main-filename": "^1.0.1",
"right-align": "^0.1.3",
"ripemd160": "^2.0.1",
"safe-buffer": "^5.1.1",
"semver": "^5.4.1",
"set-blocking": "^2.0.0",
"set-immediate-shim": "^1.0.1",
"setimmediate": "^1.0.5",
"sha.js": "^2.4.8",
"shebang-command": "^1.2.0",
"shebang-regex": "^1.0.0",
"signal-exit": "^3.0.2",
"source-list-map": "^2.0.0",
"source-map": "^0.5.7",
"spdx-correct": "^1.0.2",
"spdx-expression-parse": "^1.0.4",
"spdx-license-ids": "^1.2.2",
"stream-browserify": "^2.0.1",
"stream-http": "^2.7.2",
"string-width": "^2.1.1",
"string_decoder": "^1.0.3",
"strip-ansi": "^4.0.0",
"strip-bom": "^3.0.0",
"strip-eof": "^1.0.0",
"supports-color": "^4.4.0",
"tapable": "^0.2.8",
"timers-browserify": "^2.0.4",
"to-arraybuffer": "^1.0.1",
"tty-browserify": "^0.0.0",
"uglify-js": "^2.8.29",
"uglify-to-browserify": "^1.0.2",
"uglifyjs-webpack-plugin": "^0.4.6",
"url": "^0.11.0",
"util": "^0.10.3",
"util-deprecate": "^1.0.2",
"validate-npm-package-license": "^3.0.1",
"vm-browserify": "^0.0.4",
"watchpack": "^1.4.0",
"webpack": "^3.5.6",
"webpack-sources": "^1.0.1",
"which": "^1.3.0",
"which-module": "^2.0.0",
"window-size": "^0.1.0",
"wordwrap": "^0.0.2",
"wrap-ansi": "^2.1.0",
"xtend": "^4.0.1",
"y18n": "^3.2.1",
"yallist": "^2.1.2",
"yargs": "^8.0.2",
"yargs-parser": "^7.0.0"
},
"description": ""
}
3、命令行：
npm run webpack
以上這篇基于webpack 實用配置方法總結(jié)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JS中使用Array函數(shù)shift和pop創(chuàng)建可忽略參數(shù)的例子
這篇文章主要介紹了JS中使用Array函數(shù)shift和pop創(chuàng)建可忽略參數(shù)的例子,這是一種比較高級的應(yīng)用,需要的朋友可以參考下2014-05-05
這篇文章主要給大家介紹了關(guān)于Javascript中click與blur事件順序的相關(guān)資料，文中介紹的非常詳細，對大家學(xué)習(xí)或者使用Javascript中的click與blur事件具有一定的參考學(xué)習(xí)價值，需要的朋友可以下面來一起看看吧。2017-04-04
JavaScript如何動態(tài)創(chuàng)建table表格
這篇文章主要介紹了JavaScript如何動態(tài)創(chuàng)建table表格，一些時候需要動態(tài)的創(chuàng)建和刪除表格，接下來的文章中將為大家介紹下javascript是如何做到的，感興趣的朋友不要錯過2015-11-11
這篇文章主要介紹了js限制input標(biāo)簽中只能輸入中文的的相關(guān)資料,需要的朋友可以參考下2015-06-06
javascript 中 array.sort() 中的參數(shù)，需要傳入的是一個函數(shù)，而且必須是一個函數(shù)2011-10-10
JS中實現(xiàn)函數(shù)return多個返回值的實例
下面小編就為大家?guī)硪黄狫S中實現(xiàn)函數(shù)return多個返回值的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)書架小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了PHP中使用微秒計算腳本執(zhí)行時間例子,本文先是講解了microtime函數(shù)的一些知識,然后給出了一個計算腳本運行時間的類,需要的朋友可以參考下2014-11-11
判斷一個控件是否已加載完成其實很簡單，就是利用瀏覽器的解析順序。通俗的說，代碼的位置越靠前，就越先加載。2010-02-02
這篇文章主要介紹了Html IFrame的用法及注意點,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12