웹팩 구성 방법 요약

//处理共用、通用的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;

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