基于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实用配置方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。