基于webpack 实用配置方法总结

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) {
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]
};
};
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",
//配置的目标运行环境自动启用需要的 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', '登录页')),
//通用模块编译到js/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 实用配置方法总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• webpack配置的最佳实践分享
• webpack常用配置项配置文件介绍
• 深入理解Webpack 中路径的配置
• webpack配置文件和常用配置项介绍