1. 程式人生 > >webpack 實用配置總結

webpack 實用配置總結

rim 實用 server ima fix sco sig words bundle

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", //配置的目標運行環境自動啟用需要的 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 實用配置總結