基于webpack 实用配置方法总结
1、webpack.config.js配置文件为：
//处理共用、通用的js
varwebpack=require('webpack');
//处理html模板
varhtmlWebpackPlugin=require('html-webpack-plugin');
//css单独打包
varExtractTextPlugin=require("extract-text-webpack-plugin");
//获取html-webpack-plugin参数的方法
vargetHtmlConfig=function(name,title){
return{
//本地模板文件的位置
template:'./src/view/'+name+'.html',
//输出文件的目录和文件名称
filename:'view/'+name+'.html',
//添加特定favicon路径到输出的html文档中
favicon:'./favicon.ico',
//生成的html文档的标题
title:title,
//向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。true或者body：所有JavaScript资源插入到body元素的底部
inject:true,
//是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
hash:true,
//允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；
chunks:['common',name]
};
};
varconfig={
//多页面配置
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",
//配置的目标运行环境自动启用需要的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模板处理
newhtmlWebpackPlugin(getHtmlConfig('index','首页')),
newhtmlWebpackPlugin(getHtmlConfig('login','登录页')),
//通用模块编译到js/common.js
newwebpack.optimize.CommonsChunkPlugin({
//公共块的块名称
name:'common',
//生成的文件名
filename:'js/common.js'
}),
//css单独打
newExtractTextPlugin('css/[name].css')
]
}
module.exports=config;
2、package.json文件为：
{
"name":"webpack",
"version":"1.0.0",
"main":"bundle.js",
"scripts":{
"test":"echo\"Error:notestspecified\"&&exit1",
"webpack":"webpack--configwebpack.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、命令行：
npmrunwebpack
以上这篇基于webpack实用配置方法总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。