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

npm run webpack