webpack 实用配置总结

//处理共用、通用的jsvar 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", ???????????????//配置的目标运行环境自动启用需要的 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;

{ ?"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": ""}

npm run webpack